How can I show progress status of upload with dio?

Question

var response = await ApiService().dio.post( url, data: formData, onSendProgress: (count, total) { //use this for upload status }, ); How can I use onSendProgress to update my UI? Is there a way to use it as a stream? How can I do it otherwise?

I want to have a linearprogress indicator in my UI which should update as the upload approaches its end. I have a cubit and the api call is done in repository.. I have absolutely no idea how I can go about solving this?

score -1 · Answer 1 · answered Mar 14 '23 at 12:37

In the api provider you can use this code before catch method .

  var pro = "0.0".obs;

  showDialog(
      context: Get.context!,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return WillPopScope(
          onWillPop: ()async{
            return false;
          },
          child: GestureDetector(
              onTap: () {
                FocusScope.of(context).requestFocus(FocusScopeNode());
              },
              child: AlertDialog(
                  backgroundColor: Colors.transparent,
                  content: Stack(children: [
                    Container(
                      clipBehavior: Clip.antiAlias,
                      width: MediaQuery.of(context).size.width,
                      padding: const EdgeInsets.all(10),
                      decoration:  BoxDecoration(
                          color: AppColors.themeColor,
                          borderRadius: BorderRadius.all(Radius.circular(15))),
                      child: Obx(
                            ()=> Text("Uploading: ${pro.value} %",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 15.sp, fontWeight: FontWeight.w700,
                            color: Colors.white,

                          ),),
                      ),
                    ),
                  ]))),
        );
      });
  Response response = await _dio.post(ApiConstants.signUp,data: FormData.fromMap(map),onSendProgress: (int sent, int total) {
    String percentage = (sent/total*100).toStringAsFixed(2);
    debugPrint(percentage);
    pro.value = percentage;
    if(double.parse(percentage)>99){
    }
  },);
  var dataResponse =DataResponse<UserModel>.fromJson(response.data, (data) =>
  UserModel.fromjson(data as Map<String ,dynamic>));
  return dataResponse;

Here is the full example-->

Future<DataResponse<UserModel?>>  signUp(UserModel userModel,String imagePath, String formPath,String formPath1,) async{
Map<String, dynamic> map = userModel.toJson();
if (imagePath.isNotEmpty && !imagePath.contains("http")) {
  File file = File(imagePath);
  String fileType = imagePath.substring(imagePath.lastIndexOf(".") + 1);
  map['image'] = await MultipartFile.fromFile(file.path,
      filename: imagePath.split("/").last,
      contentType:MediaType(Utils.getFileType(imagePath)!, fileType));
}

if (formPath.isNotEmpty && !formPath.contains("http")) {
  File file = File(formPath);
  String fileType = formPath.substring(formPath.lastIndexOf(".") + 1);
  map['signature_doc'] = await MultipartFile.fromFile(file.path,
      filename: formPath.split("/").last,
      contentType:MediaType(Utils.getFileType(formPath)!, fileType));
}
if (formPath1.isNotEmpty && !formPath1.contains("http")) {
  File file = File(formPath1);
  String fileType = formPath1.substring(formPath1.lastIndexOf(".") + 1);
  map['coaching_license'] = await MultipartFile.fromFile(file.path,
      filename: formPath1.split("/").last,
      contentType:MediaType(Utils.getFileType(formPath1)!, fileType));
}
print(map);

try{
  var pro = "0.0".obs;

  showDialog(
      context: Get.context!,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return WillPopScope(
          onWillPop: ()async{
            return false;
          },
          child: GestureDetector(
              onTap: () {
                FocusScope.of(context).requestFocus(FocusScopeNode());
              },
              child: AlertDialog(
                  backgroundColor: Colors.transparent,
                  content: Stack(children: [
                    Container(
                      clipBehavior: Clip.antiAlias,
                      width: MediaQuery.of(context).size.width,
                      padding: const EdgeInsets.all(10),
                      decoration:  BoxDecoration(
                          color: AppColors.themeColor,
                          borderRadius: BorderRadius.all(Radius.circular(15))),
                      child: Obx(
                            ()=> Text("Uploading: ${pro.value} %",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 15.sp, fontWeight: FontWeight.w700,
                            color: Colors.white,

                          ),),
                      ),
                    ),
                  ]))),
        );
      });
  Response response = await _dio.post(ApiConstants.signUp,data: FormData.fromMap(map),onSendProgress: (int sent, int total) {
    String percentage = (sent/total*100).toStringAsFixed(2);
    debugPrint(percentage);
    pro.value = percentage;
    if(double.parse(percentage)>99){
    }
  },);
  var dataResponse =DataResponse<UserModel>.fromJson(response.data, (data) =>
  UserModel.fromjson(data as Map<String ,dynamic>));
  return dataResponse;
}
catch(error){
 final res = (error as dynamic).response;
 if (res != null )return DataResponse.fromJson(res?.data, (data) => null);
 return DataResponse(message: error.toString());
}

}

How can I show progress status of upload with dio?

1 Answers1