how I can delete value from FormData object with same name? I have HTML form with two input files.

<input id="human" type="file" name="file[]" class="docfiles" />
<input id="animal" type="file" name="file[]" class="docfiles" />

For example I want to delete file 1 - with id "human". Any idea how to do this?

Here my demo jsfiddle.

how I can delete value from FormData object with same name? I have HTML form with two input files.

<input id="human" type="file" name="file[]" class="docfiles" />
<input id="animal" type="file" name="file[]" class="docfiles" />

For example I want to delete file 1 - with id "human". Any idea how to do this?

Here my demo jsfiddle.

• javascript
• jquery
• object
• form-data

3 Answers 3

Manipulate the array of files and re-add the elements minus the one needed to be removed.

var files = formData.getAll("file[]");
files.splice($("[type='file']").index($("#animal")), 1);
formData.delete("file[]");
$.each(files, function(i, v) {
    formData.append("file[]", v);
});

Demo https://jsfiddle.net/nnte528L/

You can delete the entire file list by setting the value property of the input object to an empty string.

document.getElementById('human').value = "";

If you are using FormData, you can also have

ForEach(var key in formData.keys()){
  formData.delete(key);
}

This will iterate through all keys in formData and delete all the key value pairs.

if you're using jQuery you can use

$("#human").remove();

if you're using vanilla JS you can do the following

var human = document.getElementById('human');
human.parentNode.removeChild(human);