ruby-on-rails-3internet-explorerjquery-fileupload-rails

Rails blueimp fileupload - cannot select files in Internet Explorer


In my Rails App (3.2.12) I'm using the jquery-fileupload-rails gem to enable users ti upload profile pictures. Everything works fine in Chrome and Safari, but in Internet Explorer (I tested it with version 10) I can't even select files to upload. When I click the 'Add Files'-Button, instead of showing a dialog to select files he instantly fires an empty request to the upload action, resulting in a json response showing an empty photo object. This is my current js to initialize the fileupload (I already added some code from issues with IE and the csrf-tokens):

// Initialize the jQuery File Upload widget:
  $('#fileupload').fileupload({
    dataType: 'json',
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png|tiff)$/i
  });

  // Enable iframe cross-domain access via redirect option:
  $('#fileupload').fileupload(
      'option',
      'redirect',
      window.location.href.replace(/\/[^\/]*$/, '/photos?%s')
  );

  //add csrf token manually for ie iframe transport
  $('#fileupload').bind('fileuploadsend', function(event, data) {
    auth_token = $('meta[name="csrf-token"]').attr('content');
    data.url = data.url + '?authenticity_token=' + encodeURIComponent(auth_token); 
    $.blueimp.fileupload.prototype.options.send.call(this, event, data);
  });

and my controller code for the response, in which I already (hopefully correct) set the content type to 'text/plain':

format.html {
    render json: [@photo.to_jq_upload].to_json,
    content_type: 'text/plain', #content_type: 'text/html',
    layout: false
}
format.json { 
    render json: {files: [@photo.to_jq_upload]},
    content_type: 'text/plain',
    status: :created, 
    location: @photo
}

Does anyone know, how to get this to work in IE and can help me please? Thanks :)


Solution

  • It took me quite some time to figure it out but in the end it was actually pretty simple: When applying my own styles I replaced the span-tag around the Add-Files-Button with a button-tag. This had no effect in the webkit browsers, however led to an immediate form submit in Firefox and Internet Explorer. Changing it back finally solved the issue :)