Programmatically launch the select file dialog box

Question

I have a hidden file input element. Is it possible to initiate its file selection dialog from a button click event?

Answer 1

If you want to have your own button for downloading a file instead of <input type="file" /> , you can do something like:

 <input id="myInput" type="file" style="visibility:hidden" /> <input type="button" value="Show Dialog" onclick="$('#myInput').click();" /> 

Note that I used visibility: hidden instead of display: none . You cannot trigger a click event when entering a file that is not displayed.

Answer 2

Most of the answers lack useful information:

Yes, you can programmatically click an input element using jQuery / JavaScript, but only if you do this in an event handler that belongs to an event that BEGAN USER!

So, for example, nothing will happen if you, script, programmatically click a button in the ajax callback, but if you put the same line of code in the event handler that was raised by the user, this will work.

PS Keyword debugger; breaks the viewport if it is in front of a soft click ... at least in chrome 33 ...

Answer 3

For write-only, there is an alternative solution that does not require javascript. This is a little hack, using the fact that clicking on the label sets focus to the corresponding input.

You need a <label> with the correct for attribute (indicates input), optionnaly, like a button (with bootstrap, use btn btn-default ). When the user clicks a label, a dialog box opens, for example:

 <!-- optionnal, to add a bit of style --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <!-- minimal setup --> <label for="exampleInput" class="btn btn-default"> Click me </label> <input type="file" id="exampleInput" style="display: none" /> 

Answer 4

I'm not sure how browsers handle clicks on type="file" elements (that's all, security issues), but this should work:

 $('input[type="file"]').click(); 

I tested this JSFiddle in Chrome, Firefox and Opera, and they all show a file browsing dialog.

Answer 5

The best solution, works in all browsers .. even on mobile devices.

 <div class="btn" id="s_photo">Upload</div> <input type="file" name="s_file" id="s_file" style="opacity: 0;">'; // jquery <script> $("#s_photo").click(function() { $("#s_file").trigger("click"); }); </script> 

Hiding the input file type causes problems with browsers, opacity is the best solution, because it does not hide, just does not appear. :)

Answer 6

Naturally, the only way is to create an <input type="file"> element, and then, unfortunately, simulate a click.

There's a tiny plugin (a shameless plugin) that will save you from having to do this all the time: file-dialog

 fileDialog() .then(file => { const data = new FormData() data.append('file', file[0]) data.append('imageName', 'flower') // Post to server fetch('/uploadImage', { method: 'POST', body: data }) }) 

Answer 7

I transfer input[type=file] to the tag tag, and then label style to your liking and hide the input .

 <label class="btn btn-default fileLabel" data-toggle="tooltip" data-placement="top" title="Upload"> <input type="file"> <span><i class="fa fa-upload"></i></span> </label> <style> .fileLabel input[type="file"] { position: fixed; top: -1000px; } </style> 

Pure CSS solution.

Answer 8

There is no way to cross-browser this for security reasons. What people usually do is overlay the input file on something else and make it visible to hide, so it launches on its own. More info here

Answer 9

Using jQuery, you can call click() to simulate a click.

Answer 10

This worked for me:

 $('#fileInput').val('');