CODEWITHSUNDEEP
javascripthtmlfilefile-uploaddom-events
Yasir Laghari
Yasir Laghari

Reputation: 10744

Alternate to onchange event in <input type='file' />

Seems really a simple thing but can't figure it out. I've been using the onchange event on <input type=file /> element and it works well. Once the user browses and selects a file, I get the path and upload it using a my custom js function.

The problem is this doesn't work if a user selects the same file twice in a row, the onchange doesn't fire (which makes sense since nothing changed) but in my case it's important for me to capture that event too, get the path and upload.

(Similar to Clearing <input type='file' /> using jQuery, not sure if I should resolve this as duplicate)

Upvotes: 16

Views: 38471

Answers (9)

Vishal
Vishal

Reputation: 1

Keep 2 elements in form - out of which one is hidden and that one will trigger upload event.

<input hidden id="file_hidden" (onchange)="uploadFile()" type="file">

when uploadFile is executed put content of file into file_1 and reset value of file_hidden to ''. that way you will always have new value on your input.

Upvotes: 0

elshnkhll
elshnkhll

Reputation: 2223

If you don't want to use jQuery

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

It works fine in Firefox, but for Chrome you need to add this.value=null; after alert.

Upvotes: 0

WebWanderer
WebWanderer

Reputation: 10867

Set the value of the input to "" in your onchange callback. That way, if the same file is selected the next time around, the onchange event will still be triggered because the value is different than "".

document.getElementById('files').value = "";

Upvotes: 1

raveren
raveren

Reputation: 18541

You can just remove the input and create an identical one with javascript - the new one will be empty.

(edited answer to be straight to the point, comments are irrelevant now)

Upvotes: 9

oreoshake
oreoshake

Reputation: 4918

function resetFileInput ($element) {
  var clone = $element.clone(false, false);
  $element.replaceWith(clone);
}

And then use live:

$('#element_id').live('change', function(){
...
});

Worked well for me!

Upvotes: 0

Andrey
Andrey

Reputation: 559

You could not fire change event second time on the file input, but you can fire change event on the span. Below works in chrome and ff. I didn't check in IE. $('#change_span').bind('change',function(){ alert($('#file_1').val()) })

<span id='change_span'><input id="file_1" type="file"></span>

Upvotes: 1

tfwright
tfwright

Reputation: 2963

You could have the choose file button clear the contents of the input onclick, that way even even if they choose the same file your event will still trigger. Of course, then your onchange handler will have to check for blank values, but it should probably be doing something similar or more anyway if it's going to use that value to upload a file...

Upvotes: 2

Marius
Marius

Reputation: 58931

There really isn't any way to fix that. If you add any other listener or timer, then you will potentially upload the file even when the user doesn't want it to (eg, with an onclick). Are you sure uploading the same file can't be done in another way? What about clearing the input once the upload has started (or replace it with a new input if you can't clear it).

Upvotes: 1

Daniel Sloof
Daniel Sloof

Reputation: 12706

Is this behavior only present in IE? If so, it may be related to this issue:
jQuery change event on <select> not firing in IE
In essence: You may need to check for onClick instead.

Upvotes: 0

Related Questions