How to delete 1 file from input multiple

Question

i have input

<input id="0_input_id" 
onchange="input_change(0)" 
name="files[]" 
type="file" 
required multiple 
class="drop_zone_input">

and have function for delete

function delete_file(file_count, i, input_count)
{
    const input = document.getElementById("0_input_id");
    input.files[i] = undefined;
}

but this file doesn't delete, I cant use input.value = null because it clear all input, help to delete 1 file.

Try .getAttribute("") and .setAttribute(""). Keep in mind you're accessing a string, not an array — pyknight202, Jul 12 '21 at 01:42
@pyknight202 HTML input with `type="file"` **does** have a `files` attribute which is an array. — LuisAFK, Jul 12 '21 at 14:26
@pyknight202 Also mine, it's not an array, it's a `FileList` — LuisAFK, Jul 15 '21 at 09:55

score 0 · Answer 1 · answered Jul 12 '21 at 14:47

An HTML <input type="file">'s files property has to be an object of type FileList. You cannot modify a FileList, so to remove an item you need to turn it into an array, remove the item, and then turn it into a new FileList.

How do I remove a file from the FileList
https://stackoverflow.com/a/47522812/15584743
https://stackoverflow.com/a/52079109/15584743

const input = document.querySelector('input');

input.addEventListener('change', function(e)
{
  console.log('Files:', this.files);
  
  this.files = delete_file(this.files, 0);
  
  console.log('Files:', this.files);
});

function delete_file(filelist, i)
{
  let arr = new Array(...filelist);
  
  arr.splice(i, 1);
  
  return array_to_filelist(arr);
}

function array_to_filelist (arr)
{
  let b = new ClipboardEvent('').clipboardData || new DataTransfer();
  
  for (let i = 0, len = arr.length; i < len; i++)
  {
    b.items.add(arr[i]);
  }
  
  return b.files;
}

<input type="file" multiple>

How to delete 1 file from input multiple

1 Answers1