Rails: Cloudinary Uploader Not Uploading

Question

I'm having a bit of trouble getting the Cloudinary Javascript to upload to their server.

I followed the directions for rails from their blog post: http://cloudinary.com/blog/direct_image_uploads_from_the_browser_to_the_cloud_with_jquery

I ended up with the basic choose file button on the page. Clicking that lets me browse and select an image, but aside from displaying the name of the file next to the button, nothing else happens. Looking at the media library afterwards shows nothing has been uploaded.

Looking at the page source for the form I see:

<script type="text/javascript">$.cloudinary.config({"api_key":"xxxxxxxxxxxxx","cloud_name":"xxxxxxx"});</script>

<form accept-charset="UTF-8" action="/admin/settings/update" class="new_settings" id="new_settings" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="wwgaFBlShaTklqEY7sz6xwhpK6JKtNNMFvnNJCX4zS0=" /></div>
<input class="cloudinary-fileupload" data-cloudinary-field="settings[image_id]" data-form-data="{&quot;timestamp&quot;:1381477800,&quot;callback&quot;:&quot;http://127.0.0.1:3000/cloudinary_cors.html&quot;,&quot;use_filename&quot;:1,&quot;folder&quot;:&quot;wtdu/header&quot;,&quot;signature&quot;:&quot;xxxxxxxxxx&quot;,&quot;api_key&quot;:&quot;xxxxxxx&quot;}" data-url="https://api.cloudinary.com/v1_1/xxxxxxxx/auto/upload" name="file" type="file"></input>
<input name="commit" type="submit" value="Create Settings" />
</form>

The data in the cloudinary input field has been sanitized, should this happen?

I did add a submit button, but that didn't affect anything. I didn't expect it to, since the image should be uploaded from the browser, not the update method in the controller.

Just a thought. I am using the jquery-rails gem. Is this the correct jquery gem to use?

The project is using Rails 4 and Ruby 2.

Any other ideas would be appreciated.

Edit 1

Thanks to the comments below I used the developer tools. Two outcomes:

1. Checking the network, no activity occurred when I tried to upload.

2. Although all the libraries required by Cloudinary are loaded, there are some javascript errors

   Uncaught TypeError: Object function (selector,context){return new jQuery.fn.init(selector,context);} has no method 'ajaxTransport' jquery.iframe-transport.js:38

   Uncaught TypeError: Cannot set property 'xhrFileUpload' of undefined jquery.fileupload.js:33

These are the included JS files

<script src="/javascripts/jquery.ui.widget.js"></script>
<script src="/javascripts/jquery.iframe-transport.js"></script>
<script src="/javascripts/jquery.fileupload.js"></script>
<script src="/javascripts/jquery.cloudinary.js"></script>

Edit 2

It turned out that jquery.js was not being included, although there was a google.load("jquery", "1.2.6"); statement in the page source.

Once I included jquery.js it started uploading to Cloudinary. Thanks everyone for your help.

However, I'm still having some issues. Once the upload includes, returning 200 OK, I'm not getting a return value. The image id is coming back empty, so I can't store that for later use.

Answer 1

Can you please check if you included jQuery (jquery.js should be included before the four files listed above).

Answer 2

This question is old, but I feel compelled to answer it, since I just encountered and solved this exact problem myself. My mistake was that I had not commented out the default image storage option (storage :file) in the CarrierWave uploader.