the.big.lebowski the.big.lebowski -4 years ago 160
jQuery Question

How to clear a previous file from a 'input type' in HTML5 FileReader

I have a file-input:

<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 like below:

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 perfect. Now I have a Change button. I want if someone clicks on it then previous uploaded file-details to be gone. The function is something like below:

$('#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 on this?

Answer Source

If you put your file input inside a <form> tag 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();
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download