Issues with FormData Being Null?

Question

I\'m seeming to have an issue with FormData being null. I\'m trying to upload files and JSON in a single POST request. I\'ve tried a variety of things, but nothing has seemed to

Answer 1

Okay I have same problem and I think know the solution after I read this documentation from MDN.

I fix it with this way:

var formData = new FormData();
// After instantiate the object we should use append method
// And append more data as you needed with this way:

formData.append('prices', $("#columnPrices").val());
formData.append('id', $("#columnIds").val());
formData.append('file', $("#uploadCSVWithData");

$(this).html('<i class="fa fa-spinner fa-spin" aria-hidden="true">');
$.ajax({
    type: "POST",
    url: '{removed}',
    data: formData,
    success: function(done) {
        $("#submitCSVForUpload").html("Submit");
        $("#uploadFromCSVModal").modal('hide');
    },
    processData: false,
    contentType: false
});

I hope it can help you :D

Answer 2

FormData can't be inspected with console.log without iterating.

Here is an article on how to inspect FormData

If you want to console.log your FormData object before doing the ajax post request, you can do something like this (I'm using the example from the source docs with your code):

var form = $('#uploadCSVWithData')[0];
var data = new FormData(form);

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