Upload a file from dart client to Node server - node.js

Question

I'm stuck with this issue : I can't get my upload to work:
This is a node.js code taht works with a standard <form><input type="file" name="toUpload/>
router.post('/sp/file', function (req, res) {
// File to be uploaded
console.log("###" + req.files);
var fileToUpload = req.files.toUpload;
//console.log(fileToUpload);
var dir = __dirname + "/files";
/* var dir = __dirname + "/files/" + Date.now();
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir);
}*/
fileToUpload.mv( __dirname + "/files/" + fileToUpload.name, function (err) {
if (err) {
console.log("error: " + err);
} else
console.log("upload succeeded");
console.log(fileToUpload);
console.log(__dirname + "/files/" + fileToUpload.name);
uploadFilesStorj.uploadFile(__dirname + "/files/" + fileToUpload.name);
});
});
Now, when I try to upload a file through dart, I get stuck since the sent data is not in the same format:
class AppComponent {
void uploadFiles(dynamic files) {
if (files.length == 1) {
final file = files[0];
final reader = new FileReader();
//reader.onProgress.listen()
reader.onLoad.listen((e) {
sendData(reader.result);
});
reader.readAsDataUrl(file);
}
}
sendData(dynamic data) async {
final req = new HttpRequest();
req.onReadyStateChange.listen((Event e) {
if (req.readyState == HttpRequest.DONE &&
(req.status == 200 || req.status == 0)) {}
});
req.onProgress.listen((ProgressEvent prog) {
if (prog.lengthComputable)
print("advancement : " + (prog.total / prog.loaded).toString());
else
print("unable to compute advancement");
});
req.open("POST", "/sp/file");
req.send(data);
}
}
here's my dart angular front code
<input type="file" #upload (change)="uploadFiles(upload.files)"
(dragenter)="upload.style.setProperty('border', '3px solid green')"
(drop)="upload.style.setProperty('border', '2px dotted gray')" class="uploadDropZone" name="toUpload"/>
The data sent by this method is in the form :
Request payload:
data:text/html;base64,PGh0bWw+DQogICA8aGVhZD4NCiAgICAgIDx0aXRsZT5GaWxlIFVwbG9hZGluZyBGb3JtPC9
I passed a lot of time on it without success, can anybody help please

Answer 1

I finally found a way to post it as a multi-part form:
void uploadFiles() {
var formData = new FormData(querySelector("#fileForm"));
HttpRequest.request("/sp/file", method: "POST", sendData: formData).then((req) {
print("OK");
});
}
is used in conjunction with
<form id="fileForm">
<input type="file" #upload (change)="uploadFiles(upload.files)"
(dragenter)="upload.style.setProperty('border', '3px solid green')"
(drop)="upload.style.setProperty('border', '2px dotted gray')" class="uploadDropZone" name="toUpload"/>
</form>

Answer 2

You are writing the file content directly in the request body in the Dart variant. However the HTML form sends a request with multipart form encoding and embeds the file in there. That's also what your server expects.