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
Ctrl+Space will select/deselect.
We can clear the file input with JavaScript by setting the value property of the file input to an empty string or null .
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.
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:
FileReader
API to read files locallyEvent 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With