How can i delete a single file from html file input type?

Question

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?

Does this answer your question? Remove a FileList item from a multiple "input:file" — Simone Rossaini
– Simone Rossaini, Commented Nov 10, 2021 at 12:38

Boommeister · Accepted Answer · 2021-11-10 12:44:57Z

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>

Tadas · Accepted Answer · 2021-11-10 12:52:08Z

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>

Collectives™ on Stack Overflow

How can i delete a single file from html file input type?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related