Clear input file field when user uploads invalid file in javascript

Question

<script type="text/javascript" language="javascript">
function checkfile(sender) {
    var validExts = new Array(".jpg", ".png", ".gif");
    var fileExt = sender.value;
    fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
    if (validExts.indexOf(fileExt) < 0) {
      alert("Invalid file selected, valid files are of " +
               validExts.toString() + " types.");
      return false;
    
    }
    else return true;
}
</script>

<input type="file" name="attachFile" id="file" onchange="checkfile(this);"  accept="image/*"  onBlur="return chechExtension();"  required >

I used below javascript code for validation of throwing error when user enters invalid file.

Its working as it throws error whenever user uploads files other than jpg,gif,png but it just throws error.& does'nt clear the input file field. so the invalid file is uploaded in Input File.

Whats should I do to clear the field after error id user uploads invalid file.

bransonl · Accepted Answer · 2015-08-27 03:45:22Z

2

Use document.getElementById("file").value = "" to reset the value of the input back to nothing.

answered Aug 27, 2015 at 3:45

bransonl

5663 silver badges9 bronze badges

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

Comments

jilykate · Accepted Answer · 2015-12-21 09:48:27Z

0

if you are using jquery, you can do the following thing:

    var $copy = $('#file');
    $('#file').remove();
    $('.wrapper').append($copy);//$('.wrapper') is the parent DOM element of input

OR you can put this 'input' element in a "form" element. Like this:

   <form id="myform"><input ....></form>

    document.getElementById("myform").reset(); //you can reset your input button in this way

answered Dec 21, 2015 at 9:48

jilykate

6,0382 gold badges20 silver badges27 bronze badges

Collectives™ on Stack Overflow

Clear input file field when user uploads invalid file in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related