Question

Im trying to recreate gmail’s file upload functionality – that is instead of using the default file input type – I’m hiding that element and using an href to simulate clicking on the default control.

That part I have working in all browsers, but I use the file control’s onchange handle to start the file upload (submit temp form/post results to the iframe). The problem is that the control appears to be blank in IE after selecting a file, but its working fine in FF & Chrome. I only need to support IE 8+.

One last tricky bit – this happens within an existing form, so I use jQuery to append a form to the bottom of the document.

<a id ="upper">Upload</a>

fires off this jQuery

$("#upper").click(function() {
  $('#dynamic_files').click();
});

adding form dynamically

      $().ready(function() {
            $('body').append('<form id="my_form" name="upload" action="/fil/upload"       
method="POST" enctype="multipart/form-data" target="my_iframe">
<iframe id="my_iframe" name="my_iframe" src="" style="display:block;"></iframe>  
<input type="file" name="files[resource_file]" id="dynamic_files"  
onChange="this.form.submit();" /></form>');
       });

Also wanted to note that in IE this code works IF I click on the default file selector control instead of my ‘shortcut’ link

Answer 1

This is a limitation of IE 8. Gmail uses flash to get around using a file input control. One way you can fake it out is to set the opacity of the control to 0 and overlay it over your button as demonstrated in this example:

http://www.quirksmode.org/dom/inputfile.html

There are also a bunch of pre-built solutions out there that can abstract this away from you. One I have used in the past is PLUpload:

http://www.plupload.com/