How to open select file dialog via js?
$('#id').click();
It doesn't work on Chrome 26 on Mac OS.
The problem actually is creation "upload" widget that can be integrated in a form. Widget will consists of two parts. The first part is div with initiator button and error/success messages. I think the way is put another form as the second part with file input and submit file into the iframe. After submition we fill hidden field in first part in main form or show errors in the same.
Easy way is adding file-form into main-form, but it's prohibited.
Solution 1:
Using jQuery
I would create a button and an invisible input like so:
<button id="button">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />
and add some jQuery to trigger it:
$('#button').on('click', function() {
$('#file-input').trigger('click');
});
Using Vanilla JS
Same idea, without jQuery (credits to @Pascale):
<button onclick="document.getElementById('file-input').click();">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />
Solution 2:
JS only - no need for jquery
Simply create an input element and trigger the click.
var input = document.createElement('input');
input.type = 'file';
input.click();
This is the most basic, pop a select-a-file dialog, but its no use for anything without handling the selected file...
Handling the files
Adding an onchange event to the newly created input would allow us to do stuff once the user has selected the file.
var input = document.createElement('input');
input.type = 'file';
input.onchange = e => {
var file = e.target.files[0];
}
input.click();
At the moment we have the file variable storing various information :
file.name // the file's name including extension
file.size // the size in bytes
file.type // file type ex. 'application/pdf'
Great!
But, what if we need the content of the file?
In order to get to the actual content of the file, for various reasons. place an image, load into canvas, create a window with Base64 data url, etc. we would need to use the FileReader API
We would create an instance of the FileReader, and load our user selected file reference to it.
var input = document.createElement('input');
input.type = 'file';
input.onchange = e => {
// getting a hold of the file reference
var file = e.target.files[0];
// setting up the reader
var reader = new FileReader();
reader.readAsText(file,'UTF-8');
// here we tell the reader what to do when it's done reading...
reader.onload = readerEvent => {
var content = readerEvent.target.result; // this is the content!
console.log( content );
}
}
input.click();
Trying pasting the above code into your devtool's console window, it should produce a select-a-file dialog, after selecting the file, the console should now print the contents of the file.
Example - "Stackoverflow's new background image!"
Let's try to create a file select dialog to change stackoverflows background image to something more spicy...
var input = document.createElement('input');
input.type = 'file';
input.onchange = e => {
// getting a hold of the file reference
var file = e.target.files[0];
// setting up the reader
var reader = new FileReader();
reader.readAsDataURL(file); // this is reading as data url
// here we tell the reader what to do when it's done reading...
reader.onload = readerEvent => {
var content = readerEvent.target.result; // this is the content!
document.querySelector('#content').style.backgroundImage = 'url('+ content +')';
}
}
input.click();
open devtools, and paste the above code into console window, this should pop a select-a-file dialog, upon selecting an image, stackoverflows content box background should change to the image selected.
Cheers!
Solution 3:
Ready-to-use function (using Promise)
/**
* Select file(s).
* @param {String} contentType The content type of files you wish to select. For instance, use "image/*" to select all types of images.
* @param {Boolean} multiple Indicates if the user can select multiple files.
* @returns {Promise<File|File[]>} A promise of a file or array of files in case the multiple parameter is true.
*/
function selectFile(contentType, multiple){
return new Promise(resolve => {
let input = document.createElement('input');
input.type = 'file';
input.multiple = multiple;
input.accept = contentType;
input.onchange = () => {
let files = Array.from(input.files);
if (multiple)
resolve(files);
else
resolve(files[0]);
};
input.click();
});
}
Try it here
// Content wrapper element
let contentElement = document.getElementById("content");
// Button callback
async function onButtonClicked(){
let files = await selectFile("image/*", true);
contentElement.innerHTML = files.map(file => `<img src="${URL.createObjectURL(file)}" style="width: 100px; height: 100px;">`).join('');
}
// ---- function definition ----
function selectFile (contentType, multiple){
return new Promise(resolve => {
let input = document.createElement('input');
input.type = 'file';
input.multiple = multiple;
input.accept = contentType;
input.onchange = _ => {
let files = Array.from(input.files);
if (multiple)
resolve(files);
else
resolve(files[0]);
};
input.click();
});
}<button onclick="onButtonClicked()">Select images</button>
<div id="content"></div>Solution 4:
For the sake of completeness, Ron van der Heijden's solution in pure JavaScript:
<button onclick="document.querySelector('.inputFile').click();">Select File ...</button>
<input class="inputFile" type="file" style="display: none;">
Solution 5:
In HTML only:
<label>
<input type="file" name="input-name" style="display: none;" />
<span>Select file</span>
</label>
Edit: I hadn't tested this in Blink, it actually doesn't work with a <button>, but it should work with most other elements–at least in recent browsers.
Check this fiddle with the code above.