Not resolved promises with File objects after POST form requests - ajax

Question

I'm using fetch Web API to retrieve file content from a couple of URLs and send it to a form. However, when sent to the backend from a form POST ajax request, instead of having the actual File Objects there, I'm retrieving Promise objects (which cannot be handled at the backend).
What is wrong in the code below that prevents infile and mapfile variables when sent to $.ajax to have a File object?
let formData = new FormData();
let exampleb2pPromise = fetch( fileHash["infile"].fileURL).then(function(response) {
fileHash["infile"].blob = response.blob();
return fileHash;
}).then(function(fileHash) {
let infile = new File( [ fileHash["infile"].blob ], fileHash["infile"].filename, { type: fileHash["infile"].filetype } );
return infile;
});
let exampleCSVPromise = fetch(fileHash["mapfile"].fileURL).then(function(response) { ...
Promise.all([exampleb2pPromise, exampleCSVPromise]).then(function(values) {
let infile = values[0];
let mapfile = values[1];
if ( infile && mapfile ) ) {
console.log( infile );
formData.append( "infile", infile, "input.tsv" );
if ( mapfile ) {
console.log( mapfile );
formData.append( "mapfile", mapfile, "mapfile.txt" );
}
}
return formData;
}).then( function( formData ) {
let exec = "/submit";
console.log( formData );
$.ajax({
url : exec,
type: "POST",
data : formData,
processData: false,
contentType: false,
success:function(data, textStatus, jqXHR){
if ( data && data.session ) {
...
}
},
error: function(jqXHR, textStatus, errorThrown){
//if fails
// TODO: To be handled
}
});
});

Answer 1

response.blob() returns a Promise - you'd need to rewrite your code something like
let exampleb2pPromise = fetch( fileHash["infile"].fileURL).then(function(response) {
return response.blob();
}).then(function(blob) {
fileHash["infile"].blob = blob;
return fileHash;
}).then(function(fileHash) {
let infile = new File( [ fileHash["infile"].blob ], fileHash["infile"].filename, { type: fileHash["infile"].filetype } );
return infile;
});
Although, it's far easier to write it like:
let exampleb2pPromise = fetch( fileHash.infile.fileURL)
.then(response => response.blob())
.then(blob => new File(fileHash.infile.blob = blob, fileHash.infile.filename, { type: fileHash.infile.filetype } ));