30

Possible Duplicate:
In JavaScript can I make a “click” event fire programmatically for a file input element?

I've got a web page that looks like this

<html>
    <head>
        <title>File Upload Click Test</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    </head>
    <body>
        <div onclick="$('input[type=file]').click()" >CLICK SIMULATOR</div>
        <input type="file"></input>
    </body>
</html>

My goal is to have the div raise a click event on the file input, and this seems to work exactly as I'd expect in IE and Chrome, but doesn't work in Firefox (no file browser is opened when you click on the div).

Is there a way to get this working in FF?

Community
  • 1
  • 1
kristian
  • 22,731
  • 8
  • 50
  • 78
  • 1
    It is coming in FF4: https://developer.mozilla.org/en/using_files_from_web_applications#Using_hidden_file_input_elements_using_the_click()_method – Roatin Marth Oct 27 '10 at 14:36
  • See this answer http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e/3030174#3030174 it works in FF also – TheVillageIdiot Apr 26 '11 at 06:50
  • This morning I tested the script and it's work fine in firefox 4. Firefox 4 allows click event on the file input. – kriom Mar 26 '11 at 11:43
  • Read your problem and the answers given, unfortunately what they say seems to be correct. I found some another articles that may help to figure this out. check them. You'll solve the problem...! > 01. http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e > > 02. http://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript – Dilhan Maduranga Mar 13 '11 at 13:07

2 Answers2

34

Is there a way to get this working in FF?

No, and it doesn't work in most common versions of IE, either. IE will open the dialog, but once you've selected a file with it the form won't actually submit.

Abandon hope. The only way to fake a file upload box is using the transparency technique, and that's really not recommended at all as browsers may lay out file upload boxes differently internally (or even provide a file upload control that doesn't include a Browse dialogue), making it highly likely you'll end up with an inoperable form.

Learn to love the grey file upload field, or use progressive enhancement to replace it with Flash where available.

bobince
  • 528,062
  • 107
  • 651
  • 834
  • 45
    Abandon hope. Check. – kristian Dec 02 '09 at 01:38
  • 7
    It's working now in Firefox 4. – Shadow The GPT Wizard Mar 13 '11 at 09:29
  • 1
    Well thanks for not allowing me to waste any more time.. already spent a couple days on this with hope in hand. – Nick Rolando Jan 16 '14 at 00:14
  • Thanks for this, I was stuck for awhile as I was implementing file uploading with ajax using an iframe method to support older IE versions. After lots of hitting my head I stripped my form down to find the ajax method with the iframe was working correctly. I found it was actually this issue, as I had a click event firing for a paper clip image. Solution was to just adjust the opacity of the input (instead of it being hidden) as seen: http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input?lq=1 :) – Tom May 18 '15 at 12:36
22

Here's the workaround (FF). The HTML bit:

<label>Upload Business Logo</label>
<input type="file" name="logo" id="logo" class="file-upload" />
<input type="text" id="text-logo" class="text-upload" readonly/>
<input type="button" id="btn-logo" class="btn-upload" alt="" />

CSS for the input file type:

.file-upload { display:none; }

The jQuery bit:

//bind click
$('#btn-logo').click(function(event) {
  $('#logo').click();
});

//capture selected filename
$('#logo').change(function(click) {
  $('#text-logo').val(this.value);
});

Upon form submit, the hidden input file will upload the file. Hope this helps :)

Design Kanya
  • 231
  • 2
  • 4
  • Did you try the code? If it were that easy, why would the asker be here? Why would I be here? Last I checked, you can't set the value of a file input. And apparently you can't trigger events on them either. Probably security reasons. – Stoutie Aug 07 '14 at 22:07
  • 2
    I take it back, looks like it is that simple. But it doesn't work when trying it in the console. When I place the code in my document, it seems to work just fine. Derp. – Stoutie Aug 07 '14 at 22:10
  • 1
    +1 this works perfectly, just not in the console! Weird, I guess it's for security purposes. – ksloan Sep 22 '14 at 20:37
  • 1
    This works so easily! I think the confusion is in console that doesn't reflect same. By the way! a +1 for you :) – Rubyrider Oct 05 '14 at 04:27
  • I am trying this. Form gets posted without the select file dialog ever popping up. And the file not present in request. What gives? – sureshvv Apr 17 '15 at 08:55
  • 1
    Here's a [jsfiddle](http://jsfiddle.net/x8c8urLf/) of this code – philfreo Apr 26 '15 at 04:08