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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>