onSendProgress "jumps" to 99% and waits there until finished

[liranzairi]

Please see this issue:
https://stackoverflow.com/questions/61635094/flutter-how-to-increase-onsendprogress-calls-for-a-fluid-progress-bar-animation
It's happening to me too and it looks like a bug in Dio.

Platform name is Flutter, Dio version is 3.0.10.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If this is still an issue, please make sure it is up to date and if so, add a comment that this is still an issue to keep it open. Thank you for your contributions.

[liranzairi]

Problem still exists, please don't close.

[Zchandev]

I have this problem too. Any workaround?

[danielwalczak]

yes same here

[danielwalczak]

this is how I'm using it and the output is not accurate

FormData formData = FormData.fromMap({
      "file": MultipartFile.fromBytes(await File(filePath).readAsBytes(),
          filename: fileName),
    });

    Response response = await dio.post(
      url,
      data: formData,
      onSendProgress: onSendProgress,
    );

[danielwalczak]

up up

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If this is still an issue, please make sure it is up to date and if so, add a comment that this is still an issue to keep it open. Thank you for your contributions.

[Zchandev]

Still no fix

Please keep it open

[o0starshine0o]

Still no fix

Please keep it open

[wyl086]

use MultipartFile.fromFileSync(file.path, filename: basename(file.path)) this working !

[o0starshine0o]

static Future<MultipartFile> fromFile(
    String filePath, {
    String filename,
    MediaType contentType,
  })

it's work too.

[temp11750]

use MultipartFile.fromFileSync(file.path, filename: basename(file.path)) this working !

fromFileSync isn't available in Flutter Web.

onSendProgress still not working correctly (0% and then 100%)

[temp11750]

static Future<MultipartFile> fromFile(
    String filePath, {
    String filename,
    MediaType contentType,
  })

it's work too.

fromFile also isn't available in Flutter Web.

onSendProgress still not working correctly (0% and then 100%)

[baisunwu]

==========================working :=======================
1.use MultipartFile.fromFile(file.path)
2. use MultipartFile.fromFileSync(file.path, filename: basename(file.path))

those percentages as well. E.g. 10%, 20%, 50%, 75% etc.

==========================now working=====================

1. MultipartFile.fromBytes(fileData)

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)

As you can see it jumps from 0% to 100%

my code :
Future postObjectWithFile(
File file,
String bucketName,
String fileKey, {
ProgressCallback onSendProgress,
ObjectACL acl = ObjectACL.inherited,
}) async {
assert(acl != null, "ACL不能为空");
final OSSCredential credential = await credentialProvider.getCredential();

FormData formData = FormData.fromMap({
  //文件名，随意
  'Filename': fileKey,
  //"可以填写文件夹名（对应于oss服务中的文件夹）/" + fileName
  'key': fileKey, //上传后的文件名
  'policy': SignUtil.getBase64Policy(),
  //Bucket 拥有者的AccessKeyId。
  //  accessKeyId 大小写 和服务端返回的对应就成，不要在意这些细节  下同
  'OSSAccessKeyId': credential.accessKeyId,
  //让服务端返回200，不然，默认会返回204
  'success_action_status': '200',
  'signature': SignUtil.getSignature(credential.accessKeySecret),
  //临时用户授权时必须，需要携带后台返回的security-token
  'x-oss-security-token': credential.securityToken,
  // 指定OSS创建Object时的访问权限
  'x-oss-object-acl': acl.parameter,
  'file': await MultipartFile.fromFile(file.path),
});

final dio = DioUtil.getDio();
final res = await dio.post(
  'https://$bucketName.$endpoint',
  options: Options(
    responseType: ResponseType.plain,
  ),
  data: formData,
    onSendProgress: onSendProgress
);

return OSSResponse(res.statusCode, res.statusMessage, fileKey);

}

[temp11750]

I'm using Dio in my project but I couldn't write method that uploads file and show progress bar. I wrote code that uses "raw" Dart classes:
FormData and HttpRequest
and everything works perfect. HttpRequest has upload.onprogress getter that works correct (e.g. 0 - 10% - 35% -73% - 100%).
In dio source code there is file src/adapters/browser_adapter.dart that is implementation of 'request' but dio authors dont't use HttpRequest.upload.progress which like I said earlier, works perfect.

