Question

I’m using cloudinary and have followed everything here: http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery

This is my view haml:

= form_tag items_path do
  = cl_image_upload_tag(:image_id, :crop => :limit, :width => 1000, :height => 1000)
  = submit_tag 'Submit'

I’ve checked and all cloudinary javascript is loaded. The button is uploading the file to cloudinary and my chrome console shows this:

XHR finished loading: "https://api.cloudinary.com/v1_1/hhfk6ki1i/auto/upload". jquery.js:8417
send jquery.js:8417
jQuery.extend.ajax jquery.js:7969
send jquery.fileupload.js:600
$.widget._onSend jquery.fileupload.js:656
newData.submit jquery.fileupload.js:695
$.widget.options.add jquery.fileupload.js:137
$.Widget._trigger jquery.ui.widget.js:278
(anonymous function) jquery.fileupload.js:698
jQuery.extend.each jquery.js:612
$.widget._onAdd jquery.fileupload.js:688
$.widget._onChange jquery.fileupload.js:752
jQuery.event.dispatch jquery.js:3064
elemData.handle.eventHandle

I would expect my button to show the name of the uploaded file after I select a file. Is that something that should happen thanks to the cloudinary plugin or shall I implement all the Javascript to capture that event and change my upload tag?

I’m talking about this button that always says ‘No file chosen’ (even after the file has been uploaded and is available in Cloudinary):

BTW: In case it’s relevant. I’m not using carrierwave nor Attachinary because I work with couchrest_model

Answer 1

The behavior of replacing the input field when upload starts can be disabled by running:

$('.cloudinary-fileupload').fileupload('option', 'replaceFileInput', false);

The callback of cloudinarydone is called when the upload completes. If you want to hide the field as soon as it starts (when the input field is reset) you can use:

$('.cloudinary-fileupload').bind('fileuploadchange', function() { $(this).hide()})