Multipart request with browser_client.dart

Question

I am trying to send multipart request using BrowserClient (package:http/browser_client.dart). I have found answers: first and second. But they both use HttpRequest. BrowserClient could post string, list or map but i think i should send html.FormData.

Answer 1

Thanks to @filiph, i found how we could send multipart request with file from angularDart client, may be it will be usefull for somebody. For example we have simple angular dart template:

<input #fileInput type="file" accept="image/*" name="file">

Here is simple component for file upload:

class FileComponent implements AfterViewInit {

  final Client _http;

  @ViewChild("fileInput")
  ElementRef cameraInputRef;

  HealthApiImpl(this._http);

  @override
  ngAfterViewInit() {
    FileUploadInputElement uploadInput = cameraInputRef.nativeElement;
    uploadInput.onChange.listen((e) {
      File file = (e.target as dynamic).files[0];
      createMultipartFileAndUpload(file);
    });
  }

  void createMultipartFileAndUpload(File file) {
    FileReader fileReader = new FileReader();
    fileReader.onLoad.listen((e) {
      var target = e.target as dynamic;
      List<int> result = target.result;
      MultipartFile mf = new MultipartFile.fromBytes(
          "file",
          result,
          filename: file.name,
          contentType: new MediaType.parse(file.type));
      upload(mf);
    });
    fileReader.readAsArrayBuffer(file);
  }

  void upload(MultipartFile file) {
    var uri = Uri.parse("/uploadUrl");
    var request = new MultipartRequest("POST", uri);
    request.files.add(file);
    var response = await _http.send(request);
    if (response.statusCode == 200) {
        print("success upload");
    }
    throw new "upload error";
  }
}

Client is injected as in angular dart tour of heroes example.

Answer 2

Use the MultiPartRequest class. The docs have an example that might help:

var uri = Uri.parse("http://pub.dartlang.org/packages/create");
var request = new http.MultipartRequest("POST", url);
request.fields['user'] = 'nweiz@google.com';
request.files.add(await http.MultipartFile.fromPath(
    'package',
    'build/package.tar.gz',
    contentType: new MediaType('application', 'x-tar'));
request.send().then((response) {
  if (response.statusCode == 200) print("Uploaded!");
});