3

I got the job to add a delete function to a html input with type "file", which can delete a single file from a list of multiple files. As you can see in the snippet below, deleting all files at once is easily done, but my function to delete one file at a certain index is not working.

function remove(i){
  document.getElementById('files').files.splice(i, 1);
}

function removeAll(){
  document.getElementById("files").value=null;
}
<input id="files" type="file" multiple="multiple">


<button onclick="remove(1)">delete 1st</button>
<button onclick="remove(2)">delete 2nd</button>
<button onclick="remove(3)">delete 3rd</button>

<button onclick="removeAll()">delete all</button>

Is there any way to make this remove()-function work?

coding_noob
  • 59
  • 3
  • Does this answer your question? [Remove a FileList item from a multiple "input:file"](https://stackoverflow.com/questions/16943605/remove-a-filelist-item-from-a-multiple-inputfile) – Simone Rossaini Nov 10 '21 at 12:38

2 Answers2

1

You need to convert the object from document.getElementById('files') to an array first. Also .splice() returns the removed elements. So you need to store the array in a variable. After using .splice() on this array the array will contain the remaining elements:

function remove(i){

  var myFiles = Object.entries(document.getElementById('files').files)
  Object.entries(myFiles.splice(i-1, 1)); // make sure to use i-1, not i
  console.log(myFiles);
  // const obj = Object.assign({}, myFiles ); use this to return it back to an obj
}

function removeAll(){
  document.getElementById("files").value=null;
}
<input id="files" type="file" multiple="multiple">


<button onclick="remove(1)">delete 1st</button>
<button onclick="remove(2)">delete 2nd</button>
<button onclick="remove(3)">delete 3rd</button>

<button onclick="removeAll()">delete all</button>
Boommeister
  • 1,591
  • 2
  • 15
  • 54
0

First, you need to spread input.files into an array.

Second, you need to call splice() on the array with index "i" ( remove(i) ) as the first argument and at the end - you specify that you want to remove only 1 item with the 2nd arguemnt - arr.splice(i, 1).

Finally, arr has deleted item according to your button click.

Also, you need to start your buttons from `remove(0)' because arrays start at 0.

function remove(i){
  //document.getElementById('files').files.splice(i, 1);
  const input = document.getElementById('files')

  const arr = [...input.files];
  arr.splice(i, 1);
  console.log(arr);
}

function removeAll(){
  document.getElementById("files").value=null;
}
<input id="files" type="file" multiple="multiple">


<button onclick="remove(0)">delete 1st</button>
<button onclick="remove(1)">delete 2nd</button>
<button onclick="remove(2)">delete 3rd</button>

<button onclick="removeAll()">delete all</button>
Tadas
  • 355
  • 2
  • 16