How to remove value from FormData

Question

Here is a way to append file to FormData :

  var data = new FormData();
  jQuery.each($('#file')[0].files, function(i, file) {
          data.append('file-'+i, file);
  });

is it possible to do as below ?

     data[i].remove();???
 or  data[i] = file;??

how iIcan remove or modify a value from data

Copaiba

Check the value of data in firebug or the Chrome console, if you can. – Counterclaim

It appears to me that no remove method is available. The idea with FormData is that it is meant to make a simple AJAX wrapper for a form element and allow you to append extra data before sending the request. If you want to remove items, I suggest working with a library like jQuery or making your own AJAX wrapper that expects a standard object so that you can add and remove items at will. developer.mozilla.org/en-US/docs/Web/Guide/… – Hermon

Does this answer your question? Jquery delete value from FormData object – Whiz

Answer 1

You cannot do anything other than append items to a FormData object. See the Spec. It would be better if you use a dictionary/object to store all the values you want to add/modify before you actually construct the object.

var data = {};
jQuery.each($('#file')[0].files, function(i, file) {
  data['file-'+i] = file;
});

//modify the object however you want to here

var formData = new FormData();
for (var key in data) {
  formData.append(key, data[key]);
}

Mcmullen

The specification is actually there (at the same link), but not implemented by anyone. May be worth checking in the future to see. – Flexile

@Marcel That would only be required if the server you're posting to requires it, in your case, PHP. – Mcmullen

Seven years later, this isn't true anymore, FormData has a delete method now. See this answer elsewhere on the page. – Chelyuskin

Answer 2

I know this thread is old but I just found this : https://developer.mozilla.org/en-US/docs/Web/API/FormData/delete

I'm sur it could help. You can use formData.delete(name) to delete the entry of formData with "name" key.

Acetylate

This doesn't work on 2 mobile browsers I tested on iOS 10 and Android 5.1 – Silva

Check for browser compatibility here: developer.mozilla.org/de/docs/Web/API/FormData/… – Enright

Pretty acceptable compatibility now. This should be the accepted answer. – Sunflower

This is the answer. Only not compatible with internet explorer developer.mozilla.org/en-US/docs/Web/API/FormData/delete – Flashgun

Answer 3

I came across the similar problem, where I was submitting files to server and needed to remove files if user deletes from UI button next to each file.

So to do it, I reset the formData and created new formData like follows:

function removeFile(file_name, file_name_slug) {
        const files = [...formData.entries()];
        // reset formData
        formData.delete('files[]')
        files.forEach(function (item, index) {
            // if found
            if (item[1].name === file_name) {
                // remove from UI
                $(`#${file_name_slug}`).remove();
            }else{
                // make new formData without this item
                formData.append('files[]', item[1])
            }
        });
    }

Shoop