Formdata.Append("Key", "Value") Is Not Working

FormData.append(key, value) is not working

New in Chrome 50+ and Firefox 39+ (resp. 44+):

• formdata.entries() (combine with Array.from() for debugability)
• formdata.get(key)
• and more very useful methods

Original answer:

What I usually do to 'debug' a FormData object, is just send it (anywhere!) and check the browser logs (eg. Chrome devtools' Network tab).

You don't need a/the same Ajax framework. You don't need any details. Just send it:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(data);

Easy.

FormData append not working

When logging a formData object with just console.log(formData) it always returns empty, as you can't log formData.

If you just have to log it before sending it, you can use entries() to get the entries in the formData object

$('#upload-image').change(function(e) {
    var file = e.target.files[0];
    var imageType = /image.*/;

    if (!file.type.match(imageType)) return;

    var form_data = new FormData();
    form_data.append('file', file);

    for (var key of form_data.entries()) {
        console.log(key[0] + ', ' + key[1]);
    }

    $.ajax({
        url: 'http://localhost/upload.php',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'POST',
        success: function(response) {
            console.log(response);
        },
        error: function(error) {
            console.log(error);
        }
    });

});

FormData append doesn't work

FormData can't be inspected from the web developer console. You can only use them to create key value pairs to be sent.

If you want to debug it, you may do this,

for (var p of formData) {
  console.log(p);
}

How to inspect FormData?

Updated Method:

As of March 2016, recent versions of Chrome and Firefox now support using FormData.entries() to inspect FormData. Source.

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for (var pair of formData.entries()) {
    console.log(pair[0]+ ', ' + pair[1]); 
}

Thanks to Ghost Echo and rloth for pointing this out!

Old Answer:

After looking at these Mozilla articles, it looks like there is no way to get data out of a FormData object. You can only use them for building FormData to send via an AJAX request.

I also just found this question that states the same thing: FormData.append("key", "value") is not working.

One way around this would be to build up a regular dictionary and then convert it to FormData:

var myFormData = {
    key1: 300,
    key2: 'hello world'
};

var fd = new FormData();
for (var key in myFormData) {
    console.log(key, myFormData[key]);
    fd.append(key, myFormData[key]);
}

If you want to debug a plain FormData object, you could also send it in order to examine it in the network request console:

var xhr = new XMLHttpRequest;
xhr.open('POST', '/', true);
xhr.send(fd);

formData.append is null value in reactjs in uploading file

replace this part, with the following:

const file = e.target.files[0];
const formData = new FormData();
// formData.append("username", "Chris");
formData.append("image", file);

 const formData = new FormData();
 const reader = new FileReader();

 if (e.target.files[0]) {
      reader.readAsDataURL(e.target.files[0]);
    }
 reader.onload = (readerEvent) => {
 formData.append("image", readerEvent.target.result);
};

you call a FileReader to read your file. It reads it as data url, then whenever it is ready it's going to append whatever it has read to your formData

$.each unable to append data to formData() , in spite of key value being populated

Use console.log(data.getAll('0')) to check the data object for the file.

Just using console.log(data) is insufficient.

---

Related Topics