In JavaScript can I make a "click" event fire programmatically for a file input element?

Question

I'd like to make a click event fire on an `` tag programmatically.Just calling click() doesn't seem to do anything or at least it doesn't pop up a file selection dialog.I've been experimenting with capturing events using listeners and redirecting the event, but I haven't been able to get that to actually perform the event like someone clicked on it.

Answer 1

You can add a click event to a file input event. However, you will get a mouse event, which fires before you select a file to upload. If you wanna get a file upload, you are better off using the "onchange" event so it fires when the file is chosen. You also need to wrap any code you are using to manipulate the DOM in a window onload event or document onload event or the code will not work properly. This is due to the fact that you have to wait for the document to finish creating all the html elements or you won't have any elements to add events too!

You can view a working example of the code here: https://jsfiddle.net/d82x6pwo/11/

/* html code

<input type="file" id="files" name="file">

*/

//you also need this event to wait for the window and document to fully load before you can access any of the html elements from javascript

window.onload = function() {

const files = document.getElementById('files')

files.addEventListener('click', function(e){

//this will only give you when the button was clicked on, but no files would be attached to the event

console.log(e)

});

files.addEventListener('change', function(e){

//this line of code below will grab the files you uploaded and store them in a list. you will need to use a fileReader api in order to interpret the text or images

console.log(e.target.files)

newFiles = e.target.files;

//allows you to read the files content

//in this example its for text content

for (let i = 0; i < newFiles.length; i++){

//it would be better to use a generator in this case, but for test purposes using a for loop will work just the same

const fileReader = new FileReader();

fileReader.readAsText(newFiles[i])

fileReader.addEventListener('loadend', function(e) {

const result = e.target.result;

console.log(result)

});

}

});

}