Second Use Of Input File Doesn't Trigger Onchange Anymore

I have a picture upload button that automatically uploads the file when selected from the browse window. Nonetheless, it doesn't work the second time around and that is because the

Solution 1:

If you're using React or just javascript in general you can what you can also do is "reset" the value of the event target.

So If you have something like a component that can upload and "remove" an image:

<input type="file" onChange={onChange} />

your onChange can be:

onChange(event) {

    const files = event.target.files;

    // your logic here on what to do with files (maybe fetch the preview or something)

    // this line right below will reset the 
    // input field so if you removed it you can re-add the same file
    event.target.value = ''
}

Solution 2:

My guess is that you test your functionality with the same picture file over and over again.

If you select the same file, the onChange event of input[type=file] will not fire.

Different file with the same name would not fire the event as well. Select a different image file - it will happen.

To avoid this you can reset the form to ensure that choosing a file will be performed on a clean file control

Solution 3:

TL;DR: Just reset the value attribute to empty("") right after using the file selector (using some event call backs or explicit function call)

Synch is partially right about onchange event that it will not fire for same file..More precisely onchange in case of input type file(scenario mentioned by ether) considers file location for event triggering.

##Try this out after selecting any file In jQuery $("#image_message_upload [type='file']")[0].value

You will get something like "C:\fakepath\country-and-mobile-redirect-for-wordpress-dwpsxm-clipar.jpg" as output (that is the location of file selected)

That means either you change the file name or its location, which is not right. So, more logically what we can do while deleting the file is setting input value attribute to empty("")

$("#image_message_upload [type='file']")[0].value=""

So adding this line (inside clearPictureAttachment(), as per this question) will reset the file input type and you can select the same image file with no issues.

Cheers :)

Solution 4:

Thanks to codingrhythm for leading me on the right track.
What I did was to actually just add the on("change") call again on the field.
So I only altered the clearPictureAttachment() function (called when deleting a picture) to this:

function clearPictureAttachment(){
$("#image-message").attr('value', '');    
$("#image_message_file").attr('value', '');
$("#image_message_loading").hide();
$("#image_message_upload").show();
$("#image_message_preview").hide();
//reenable the onchange to upload a picture
$("#image-message").on('change', function () {
    $('#editor-photoarea').show();
    ajaxFileUploadMessagePicture();
});
}

Thanks again!

Solution 5:

@Sync gave me the idea to solve this issue.

Here is the working code, what you need to do is to clone the file input.

var control = $('input[type=file]');
control.replaceWith( control = control.clone( true ) );

and the event will still be fired on second time.