Clear <input type="file">

[pan6831]

how to reset the (input type=“file”) as soon as the user uploads file other than specified format.

Below is my HTML Code:

   <h2>Please upload file with .xls, .xlsx, .csv extensions...</h2>
   <label for="upload">Upload File</label>		
   <input type="file" name="file" id="file" class="Upload" onchange="validate_fileupload(this.value);" /><br/><br/><br/>	 
    <input type="submit" value="submit" name="submit" class="button"/>

Below is my Javascript code:

   <script type="text/javascript">
function validate_fileupload(fileName)
   {
  var allowed_extensions = new Array("csv","xls","xlsx");
  var file_extension = fileName.split('.').pop(); .
  for(var i = 0; i <= allowed_extensions.length; i++)
  {
      if(allowed_extensions[i]==file_extension)
      {
		return true; // valid file extension
      }
  }
  alert("not a csv file");
  return false;
}

In the above code im checking wheather its a csv file or not and giving an alert …But i want to reset the field also so that user will not upload the file…

[Paul_Wilkins]

There are two good ways.

For modern browsers, you can set the file field value to null.
For older browsers, you can trigger form.reset()

[liontas76]

@pan6831

function validate_fileupload(fileName)
{
var allowed_extensions = new Array(“csv”,“xls”,“xlsx”);
var file_extension = fileName.split(‘.’).pop(); .
for(var i = 0; i <= allowed_extensions.length; i++)
{
if(allowed_extensions[i]==file_extension)
{
return true; // valid file extension
}
}
alert(“not a csv file”);
return false;
}

Comments inside the code:

function validate_fileupload(fileName)
   {
  var allowed_extensions = new Array("csv","xls","xlsx");
  var file_extension = fileName.split('.').pop();
  for(var i = 0; i <= allowed_extensions.length; i++)
  {
      if(allowed_extensions[i]==file_extension)
      {
		return true; // valid file extension
      }
  }
  alert("not a csv file");
  //I get the input element via Id and set value='';
  document.getElementById('file').value='';
  return false;
}

[pan6831]

@Paul_Wilkins…ive included
document.getElementById(“myForm”).reset()

after alert in my js code but still its not working…??

HTML CODE:

 <form method="post" id="myForm"  action="import.php" enctype="multipart/form-data">
 <h2>Please upload file with .xls, .xlsx, .csv extensions...</h2>
 <label for="upload">Upload File</label>		
 <input type="file" name="file" id="file" class="Upload" onchange="validate_fileupload(this.value);" />     <br/><br/><br/>	 

Here is updated js code

   function validate_fileupload(fileName)
   {
      var allowed_extensions = new Array("csv","xls","xlsx");
      var file_extension = fileName.split('.').pop(); 
      for(var i = 0; i <= allowed_extensions.length; i++)
      {
          if(allowed_extensions[i]==file_extension)
          {
			return true; // valid file extension
          }
      }
      alert("not a csv file");
	  document.getElementById("myForm").reset();
	  return false;
    }

[pan6831]

@liontas76 …Thanks a lot buddy…I tried but its not working…

[liontas76]

@pan6831

var file_extension = fileName.split(‘.’).pop(); .

Check this

var file_extension = fileName.split('.').pop(); .

You have inadvertently put a dot at the end of the statement. I tested my code in Liveweave and works.

[pan6831]

@liontas76 …Thanks mate …Ur code was working good…Had a bit of glitch in my other line of code…