Remove a FileList item from a multiple "input:file"
I have this DOM:
var id = 0;
$('input:file#upload')[0].files[ id ]
That get's the first file on the 0th index. File properties are listed and all works, but...
How do we remove items from the DOM's [object FileList] with JavaScript?
Solution 1:
Finally found a way!
I knew before that input.files would accept a FileList but the only way to get it was through a drag and drop event.
But now i know how to construct a own FileList!
This works in chrome (and maybe some other)
const dt = new DataTransfer()
dt.items.add(new File([], 'a.txt'))
input.files = dt.files
// This will remove the first item when selecting many files
input.onchange = () => {
const dt = new DataTransfer()
for (let file of input.files)
if (file !== input.files[0])
dt.items.add(file)
input.onchange = null // remove event listener
input.files = dt.files // this will trigger a change event
}<input type="file" multiple id="input">This works in Firefox
const cd = new ClipboardEvent("").clipboardData
cd.items.add(new File(['a'], 'a.txt'))
input.files = cd.files
// This will remove the fist item when selecting many files
input.onchange = () => {
const dt = new DataTransfer()
for (let file of input.files)
if (file !== input.files[0])
dt.items.add(file)
input.onchange = null // remove event listener
input.files = dt.files // this will trigger a change event
}<input type="file" multiple id="input">The thing is you need to loop over each file in the input, add those you still want to keep and assign the file.files with the new list of files.
Solution 2:
I' am afraid that you cannot delete objects from FileList object directly. Just assign $('input:file#upload')[0].files to an Array and then remove items from that array using splice or method of your choice and then use that Array.
Solution 3:
I have found very quick & short workaround for this. Tested in many popular browsers (Chrome, Firefox, Safari);
First, you have to convert FileList to an Array
var newFileList = Array.from(event.target.files);
to delete the particular element use this
newFileList.splice(index,1);
Solution 4:
The most practical way to remove FileList object is to just remove the file input itself from the DOM and re-append it again. This will remove all the items from the file list.
I know a lot of people will say this is not an elegant solution, but it very easy to implement, a better approach for most cases, and you can do what is important with the input file, validation!
By now you see that to control the FileList object is hard. If you really need to manipulate an individual file item, read Multi-File Uploads and Multiple Selects (Part 2), by RAYMOND CAMDEN
. I prefer to just make the user select the files again (if he done goofy) and give him an error message of what went wrong. This will not make the user experience bad.
As a reminder, be aware that input file brings security weakness (Vulnerability: Unrestricted File Upload).
Since this post didn't really answer the question, I know it won't get any points, but really consider the alternatives. For my case when I was implementing deleting a file object item, it didn't make sense continuing the upload after some file didn't pass the validation, even if some files were ok. In the end, the user would still have to open the input file and redo the process. So, for my case, this feature was just adding complexity, and it was not in the specification this much control for an input file.
Bellow an example with validation that deletes all the FileList object when fails:
function validateFormfile(inputTypeFile_id) {
$(inputTypeFile_id).change((event) => {
//check if files were select, if not, nothing is done
if (event.target.files.length > 0) {
let fileName;
let totalsize = 0;
let notvalidate = false;
for (let i = 0; i < event.target.files.length; i++) {
fileName = event.target.files[i].name;
fileSize = event.target.files[i].size;
if (fileName != undefined || fileName != "") {
if (validate_fileExtension(fileName) === false) {
notvalidate = true;
let errorMessage = "File upload must be of 'audio', 'image', 'video', 'text', or 'pdf' format!";
//write you error function to show error to user
//alertpanel(errorMessage);
console.log(errorMessage);
break;
}
totalsize += Number(event.target.files[i].size);
console.log(fileName, fileSize, "bytes");
}
}
//check if file size is bigger than maxsize
let maxsize = 10 * 1024 * 1024; //10Mb
if (totalsize > maxsize && notvalidate === false) {
notvalidate = true;
let errorMessage = `Upload files cannot exceed the maximum of ${maxsize} bytes.`;
//write you error function to show error to user
//alertpanel(errorMessage);
console.log(errorMessage);
}
if (notvalidate) {
//select the node where to append the input file
let inputlabel = $(inputTypeFile_id).siblings().first();
//we delete the input file element to delete its FileList object content and re-append to the DOM
$(inputTypeFile_id).remove();
let input_file = $('<input type="file" id="upload" name="upload" accept="application/pdf, text/plain, audio/*, video/*, image/*" multiple required>');
//append the input file after the selected inputlabel node
inputlabel.after(input_file);
//re init any event listener for the re-appended element
validateFormfile(inputTypeFile_id);
}
}
});
}
function validate_fileExtension(fileName) {
let image_extensions = new Array("bmp", "jpg", "jpeg", "jpe", "jfif", "png", "gif");
let text_extensions = new Array("txt", "pdf");
let video_extensions = new Array("avi", "mpeg", "mpg", "mp4", "mkv");
let audio_extensions = new Array("mp3", "acc", "wav", "ogg");
let allowed_extensions = image_extensions.concat(text_extensions, video_extensions, audio_extensions);
// split function will split the fileName by dot(.), and pop function will pop the last element from the array which will give you the extension as well. If there will be no extension then it will return the fileName.
let file_extension = fileName.split('.').pop().toLowerCase();
for (let i = 0; i <= allowed_extensions.length; i++) {
if (allowed_extensions[i] == file_extension) {
return true; // valid file extension
}
}
return false;
}
//init event listener to input file
$(document).ready(
validateFormfile("#upload")
);label,
input {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="upload">Choose File(s) (Max: 10Mb)</label>
<input type="file" id="upload" name="upload" accept="application/pdf, text/plain, audio/*, video/*, image/*" multiple required>
<br><small>text|pdf|audio|image|video</small>I hope this helps in some way.