Programmatically trigger "select file" dialog box
JavascriptJqueryHtmlJavascript Problem Overview
I have a hidden file input element. Is it possible to trigger its select file dialog box from a button's click event?
Javascript Solutions
Solution 1 - Javascript
If you're looking to have your own button to upload a file instead of using <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 call the click event on a non-displayed file input.
Solution 2 - Javascript
Most answers here are lacking a useful information:
Yes, you can programmatically click the input element using jQuery/JavaScript, but only if you do it in an event handler belonging to an event THAT WAS STARTED BY THE USER!
So, for example, nothing will happen if you, the script, programmatically click the button in an ajax callback, but if you put the same line of code in an event handler that was raised by the user, it will work.
P.S. The debugger;
keyword disrupts the browse window if it is before the programmatical click ...at least in chrome 33...
Solution 3 - Javascript
Just for the record, there is an alternative solution that does not require javascript. It is a bit of a hack, exploiting the fact that clicking on a label sets the focus on the associated input.
You need a <label>
with a proper for
attribute (points to the input), optionnaly styled like a button (with bootstrap, use btn btn-default
). When the user clicks the label, the dialog opens, 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" />
Solution 4 - Javascript
I'm not sure how browsers handle clicks on type="file"
elements (security concerns and all), but this should work:
$('input[type="file"]').click();
I've tested this JSFiddle in Chrome, Firefox and Opera and they all show the file browse dialog.
Solution 5 - Javascript
I wrap the input[type=file]
in a label tag, then style the label
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>
Purely CSS Solution.
Solution 6 - Javascript
Nowadays a hybrid solution like this can be have the best experience,
let fileHandle;
async function fileOpen() {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
console.log(await file.text());
}
// The advantage of this is fileHandle can be used to save to
// the opened file itself later, read more on this in https://web.dev/file-system-access/
// in April 2021, window.showOpenFilePicker still not support in Safari
// so one should have this around also
function legacyFileOpen() {
var input = document.createElement('input');
input.type = 'file';
input.onchange = function () {
input.files[0].arrayBuffer().then(function (arrayBuffer) {
console.log(new TextDecoder().decode(arrayBuffer));
});
}
input.click();
}
Solution 7 - Javascript
The best solution, works in all browsers.. even on mobile.
<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 isn't hiding, just not showing. :)
Solution 8 - Javascript
Natively the only way is by creating an <input type="file">
element and then simulating a click, unfortunately.
There's a tiny plugin (shameless plug) which will take the pain away of 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
})
})
Solution 9 - Javascript
There is no cross browser way of doing it, for security reasons. What people usually do is overlay the input file over something else and set it's visibility to hidden so it gets triggered on it's own. More info here.
Solution 10 - Javascript
Make sure you are using binding to get component props in REACT
class FileUploader extends Component {
constructor (props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
onChange=(e,props)=>{
const files = e.target.files;
const selectedFile = files[0];
ProcessFileUpload(selectedFile,props.ProgressCallBack,props.ErrorCallBack,props.CompleatedCallBack,props.BaseURL,props.Location,props.FilesAllowed);
}
handleClick = () => {
this.refs.fileUploader.click();
}
render()
{
return(
<div>
<button type="button" onClick={this.handleClick}>Select File</button>
<input type='file' onChange={(e)=>this.onChange(e,this.props)} ref="fileUploader" style={{display:"none"}} />
</div>)
}
}
Solution 11 - Javascript
browse file programatically
function browseFile(accept) {
const promise = resolvingPromise();
const input = document.createElement('input');
input.type = "file";
input.accept = accept;
input.onchange = function (e) {
const files = e.target.files;
promise.resolve(files);
}
setTimeout(function () {
click(input);
}, 0);
return promise;
}
function click(node) {
try {
node.dispatchEvent(new MouseEvent('click'))
} catch (e) {
const evt = document.createEvent('MouseEvents')
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null)
node.dispatchEvent(evt);
}
}
Solution 12 - Javascript
Using jQuery you can call click()
to simulate a click.
Solution 13 - Javascript
This worked for me:
$('#fileInput').val('');
Solution 14 - Javascript
For those who want the same but are using React
openFileInput = () => {
this.fileInput.click()
}
<a href="#" onClick={this.openFileInput}>
<p>Carregue sua foto de perfil</p>
<img src={img} />
</a>
<input style={{display:'none'}} ref={(input) => { this.fileInput = input; }} type="file"/>
Solution 15 - Javascript
<div id="uploadButton">UPLOAD</div>
<form action="[FILE_HANDLER_URL]" style="display:none">
<input id="myInput" type="file" />
</form>
<script>
const uploadButton = document.getElementById('uploadButton');
const myInput = document.getElementById('myInput');
uploadButton.addEventListener('click', () => {
myInput.click();
});
</script>