Flutter: How to increase onSendProgress calls for a fluid progress bar animation while uploading files?

Question

I have the following code to upload a file.

var client = new dio.Dio();
await client.put(
  url,
  data: formData,
  options: dio.Options(
    headers: headers,
  ),
  onSendProgress: (int sent, int total) {
    final progress = sent / total;
    print('progress: $progress ($sent/$total)');
  },
);

Uploading the file works fine. The thing is, I have a view that has a circular progress bar that indicates the upload progress when onSendProgress is triggered. When I upload a ~10MB file the progress bars jumps from 0% to 100% within a second and then waits for a couple of seconds (depending on the file size) before continuing with the rest of the code. This seems weird to me because I expect the progress bar to gradually increase its progress.

Below you can find the print outputs from my example with a ~10MB file.

flutter: progress: 0.000003035281907563734 (29/9554302)
flutter: progress: 0.000013187776563897604 (126/9554302)
flutter: progress: 0.999996546058519 (9554269/9554302)
flutter: progress: 0.9999967553883057 (9554271/9554302)
flutter: progress: 1.0 (9554302/9554302)

This one is with a smaller file, but the same amount of callbacks.

flutter: progress: 0.00001847214941293598 (29/1569931)
flutter: progress: 0.00008025830434585978 (126/1569931)
flutter: progress: 0.9999789799679094 (1569898/1569931)
flutter: progress: 0.9999802539092483 (1569900/1569931)
flutter: progress: 1.0 (1569931/1569931)

As you can see it jumps from 0% to 100%. I can imagine you thinking, that is just fast internet. But I've tried Wifi, 4G, 3G and they all show the same issue. I hit the upload button, it start on 0% it jumps to 100% and then I have to wait some time (depending on the file size) for the upload to finish.

Is there a way to get more amount of onSendProgress callbacks triggered during the upload or somehow to delay the upload so I can get a smooth upload progress?

EDIT:

I've tried the following with the HTTP package

import 'dart:async';
import 'package:http/http.dart' as http;

class UploadRequest extends http.MultipartRequest {
  final void Function(int bytes, int totalBytes) onProgress;

  UploadRequest(
    String method,
    Uri url, {
    this.onProgress,
  }) : super(method, url);

  http.ByteStream finalize() {
    final byteStream = super.finalize();
    if (onProgress == null) return byteStream;

    final total = this.contentLength;

    final t = StreamTransformer.fromHandlers(
      handleData: (List<int> data, EventSink<List<int>> sink) {
        onProgress(data.length, total);
        sink.add(data);
      },
    );

    final stream = byteStream.transform(t);
    return http.ByteStream(stream);
  }
}

Trigger:

final request = UploadRequest(
  'PUT',
  Uri.parse(url),
  onProgress: (int bytes, int total) {
    print('progress: $progress ($sent/$total)');
  },
);

request.headers.addAll(headers);
request.files.add(
  http.MultipartFile.fromBytes(
    'file',
    attachment.file.buffer.asUint8List(),
    filename: attachment.name,
    contentType: MediaType.parse(attachment.contentType),
  ),
);


var response = await request.send();

But sadly, this has the same issue. The file uploads fine, but the progress callback is called only a few times. It hits 100% right away, then I have to wait a while (depending on the file size) before getting a 2xx response from the server. So I don't think this is a specific DIO issue.

I think that it looks like it is not actually showing the upload progress, but rather the progress of the file being read into a stream clientside. Then the stream is uploaded to the server and that is what you are waiting on (of course depending on the file size) even though the progress shows 100%.

Solution 1

This appears to be a bug on dio, I can see two ways you can get around this:

1. Just add a number to your circular progress, it will say 99% (truncate the rest) so the users will know its not done yet, as 100% will only happen when you get 1.0 as a result).

2. use the http package instead. the http package as a StreamedRequest which would give you finer control over what's being sent, so you can reflect this on your UI.

Solution 2

I have found the resolution.

Just use file.openRead() as the request's data param while PUT a file.

For MultipartFile maybe it can use MultipartFile(file.openRead(), file.lenthSync()). But I did not verify this, someone can try it if necessary.

var client = Dio();
await client.put(
  url,
  data: file.openRead(),
  options: dio.Options(
    headers: headers,
  ),
  onSendProgress: (int sent, int total) {
    print('progress: ${(sent / total * 100).toStringAsFixed(0)}% ($sent/$total)');
  },
);

The progress callback is smooth now.

I/flutter (19907): progress: 9% (65536/734883)
I/flutter (19907): progress: 18% (131072/734883)
I/flutter (19907): progress: 27% (196608/734883)
I/flutter (19907): progress: 36% (262144/734883)
I/flutter (19907): progress: 45% (327680/734883)
I/flutter (19907): progress: 54% (393216/734883)
I/flutter (19907): progress: 62% (458752/734883)
I/flutter (19907): progress: 71% (524288/734883)
I/flutter (19907): progress: 80% (589824/734883)
I/flutter (19907): progress: 89% (655360/734883)
I/flutter (19907): progress: 98% (720896/734883)
I/flutter (19907): progress: 100% (734883/734883)

Comments

[Tom Aalbers]

Thanks for the reply. 1). See the edit on the OP, I'm afraid it's not just a DIO bug. I understand what you're trying to do, will try to use that as a backup. But its not really a solution to the issue. 2) Got any examples on how to use it?

[Michel Feinstein]

Try this and see if it helps. I am not 100% sure it will be what you want as I am not sure if everything added to the Stream can be considered to be sent, the docs don't make it clear and they also don't mention how errors are being reported (are they immediate? Is it there a retry?).

[Tom Aalbers]

Hi, thanks for the response. Did you read the question? I've already tried that and that is not properly working.

[Rahman Rezaee]

dio give you call back listener function

[Tom Aalbers]

.... Please look at my question. It has two examples, Dio and http.

[Tom Aalbers]

What is this? Is this an answer or a question? In any case you should elaborate on it because it is not really clear. If it is a question, you should not post is as an answer.

[dabai]

this is answer. use await MultipartFile.fromFile(file.path) replace, onSendProgress working fine

[Tom Aalbers]

Hi, thanks. Sorry but I think your answer is wrong. If you would have read the question better then you would've read that it jumping from 0% to 100% is the problem. It is showing the progress of the file being read in to a stream instead of showing the progress of it being send to the server.