Question

161

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

rated 0 times [ 166] [ 5] / answers: 1 / hits: 30993 / 11 Years ago, wed, november 27, 2013, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brianaclaras

Add To Favorites

Follow

Total Points: 23

Total Questions: 106

Total Answers: 111

Location: Japan

Member since Sat, Jun 6, 2020

4 Years ago

brianaclaras questions

1 Type ref is not assignable to type IntrinsicAttributes

Fri, Oct 15, 21, 00:00, 3 Years ago

1 Why is `Promise.then` called twice in a React component but not the console.log?

Wed, Jul 7, 21, 00:00, 3 Years ago

1 when to use Nextjs over the React itself?

Thu, Dec 3, 20, 00:00, 4 Years ago

1 Typeorm find with and & or where block

Mon, May 25, 20, 00:00, 4 Years ago

1 Adding File to Azure Storage Blob from Angular

Wed, Mar 4, 20, 00:00, 4 Years ago

View All

answered 11 Years ago kaley · Accepted Answer

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

});