2

From what I've been reading, opening a <input type="file"> file browse dialog through JavaScript has issues in some browsers. It appears that Firefox and Opera have the most problems with this. The typical recommendation I've seen is to put the <input type="file"> on top of your click element and set it's opacity to 0. Obviously that is not an ideal solution.

I have the code below:

<div style="position: absolute; overflow: hidden; width: 1px; height: 1px; opacity: 0;">
    <input type="file" id="fileInput" name="files[]" multiple="multiple" />
</div>
<input type="button" value="Open" onclick="$('#fileInput').trigger('click')" />

I've tested this in IE8, Chrome (newer version), and Firefox (newer version). In all of these this code works fine.

I'm wondering, does anybody know which browsers this code will have problems with? I want to support IE8+ and all of the relatively newer versions of Chrome, Firefox, and Opera.

Improve this question
2
  • Why not try out? In general, triggering a click on a file input will always be a tricky thing because it's a security issue at heart - sites tricking users into uploading files are one of the worst nightmares of browser security. Why do you want to do this in the first place? Do you want to improve the element's design? I think there are tried and tested methods out there (some of which should come with the needed compatibility info) Commented Aug 3, 2013 at 8:29
  • I'm not sure what you mean. I've tried it out in 4 different browsers (I just tried in Safari and it works fine). It can't be that big of a security concern as every major browser now supports this. I cannot install every previous version of each browser to see if there's problems, which is why I'm asking if someone knows which older browsers this may have problems with. If someone can point me to which browser versions may have issues, I can download that browser and do testing. Commented Aug 3, 2013 at 8:36

3 Answers 3

Reset to default
3

It is possible to the compatibility by following these steps:

  1. Uploading the html file and jQuery (in this case compressed, production jQuery 1.10.2) to a remote server.

  2. Using this online service to emulate different version of browsers.

Result

  • IE 6, 7 and 8: OK
  • FIREFOX 3, 3.6: FAILED
  • FIREFOX 4 and later: OK
  • SAFARI 4 and later: OK
  • CHROME 14 and later: OK
  • OPERA 11 and 11.5: FAILED
  • OPERA 11.6 and later : OK
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I've just checked your code in chrome 28 and Firefox 22 and it worked fine;

However I was not able to check it on IE 8 (maybe something is wrong with my browser).

There is an alternative to this method. you can place your input wherever you want and just set the css display property to none:

 <input type="file" id="fileInput" name="files[]" multiple="multiple" style="display: none;" />

Have you tried this?

Improve this answer

5 Comments

Thanks for the comment What I've read is setting the input to display: none won't allow you to initiate an onclick event in Chrome and Safari. I think my original post was a little misunderstood (probably my fault). I've already tested in IE8, Chrome, Safari, and Firefox, but I've read some of these browsers have problems in earlier versions. I'm just not sure which versions have problems, since it works fine in all my browsers.
I'm not sure about safari but this works fine with Chrome, Firefox and IE 8. As for checking it against older versions I will get back to you if i have anymore information.
Thanks. That's why I'm asking here. It seems all of the information about what's allowed and what isn't with file inputs is very outdated. It works fine in all my browsers, but unfortunately the general public likes to use outdated software.
I uploaded your code to a server alongside jquery (compressed, production jQuery 1.10.2). Then I tested the combination on an online service provided by on link. This service will emulate different browser version and show you the result. Here is the result: IE 6, 7, 8 : OK FIREFOX 3, 3.6 : FAILED FIREFOX 4, later : OK SAFARI 4, later : OK CHROME 14, later : OK OPERA 11, 11.5 : FAILED OPERA 11.6, later : OK
Wow, this is great. Thank you! Would you mind putting this last comment in an answer and I can mark it as the answer for other people looking at this thread?
0

<------ EDIT: This method does not work but thought I might leave it here in case others think it may work ------->

You could use setTimeout to detect if the file browser was opened as a fallback. If it isn't open show the actual file input.

if you add a setTimeout of 50 milliseconds and then check the time amount of time that it took to actually access run the timeout. If this is less than 100 milliseconds the file browser did not open and block the javascript. If it runs for longer it must have been opened.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.