How to detect when a file is uploaded to an input element of type file?

Question

Is there any way to be able to detect with jQuery, when a file is uploaded to an input element like below:

<input type='file' name='filex' id='filex' style="height: 2.3em" size="23" />

I'm looking for an event specific to when the file is placed (uploaded) to the element, not when the element is clicked before the open file dialog is opened. I'm aware that I can submit the form and then get the file server side, but I want to display a thumbnail to the user before the form is submitted on confirm.

Thanks.

I think you're misusing the word uploaded. To me that means the file's data has been fully transmitted to the server. I think you're going for when a file path is selected. — armen.shimoon
– armen.shimoon, Commented Dec 2, 2012 at 11:45
Why not use change()? Since the input will start 'empty' (and a file can't be programatically added, without user-interaction) any addition of a file will necessarily invoke the change event. — David Thomas
– David Thomas, Commented Dec 2, 2012 at 11:46

Community · Accepted Answer · 2017-05-23 10:24:44Z

As a file input will start off with no files selected, and no files can be selected without user-interaction, I'd suggest using the change() method (using the change event):

$('input:file').change( function(e){ console.log('file "' + path.split('\\').pop(); + '" selected.'); });

References:

karaxuna · Accepted Answer · 2012-12-02 12:07:24Z

var fileInput = document.getElementById('filex'); fileInput.onchange = function(e){ if(e.target.files.length > 0) // File uploaded }

Collectives™ on Stack Overflow

How to detect when a file is uploaded to an input element of type file?

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related