26

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

Community
  • 1
  • 1
talkhabi
  • 2,669
  • 3
  • 20
  • 29
  • Check the value of `data` in firebug or the Chrome console, if you can. – bozdoz Jan 29 '14 at 22:00
  • 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. https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects – Harvey A. Ramer Jan 29 '14 at 22:20
  • Does this answer your question? [Jquery delete value from FormData object](https://stackoverflow.com/questions/41785906/jquery-delete-value-from-formdata-object) – Heriberto Lugo Oct 24 '20 at 17:27

3 Answers3

30

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]);
}
Michael Dunlap
  • 4,300
  • 25
  • 36
  • The specification is actually there (at the same link), but not implemented by anyone. May be worth checking in the future to see. – Radu Andrei Apr 18 '15 at 08:20
  • @Marcel That would only be required if the server you're posting to requires it, in your case, PHP. – Michael Dunlap Apr 18 '15 at 19:45
  • 1
    Seven years later, this isn't true anymore, [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) has a [`delete`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/delete) method now. See [this answer](https://stackoverflow.com/a/40561052/157247) elsewhere on the page. – T.J. Crowder Mar 10 '21 at 16:23
24

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.

Vae
  • 636
  • 1
  • 8
  • 16
0

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])
            }
        });
    }
Ameer Hamza
  • 15
  • 6