Chrome file upload bug: on change event won't be executed twice with the same file

Question

I am working on this html5 file uploader plugin but it has a bug on Google Chrome which I can\'t understand and fix it. It works fine on Firefox.

j

Answer 1

Yes. My Chrome has different behavior to Firefox, but I think Chrome is correct.

According to W3C's document:

onchange event occurs when a control loses the input focus and its value has been modified since gaining focus

if you try to upload the same file, the value of file input does not change. Try to print it out:

$('.button-2').click(function(){
    console.log($(".list .upload-file").val())
    return false;
});

Answer 2

it might be that the input is being re-rendered. For whatever reason this may be, for me its irrelevant. The $.on('change', callback) functionality is lost.

Try using .delegate function which I absolutely love! http://api.jquery.com/delegate/

Ok so delegate is exactly the same, it just tells jquery if there is an element rendered on screen with a particular handle, attach a functionality to it.

So even if the element is re-rendered, it will still keep to function.

$(document).delegate('.file_upload_btn', 'change', function(){});

You may think this is a throw away function & say whats the difference but this has saved me a lot of time on projects.

Answer 3

If you want to upload twice, clear file input value

$('input[type="file"]').val(null);

jsfiddle test