Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove one specific selected file from input file control

How to remove one specific selected file from input file control?

I have an input file control with the option to select multiple files; however, I want to validate a file and if it has an wrong extension then I should remove that file from the file control itself, is it possible?

I tried as below

<input type="file" name="fileToUpload" id="fileToUpload" multiple/>   <script> $("#fileToUpload")[0].files[0] </script> 

Below is the screenshot of the object but I am not able to modify it

enter image description here

like image 240
Navin Leon Avatar asked Sep 27 '13 21:09

Navin Leon


People also ask

How do I unselect a selected file?

Ctrl+Space will select/deselect.

How do I delete a file input?

We can clear the file input with JavaScript by setting the value property of the file input to an empty string or null .

How do you change no file selected text input?

Hide the input with css, add a label and assign it to input button. label will be clickable and when clicked, it will fire up the file dialog. Then style the label as a button if you want. This even works in IE9, where you can't hide the file input and click it from JavaScript.


1 Answers

As other people pointed out, FileList is read only. You can get around this by pushing those files into a separate Array though. You can then do whatever you want with that curated list of files. If uploading them to a server is the goal, you can use the FileReader API.

Below is a round about way of completely avoiding needing to modify the FileList. Steps:

  1. Add normal file input change event listener
  2. Loop through each file from change event, filter for desired validation
  3. Push valid files into separate array
  4. Use FileReader API to read files locally
  5. Submit valid, processed files to server

Event handler and basic file loop code:

var validatedFiles = []; $("#fileToUpload").on("change", function (event) {   var files = event.originalEvent.target.files;   files.forEach(function (file) {     if (file.name.matches(/something.txt/)) {       validatedFiles.push(file); // Simplest case     } else {        /* do something else */     }   }); }); 

Below is a more complicated version of the file loop that shows how you can use the FileReader API to load the file into the browser and optionally submit it to a server as a Base64 encoded blob.

  files.forEach(function (file) {     if (file.name.matches(/something.txt/)) { // You could also do more complicated validation after processing the file client side       var reader = new FileReader();       // Setup listener       reader.onload = (function (processedFile) {         return function (e) {           var fileData = { name : processedFile.name, fileData : e.target.result };            // Submit individual file to server           $.post("/your/url/here", fileData);            // or add to list to submit as group later           validatedFiles.push(fileData);         };       })(file);        // Process file       reader.readAsDataURL(file);     } else {        /* still do something else */     }   }); 

A note of caution about using FileReader API. Base64 encoding a file will increase its size by around 30%. If that isn't acceptable you will need to try something else.

like image 83
Andrew Hubbs Avatar answered Sep 18 '22 04:09

Andrew Hubbs