Upload a file from dart client to Node server

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

I tried to load the data directly in node.js app.js: var rawBodySaver = function (req, res, buf, encoding) { if (buf && buf.length) { req.rawBody = buf.toString(encoding || 'utf8'); } }; and in my upload.js var out = fs.createWriteStream(__dirname + "/files/test" ); out.write( req.rawBody); out.end(); The thing is that I get the raw data encoded in bas64 prefixed with the info 'data:text/html;base64' — Zied Hamdi, Nov 16 '16 at 14:25

score 1 · Answer 1 · answered Nov 16 '16 at 17:56

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>

The solution was here http://stackoverflow.com/questions/26279968/how-can-i-do-a-multipart-post-in-dart-angulardart/40637606#40637606 — Zied Hamdi, Nov 16 '16 at 17:57

score 0 · Answer 2 · answered Nov 16 '16 at 13:21

0

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.

answered Nov 16 '16 at 13:21

Matthias247

9,836
1
20
29

Yeah I understand that, it's just that i'm not able to send the data as a form I tried to change it by uploading the entire input : front-end : (change)="uploadFiles(upload)" back-end: void uploadFiles(dynamic upload) { final req = new HttpRequest(); req.open("POST", "/sp/file"); req.send(upload); – Zied Hamdi Nov 16 '16 at 13:23
So what are the possiblities : I'm new to dart and to node. (the project imposes these technologies). I'd like to send the entire multipart-form with dart, but there's no example to showcase that (since I still want to react to js events, and I need to have a d&d behavior, I can't just use a standard form) – Zied Hamdi Nov 16 '16 at 13:26
What have you already **done** to solve this problem, if you know it? Looked up how multipart form requests work in the Dart documentation? A quick google search for "multipart form dart" delivers dozens of solutions. – Matthias247 Nov 16 '16 at 13:29
I also tried to access from node to the "data" , doing console.log("###" + req.data); but it answers that it's undefined... – Zied Hamdi Nov 16 '16 at 13:29
This example shows how to create a form and send json data, but I need to send an input file http://stackoverflow.com/questions/25742113/dart-post-with-multipart-form-data – Zied Hamdi Nov 16 '16 at 13:31

Upload a file from dart client to Node server

2 Answers2