JQuery File Uploader IE9 Do not publish any parameters to Upload

Question

I use a plugin to load jQuery files along with rails 3. The plugin is here:

https://github.com/blueimp/jQuery-File-Upload

I use a plugin to allow the user to upload a profile photo. The solution so far works with Chrome, Safari and Firefox. However, on IE this fails. When you select a file in IE, plugins are sent to the server, but there are no parameters, this is an empty post.

Example message in chrome:

Started PUT "/api/1/settings/ajax_photo_upload" for 10.0.1.3 at 2012-10-02 15:39:20 -0700 Processing by ApiV1::SettingsController#ajax_photo_upload as JS Parameters: {"photo"=>#<ActionDispatch::Http::UploadedFile:0x007f9e4bac2e48 @original_filename="xxxxx.jpeg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"user[photo]\"; filename=\"xxxxx.jpeg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:/var/folders/3x/k1yb0r4s07q1jm82kq93ch180000gn/T/RackMultipart20121002-3633-sxsbtu>>}, "update_type"=>"general"} 

However, in IE9 it does not send anything:

 Started PUT "/api/1/settings/ajax_photo_upload" for 10.0.1.10 at 2012-10-02 15:39:31 -0700 Processing by ApiV1::SettingsController#ajax_photo_upload as JS 

Here is my implementation:

 $('input[type="file"]').fileupload({ url : '/api/1/settings/ajax_photo_upload', formData : [{ name : 'authenticity_token', value : $('meta[name="csrf-token"]').attr('content') }], type : 'PUT', dataType: 'json', add : function (e, data) { data.submit(); } }); 

HTML

 <input name="user[photo]" type="file" accept="image/*" > 

Any ideas why IE will do this? Thanks

Answer 1

Do you use the main plugin? I was, and I had the same problem, and I struggled with it for a day, only to understand that I did not include the jquery.iframe-transport.js plugin:

 <script src="js/jquery.iframe-transport.js"></script> 

See the documentation here .

ABOUT! and thanks for your fragment about including the key-value pair "authenticity_token" as "formData" - this helped me get rid of the rails 3 warning "WARNING: it is not possible to verify the authenticity of the CSRF token"

Answer 2

This is mainly support for html 5 data tags. IE9 has serious problems with this. For example, when you upload an image, in chrome it passes the data: blob and gives you a preview before actually uploading the image. In IE you cannot. Check the Gmail email attachment screen in IE9, you will see the difference. If this is a large-scale project, I advise you to use flash as an image downloader.

Answer 3

  $("#txt1").fileupload({ replaceFileInput: false, dataType: "json", datatype:"json", url: "<%=Page.ResolveUrl("~/WebService/AddAttachment.ashx")%>", done: function (e, data) { $.each(data.result, function (index, value) { //You get the response data in here from your web service }) $("#txt1").val(""); }`enter code here` }); 

This is tested and works fine in both IE8 and IE9 + above. Be sure to use the correct data type: "json" (or data type: "json"), and make sure your web service method response is correctly updated to data.result when debugging and validating. Thanks