Ajax send a post with multiple files - ajax

Question

From Postman, I am able to send a POST request to the server successfully as following:
Key Value
postinfo (file) info.json
data (file) data.csv
label (file) label.csv
Now I'm implementing this in HTML and JavaScript.
<div id="fileupload">
<form id="uploaddata" enctype="multipart/form-data">
<label for="file">Choose data file</label>
<input type="file" accept="file/csv">
<br>
<label for="file">Choose initial label file</label>
<input type="file">
<br>
<label for="file">Choose setting</label>
<input type="file">
<br>
<button type="submit">Next</button>
</form>
</div>
And JS:
$('#uploaddata').submit(function(e){
e.preventDefault();
var form = new FormData($("#uploaddata")[0]);
$.ajax({
url: albackend,
type:'POST',
data: form,
crossDomain: true,
processData: false,
contentType: false,
success:function(data){
console.log("success");
console.log(data);
$('#fileupload').hide();
$('#videoselect').show();
},
error: function (responseData, textStatus, errorThrown) {
alert(errorThrown);
}
});
});
Data is not posted successfully yet, likely due to lacking of keys (postinfo, data, label). How could I solve this problem?

Answer 1

Your file inputs nave no name attributes, they need them to be the keys of the files in the request.
<div id="fileupload">
<form id="uploaddata" enctype="multipart/form-data">
<label for="file">Choose data file</label>
<input type="file" name="data" accept="file/csv">
<br>
<label for="file">Choose initial label file</label>
<input type="file" name= "label">
<br>
<label for="file">Choose setting</label>
<input type="file" name="postinfo">
<br>
<button type="submit">Next</button>
</form>
</div>