CODEWITHSUNDEEP
dartimage-uploading
Tyler James Thompson
Tyler James Thompson

Reputation: 169

Dart: Processing an uploaded file on the server from client request

I am trying to process images uploaded from client on the server but am receiving the following errors. Am I processing the httpRequest wrong?

Unhandled exception:

Uncaught Error: HttpException: Connection closed while receiving data, uri = /api/upload

/// Client Code (dart file) (Works @ sending request)

sendData(dynamic data) {
final req = new HttpRequest();

FormData fd = new FormData();
fd.append('uploadContent', data);
fd.appendBlob('uploadContent', data);

req.open("POST", "http://127.0.0.1:8080/api/upload", async: true);
req.send(fd);

req.onReadyStateChange.listen((Event e) {
  if (req.readyState == HttpRequest.DONE &&
  (req.status == 200 || req.status == 0)) {
    window.alert("upload complete");
  }
});
}

InputElement uploadInput = document.querySelector('#sideBar-profile-picture');
uploadInput.onChange.listen((Event event){
// read file content as dataURL
final files = uploadInput.files;
if (files.length == 1) {
  File file = files[0];
  FileReader reader = new FileReader();
  reader.onLoad.listen((e) {
    print('results: ${reader.result}');
    sendData(reader.result);
  });
  reader.readAsArrayBuffer(file);
}
});

I have a small server listening for the request (/api/upload) and calling handleUploadRequest with the httpRequest being passed in as the param.

Server code (This is where I am stuck)

Future<Null> handleUploadRequest(final HttpRequest httpRequest) async {
   httpRequest.fold(new BytesBuilder(), (b, d) => b..add(d)).then((builder) {
     var data = builder.takeBytes();
     print('bytes builder: ${data}');
   });
}

I am trying to read the data so that I can store it on a cdn but never get a chance to since the connection always gets closed while receiving the data.

Any help on being able to complete this is appreciated. Been at this for the past couple days:/

Upvotes: 1

Views: 955

Answers (1)

alextk
alextk

Reputation: 6239

It is hard to tell when/if you close the httpRequest. If you are doing it right after handleUploadRequest returns, it will indeed close the connection as you are not waiting for httpRequest.fold() to complete. Adding await as shown below and making sure to call httpRequest.close() after this function complete asynchronously should work

Future<Null> handleUploadRequest(final HttpRequest httpRequest) async {
   await httpRequest.fold(new BytesBuilder(), (b, d) => b..add(d)).then((builder) {
     var data = builder.takeBytes();
     print('bytes builder: ${data}');
   });
}

(FYI) I have a similar code that works when testing with curl and uploading a file

Upvotes: 2

Related Questions