Flutter Web: Show Progress while Uploading Video using Dio

Question

I have tried to upload video on AWS s3 from Flutter Web and video getting uploaded successfully. But it's not showing me progress like how many percentage uploaded.

uploadFile(String url, Uint8List imageBytes) async {
    BaseOptions options = new BaseOptions(
        contentType: "multipart/form-data",
        headers: {
          'Access-Control-Allow-Origin': '*',
          "Access-Control-Allow-Methods": "POST,GET,DELETE,PUT,OPTIONS",
          "Access-Control-Allow-Credentials": true,
          "Access-Control-Allow-Headers": "Origin,Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,locale",
          'Accept': "*/*",
        },
        connectTimeout: 200000,
        receiveTimeout: 200000,
        sendTimeout: 200000,
        followRedirects: true,
        validateStatus: (status) {
          print('Status: $status');
          return status <= 500;
        });

    Dio _dio = new Dio(options);

    var file = MultipartFile.fromBytes(imageBytes).finalize();

    await _dio.put(
      url,
      data: file,
      onReceiveProgress: (int sentBytes, int totalBytes) {
        double progressPercent = sentBytes / totalBytes * 100;
        print("Progress: $progressPercent %");
        if (progressPercent == 100) {
          dispose();
        }
      },
      onSendProgress: (int sentBytes, int totalBytes) {
        double progressPercent = sentBytes / totalBytes * 100;
        print("Progress: $progressPercent %");
        if (progressPercent == 100) {
          dispose();
        }
      },
    ).then((value) {
      print("response: ${value.data}");
      print("%%%%%%");
    }).catchError((onError) {
      print(onError);
      dispose();
    });
  }

I have printed logs inside the function onSendProgress and onReceiveProgress but its not showing me any logs.

Can anyone please help to show progress for uploading video on AWS Server? Do let me know if anyone needs more information.

score 2 · Answer 1 · answered Oct 21 '21 at 03:34

import 'package:dio/dio.dart' as dartio;

Future uploadFile(Message message) async { // just ignore this. final AuthenticationController authController = Get.find();

String urlFileStore =
    (authController.state as Authenticated).currentAccount.urlFileStore;
String apiTokenFileStore = (authController.state as Authenticated)
    .currentAccount
    .apiTokenFileStore;

dartio.BaseOptions options = new dartio.BaseOptions(
    contentType: "multipart/form-data",
    headers: {'Authorization': apiTokenFileStore},
    connectTimeout: 200000,
    receiveTimeout: 200000,
    sendTimeout: 200000,
    followRedirects: true,
    validateStatus: (status) {
      _logger.wtf('uploadFile Status: $status');
      return status <= 500;
    });

dartio.Dio _dio = dartio.Dio(options);

try {
  var formData = dartio.FormData.fromMap({
    'file': await dartio.MultipartFile.fromFile(message.filePath),
  });

  var response = await _dio.post(
    urlFileStore,
    data: formData,
    onSendProgress: (int sent, int total) {
      _logger.wtf('$sent $total');
    },
  );
  //update message object filePath
  _logger.v(response);
} on Exception catch (e) {
  _logger.e(e);
}

}

This work for my ,I guest you need to change the put for post.

Flutter Web: Show Progress while Uploading Video using Dio

1 Answers1