How to clear the previous file from the "input type" in HTML5 FileReader

Question

I have an input file:

<img id="uploadPreview"> <div id="changeImage">Change</div> <div id="customImage"> <input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" /> <div class='upload blank' id="add-image"></div> </div> 

The function is as follows:

 var oFReader = new FileReader(); oFReader.readAsDataURL(document.getElementById("myfile").files[0]); oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; }; function PreviewImage() { var oFReader = new FileReader(); oFReader.readAsDataURL(document.getElementById("myfile").files[0]); $("#uploadPreview").removeClass('hide'); //for manipulating something in the dom $('#changeImage').removeClass('hide'); //for manipulating something in the dom $("#customImage").addClass('hide'); //these are for manipulating something in the dom oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; }; }; 

Everything works perfectly. Now I have a Change button. I want someone to click on it and then download previously downloaded file data. The function looks something like this:

 $('#changeImage').click(function(){ $('#uploadPreview').addClass('hide'); $('#customImage').removeClass('hide'); //here I want to remove/clear the details about the already previous uploaded file in the 'file-input'. So the same image can be shown if someone clicks it for once again. }); 

Can you help with this?

Answer 1

If you put your file in the <form> , you can use the built-in .reset() method.

HTML:

 <img id="uploadPreview"> <div id="changeImage">Change</div> <div id="customImage"> <form id="fileform"> <input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" /> </form> <div class='upload blank' id="add-image"></div> </div> 

JS:

 $('#changeImage').click(function(){ $('#uploadPreview').addClass('hide'); $('#customImage').removeClass('hide'); // Reset the form $("#fileform")[0].reset(); }); 

---

JS without jQuery:

 var resetButton = document.getElementById('resetButton'); var fileInput = document.getElementById('fileInput'); var form = document.getElementById('form'); resetButton.addEventListener('click', function () { // resetting the file input only fileInput.value = null; // alternatively: resetting the entire form (works in older browsers too) form.reset(); }); 

Answer 2

If you want to save data in other fields of the form, you can use

HTML

  <input type='file' id='yourid' /> 

JQuery

  $('#yourid').val(''); 

this will clear your uploaded file from the input tag

Answer 3

In React I ran into this problem when entering files in Chrome-based browsers. I fixed this with a combination of value="" and autoComplete={"new-password"}

 <input value="" type="file" autoComplete={"new-password"} onChange={e => pickHandler(e)} />