[shar154]

I'm experiencing the same behaviour with dio: ^3.0.10.
I'm using Flutter web and loading UInt8List filebytes into formData.

formData = FormData.fromMap(
 {
'file' : MultipartFile.fromBytes(fileBytes);
});

I upload the formData using POST as follows:

dio.Response response = await http.post(preSignedURL['url'],
      data: formData,
      options: dio.Options(
            headers: {dio.Headers.contentTypeHeader: 'multipart/form-data',
              dio.Headers.contentLengthHeader: formData.length}),
      onSendProgress: progress
);

The Function progress prints out int sent andint totaland I get this output:
......
Uploading 2969 out of 4016084 bytes... 0.0739 %
js_primitives.dart:30 Uploading 2998 out of 4016084 bytes... 0.0746 %
js_primitives.dart:30 Uploading 3085 out of 4016084 bytes... 0.0768 %
js_primitives.dart:30 Uploading 4016051 out of 4016084 bytes... 100 %
js_primitives.dart:30 Uploading 4016053 out of 4016084 bytes... 100
.....

As you can see, it jumps from 0% to 100%. When it hits 100% it just waits until the file uploads. After this, there is an XMLHttpRequest error thrown. Will post if I'm able to solve the problem.

[Alijaaan]

same problem here ...

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If this is still an issue, please make sure it is up to date and if so, add a comment that this is still an issue to keep it open. Thank you for your contributions.

[Alijaaan]

problem still remains ...

[HassanEm]

after two years still, dio have this issue

[KirillArtemenko]

This problem (0% to 100% imediatly) is always appears when using MultipartFile.fromBytes() method (while using fromFile or fromFileSync all works fine).

As I assume, this is due to the work of the algorithm, which counts the transferred bytes when reading the file from disk (by filepath while using the fromFile method) instead of actually accounting for the bytes transferred by network. When using fromBytes, no chunks are read because all the bytes have already been read and allocated in memory.

I recently ran into this problem and just started looking for a solution and this is just my guess as to why this is happening. Hopefully someone can find a way to get the value of the actually transferred bytes over the network.

[KuldeepVagadiya]

This problem still remains, please someone find any ans let us know

[zhpoo]

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)

[Ange0]

also try this header, example:

await client.put (
url,
options: dio.Options (
headers: {
'Accept-Ranges': 'bytes'},
),
onSendProgress: (int sent, int total) {
print ('progress: $ {(sent / total * 100) .toStringAsFixed (0)}% ($ sent / $ total)');
},
);

[WatchDogsDev]

@zhpoo Thank you :)

MultipartFile(file.openRead(), file.lenthSync()) works !

[fralways]

this does not work on flutter-web

[hellohejinyu]

This is because fromBytes is data read directly from memory, which is much faster than reading from a file.

[PiercarloSlavazza]

Still broken - the only viable solution that I found is to resort to vanilla JS as explained in the SO answer https://stackoverflow.com/a/67513990/445090

[alisinaee]

this does not work on flutter-web .. plz fix it.
O _ O

[nicolaspernoud]

I confirm that it doesn't work with flutter web : it jumps to 100% at the start of upload, event if it just started...

[weimuhua]

this bug still exits on 4.0.6

[mehdico]

Same problem. data: file.openRead() is not good enough, need smaller chunks.

progress: 0.24213404271041158
progress: 0.48426808542082317
progress: 0.7264021281312347
progress: 0.9685361708416463
progress: 1.0

[AbdallahAndroid]

bug still found in version 5.33

[realchandan]

This code is working for me ->

  Uri uri = Uri(queryParameters: params);
  String url = "${Vals.apiUrl}/upload?${uri.query}";

  FormData formData = FormData.fromMap({
    "file": MultipartFile.fromFileSync(filepath),
  });

  Response response = await Api.authDio.put(
    url,
    data: formData,
    onSendProgress: progressCallback,
  );

Just a snippet from my code.

Result ->

[SadraKafiri]

bug still found in version 5.3.4

[AlexV525]

Please file new issues with a minimal reproducible example. Thanks.