Upload a file from dart client to Node server

491
December 15, 2016, at 1:10 PM

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.

READ ALSO
Failing to pass date from client to server and server to email

Failing to pass date from client to server and server to email

I am passing my array of date from client(angular) to server as follow

278
Socket.io view old messages

Socket.io view old messages

I've been reading on how to store messages on socketio,

367
How to implement Android Deeplink without express server in node.js

How to implement Android Deeplink without express server in node.js

I am trying to integrate Android Deeplink with a HTTP server in nodejs

467
What is the best way to authenticate with Facebook in a Chrome Extension?

What is the best way to authenticate with Facebook in a Chrome Extension?

I'm building a chrome extension that is going to interact with a Nodejs/Restify web service that I am also building

285