Progress event(s) for FormData requests

[jagged3dge]

Hi! Thank you for creating this package, it's a lifesaver when it comes to generic multipart/formdata requests.

Is there a way to consume file upload progress event(s)?

Consider this a feature request, if it doesn't exist yet, or please point me in a direction if it's possible to implement

[awazgyawali]

Want the same, found any workaround @jagged3dge ???

[jagged3dge]

I'm afraid I haven't. I couldn't pursue it further due to limited time constraints. I'm hoping package authoring team might have some pointers

[wendux]

I have no idea about it yet, because neither HttpClientRequest nor HttpClient didn't provide some way to listen the progress event.

[salk52]

I made sample app which shows how to implement upload/download with progress bar, so maybe you find it useful to make dio.fileupload.

https://github.com/salk52/Flutter-File-Upload-Download

[wendux]

@salk52 I have seen your code, but I am sorry to say that your code may be not correct. In your code, the onUploadProgress just stands for the file reading progress, not file uploading progress.

The follow code snippet from your code, and I comment the sink.add :

      new StreamTransformer.fromHandlers(
        handleData: (data, sink) {
          byteCount += data.length;

          if (onUploadProgress != null) {
            onUploadProgress(byteCount, totalByteLength);
          }
          // comment this line, the file will not be uploaded, but the progress still go
          //sink.add(data);
        },
        handleError: (error, stack, sink) {
          throw error;
        },
        handleDone: (sink) {
          sink.close();
          // UPLOAD DONE;
        },
      ),

If not call sink.add(data), the file can not be uploaded, but the progress still go.

[salk52]

Yes, you are partially right, but it's not just reading file and I'll try to explain. First of all sink.add(data); should be call first, then onUploadProgress(byteCount, totalByteLength);

Calling sink.add(data); is crucial for this example. Stream reads bytes in chunks and add them into network stream by sink.add(data) which is synchronous call. So if sink.add(data) cant add bytes to underlaying network stream it will throw an exception. So if you start uplading 100 MB file, and you turn off wifi on emulator/phone, the progress will stop. So you indirectly know that bytes are sent or not.

[jeffosmith]

I've created a PR #141 that attempts to address this. I'm converting the FormData.bytes to a stream, then uploading that stream and providing an OnUploadProgress.

[wendux]

fixed!

response = await dio.post(
  "http://www.dtworkroom.com/doris/1/2.0.0/test",
  data: {"aa": "bb" * 22},
  onUploadProgress: (int sent, int total) {
    print("$sent $total");
  },
);

[Xgamefactory]

onUploadProgress

is it possible to connect this upload progress with a steam to handle on our bloc part for displaying progress instead a callbak ?

[EdgarMagalhaes]

Ok, so I searched around and stumbled across this answer.
You can create a StreamController before your request and add events via onReceiveProgress callback. I did this for downloading, I guess you can also do it for uploading.
This worked for me. Hope it helps someone.

StreamController<int> progressStreamController = new StreamController();
dio.get(
  event.url,
  onReceiveProgress: (received, total) {
      progressStreamController.add(((received / total) * 100).round());
  },
  options: Options(
      responseType: ResponseType.bytes,
      followRedirects: false,
      validateStatus: (status) {
          return status < 500;
      }),
).then((Response response) async {
  //Do whatever you want with the response
}).whenComplete(() => progressStreamController.close());

await for (int p in progressStreamController.stream) {
    yield DownloadingUpdate(progress: p);
}

[Kamoba]

  onUploadProgress: (int sent, int total) {
    print("$sent $total");
  },

Where is from this onUploadProgress i updated to the last version dio: ^4.0.0 and still have The named parameter 'onUploadProgress' isn't defined..

Ok i use:

Dio().download(serverName+'/download', savePath,
      options: Options(method: 'POST', headers: {HttpHeaders.acceptEncodingHeader: "*"},), 
      data:  FormData.fromMap(params),
      onReceiveProgress: (received, total) {
        callBack(received, total);
      });

[ariefwijaya]

  onUploadProgress: (int sent, int total) {
    print("$sent $total");
  },

Where is from this onUploadProgress i updated to the last version dio: ^4.0.0 and still have The named parameter 'onUploadProgress' isn't defined..

Ok i use:

Dio().download(serverName+'/download', savePath,
      options: Options(method: 'POST', headers: {HttpHeaders.acceptEncodingHeader: "*"},), 
      data:  FormData.fromMap(params),
      onReceiveProgress: (received, total) {
        callBack(received, total);
      });

How about on uploading progress?

[JaidynBluesky]

@ariefwijaya From their docs it looks like you use the onSendProgress method in a POST request:

response = await dio.post( 'http://www.dtworkroom.com/doris/1/2.0.0/test', data: {'aa': 'bb' * 22}, onSendProgress: (int sent, int total) { print('$sent $total'); }, );