jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox? [duplicate]

Question

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?

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. stackoverflow.com/questions/210643/… > > 02. stackoverflow.com/questions/2048026/… — Dilhan Maduranga
– Dilhan Maduranga, Commented Mar 13, 2011 at 13:07
This morning I tested the script and it's work fine in firefox 4. Firefox 4 allows click event on the file input. — kriom
– kriom, Commented Mar 26, 2011 at 11:43
See this answer stackoverflow.com/questions/210643/… it works in FF also — amantur
– amantur, Commented Apr 26, 2011 at 6:50

bobince · Accepted Answer · 2009-12-02 00:01:40Z

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.

answered Dec 2, 2009 at 0:01

bobince

538k111 gold badges675 silver badges846 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kristian Over a year ago

Abandon hope. Check.

user447356 Over a year ago

It's working now in Firefox 4.

Nick Rolando Over a year ago

Well thanks for not allowing me to waste any more time.. already spent a couple days on this with hope in hand.

Tom Over a year ago

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: stackoverflow.com/questions/210643/… :)

Design Kanya · Accepted Answer · 2012-02-20 01:22:02Z

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 :)

edited Feb 20, 2012 at 1:22

answered Feb 20, 2012 at 1:15

Design Kanya

2312 silver badges4 bronze badges

6 Comments

Stoutie Over a year ago

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 Over a year ago

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.

ksloan Over a year ago

+1 this works perfectly, just not in the console! Weird, I guess it's for security purposes.

Rubyrider Over a year ago

This works so easily! I think the confusion is in console that doesn't reflect same. By the way! a +1 for you :)

philfreo Over a year ago

Here's a jsfiddle of this code

|

Collectives™ on Stack Overflow

jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox? [duplicate]

2 Answers 2

4 Comments

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Linked

Related