Skip to main content

IE9 prompt to download JSON from cloudinary during image upload from browser

Patrick Hannigan

I have built out an image uploading feature using the cloudinary jQuery image uploader. I am testing it in various browsers and all seem to work fine except for <IE9. After the image is uploaded, the browser is prompting me to download a file called "uploadxxxxxxx.json" from cloudinary.com. From dealing with this bug previously, it seems likely to me that cloudinary isn't setting the correct content-type header in the response for things to work correctly in IE9. Here's a nearly identical problem and solution on SO:

http://stackoverflow.com/questions/14078484/web-api-ie9-json-data-do-you-want-to-open-or-save-this-file

Any help here? Thanks

Patrick

0

Comments

4 comments

Date Votes
  • Tal Lev-Ami

    IE9 doesn't support CORS, so a fallback is used based on form submission inside an iframe.

    For this to work, please make sure that jquery.iframe-transport.js is included and that a callback URL is given pointing to your cloudinary_cors.html file. Read  this for more information.

    0
  • Patrick Hannigan

    Thanks for your response, Tal. I'm still getting the same error in IE 9.

    I've verified that jquery.iframe-transport.js is included and that cloudinary_cors.html is being served correctly. I'm using Django and using the {% cloudinary_direct_upload_field %} template tag to generate the <input> element which includes the data-form-data containing the information needed for direct upload. One weird thing I'm now noticing is that the callback is not being specified in the encoded JSON element inside the <input> that {% cloudinary_direct_upload_field %} is returning. Here's what it looks like:

    <input class="cloudinary-fileupload " data-cloudinary-field="image" data-form-data="{&quot;timestamp&quot;: &quot;1401404503&quot;, &quot;api\_key&quot;: &quot;438253874291116&quot;, &quot;signature&quot;: &quot;a6422331d850de0f7a4ed71ab86d0488f0b44df0&quot;}" data-url="https://api.cloudinary.com/v1\_1/psmatch/auto/upload" name="file" options="{&#39;resource\_type&#39;: &#39;auto&#39;}" type="file" />

    decoded:

    {"timestamp": "1401404503", "api_key": "438253874291116", "signature": "a6422331d850de0f7a4ed71ab86d0488f0b44df0"}

    Note the lack of 'callback' parameter... am I doing something wrong here?

    0
  • Tal Lev-Ami

    Did you call cl_init_js_callbacks?

    See http://cloudinary.com/documentation/django_image_upload#direct_uploading_from_the_browser

    0
  • Patrick Hannigan

    Thanks for getting back to me, Tal. I managed to sort out my problem. For reference - I am building an uploading flow where a user can upload an image (to cloudinary), view a preview of it (after applying some transformations), and then either save it (I capture and save the public ID in my Django app) or simply discard it (user leaves the page and image is "forgotten"). The problem was that I was doing this:

    {% cloudinary_direct_upload_field %}

    when I needed to be doing this

    {% cloudinary_direct_upload_field "someString" request=request %}

    in order for:

    a) "someString" to be passed in the cloudinarydone callback (needed since I have multiple image upload inputs on the page)

    and b) the whole CORS - IE9 configuration to work correctly. at the end of the day it wasn't super intuitive to set up but it's working for now.

     

    Thanks for your help. I've run into another problem but I opened a separate thread for that since it's unrelated to this problem: http://support.cloudinary.com/entries/28645781-How-do-I-programatically-add-cloudinary-file-inputs-via-jQuery-after-page-load-is-complete-

    0

Post is closed for comments.

Didn't find what you were looking for?

New post