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 work. I'm wondering if I've messed something basic up here, but I can't seem to find anything. Your help is greatly appreciated!

<form id="uploadCSVWithData" method="post" enctype="multipart/form-data">
    <div class="fileUpload btn btn-info">
        <i class="fa fa-cloud-upload" aria-hidden="true"></i>Upload CSV File <input type="file" name="csvUploadFile" class="upload" />
    </div>
    <input type="text" class="form-control" name="distName" id="distName"></br>
    <input type="text" class="form-control" name="columnNames" id="columnNames"></br>
    <input type="text" class="form-control" name="columnPrices" id="columnPrices"></br>
    <input type="text" class="form-control" name="columnCases" id="columnCases"></br>
    <input type="text" class="form-control" name="columnIds" id="columnIds">
</form>

And Javascript:

event.preventDefault();
var prices = $("#columnPrices").val();
var id = $("#columnIds").val();
var names = $("#columnNames").val();
var distName = $("#distName").val();
var cases = $("#columnCases").val();
var json = {
    columnPrices: prices,
    columnIds: id,
    columnNames: names,
    columnDistName: distName,
    columnCases: cases
}
var data = new FormData($("#uploadCSVWithData"));

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

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 work. I'm wondering if I've messed something basic up here, but I can't seem to find anything. Your help is greatly appreciated!

<form id="uploadCSVWithData" method="post" enctype="multipart/form-data">
    <div class="fileUpload btn btn-info">
        <i class="fa fa-cloud-upload" aria-hidden="true"></i>Upload CSV File <input type="file" name="csvUploadFile" class="upload" />
    </div>
    <input type="text" class="form-control" name="distName" id="distName"></br>
    <input type="text" class="form-control" name="columnNames" id="columnNames"></br>
    <input type="text" class="form-control" name="columnPrices" id="columnPrices"></br>
    <input type="text" class="form-control" name="columnCases" id="columnCases"></br>
    <input type="text" class="form-control" name="columnIds" id="columnIds">
</form>

And Javascript:

event.preventDefault();
var prices = $("#columnPrices").val();
var id = $("#columnIds").val();
var names = $("#columnNames").val();
var distName = $("#distName").val();
var cases = $("#columnCases").val();
var json = {
    columnPrices: prices,
    columnIds: id,
    columnNames: names,
    columnDistName: distName,
    columnCases: cases
}
var data = new FormData($("#uploadCSVWithData"));

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

• javascript
• jquery
• html
• post

2 Answers 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]); 
}

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