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

Question

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?

stackoverflow.com/questions/1043957/…

Comfortably Numb
– Comfortably Numb

2013-11-27 20:09:32 +00:00
Commented Nov 27, 2013 at 20:09 — Comfortably Numb
– Comfortably Numb, Commented Nov 27, 2013 at 20:09

Aerious · Accepted Answer · 2014-09-24 07:58:13Z

21

If you wish to keep data in other form fields, you can use

HTML

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

jQuery

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

this will clear your uploaded file from input tag

answered Sep 24, 2014 at 7:58

Aerious

5003 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

P.M. Over a year ago

Or in pure javascript: let file_picker = document.getElementById('yourid'); file_picker.value = '';

sudee · Accepted Answer · 2017-02-27 13:08:14Z

10

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();
});

edited Feb 27, 2017 at 13:08

answered Nov 27, 2013 at 20:07

sudee

7839 silver badges14 bronze badges

2 Comments

Thomas David Kehoe Over a year ago

How do you do this without jQuery?

sudee Over a year ago

@Thomas David Kehoe: Updated my answer with an example without jQuery.

chidimo · Accepted Answer · 2019-10-20 08:02:21Z

4

In React I experienced this issue for file inputs on chrome-based browsers. I fixed it with a combination of value="" and autoComplete={"new-password"}

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

answered Oct 20, 2019 at 8:02

chidimo

2,9785 gold badges37 silver badges49 bronze badges

1 Comment

DrCord Over a year ago

In Vue I was able to fix it similarly by setting the value of the input to an empty string.

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related