Flutter upload large file with progress bar. App and Web both support

Question

I am stuck in issue with upload large file. A flutter application compiled for Web and App (Native) when file upload from app is working fine but web it hanged. how to send large file as stream request.

I am new in flutter and working on current existing app which has a feature to upload large tutorial video files and PDF files. requirement is to show the progress bar during the upload the file, currently app has I used dio but it hanged in web version and not file not upload operation going failed.

• File size approximate 400MB to 700MB

Currently using following packages

dependencies:
  http: ^0.12.2
  dio: ^3.0.10

Could you please help me out for this issue?

I am trying to achieve with below code but some how it not working. https://github.com/salk52/Flutter-File-Upload-Download

It's thrown an error like "Memory buffer allocation failed " , I am unable to update the version of dio or http due to other package goes disturb. somehow I have to achieve it using httpclient or dio . I could not update the version for package because it messed up other package dependency.

Sample ref. code as below: File size approximate around 500 MB to 700MB

For ref. following code which using in code.

Dio package example:

#Dio example start

  Future<NormalResponse> addSubjectMaterial(
      {GetSubjectMaterial objSubMat,
      bool isDelete,
      PlatformFile objfile,
      Function sendProgress,
      Function receiveProgress,
      dio.CancelToken cancelToken}) async {
    NormalResponse objRes = NormalResponse();
    try {
      print(objSubMat.objMaterial.subjectId);
      dio.FormData formData = dio.FormData();
      formData.fields.add(MapEntry("ObjSubMat", json.encode(objSubMat)));
      formData.fields.add(MapEntry("IsDelete", isDelete.toString()));
      formData.fields
          .add(MapEntry("ClassesId", AppConstants.classesId().toString()));
      if (objfile != null) {
        formData.files.add(
            MapEntry("objfile", await getMultipartFile(objfile, "objfile")));
      }
      var resp = await dio.Dio().post(
        AppConstants.addUpdateSubjectMaterial,
        data: formData,
        options: requestConfig,
        cancelToken: cancelToken,
        onSendProgress: sendProgress,
        onReceiveProgress: receiveProgress,
      );

      // String respStr = resp.toString();
      // objRes = NormalResponse.fromJson(json.decode(respStr));
      objRes = NormalResponse.fromJson(resp.data);
    } catch (err) {
      objRes.err = err.toString();
      objRes.isSuccess = false;
      objRes.newId = -1;
      sendProgress = null;
      receiveProgress = null;
    }
    return objRes;
  }

#Dio example end

#httpclient example code is there any solution with progress bar in this sample code.

   Future<NormalResponse> addUpdateSubjectMaterialHttp(
       {GetSubjectMaterial objSubMat,
       bool isDelete,
       PlatformFile objfile,
       Function sendProgress,
       Function receiveProgress,
       dio.CancelToken cancelToken}) async {
     NormalResponse objRes = NormalResponse();
     try {
       var req = http.MultipartRequest(
         "POST",
         Uri.parse(AppConstants.addUpdateSubjectMaterial),
       );
       req.headers.addAll({
         'Content-type': 'application/json',
         'Accept': 'application/json',
       });
       req.fields['ObjSubMat'] = json.encode(objSubMat);
       req.fields['IsDelete'] = isDelete.toString();
       req.fields['ClassesId'] = AppConstants.classesId().toString();

       if (objfile != null) {
         req.files.add(http.MultipartFile(
             "objFile", objfile.readStream, objfile.size,
             filename: objfile.name));
       }

       var resp = await req.send();
       String result = await resp.stream.bytesToString();
       objRes = NormalResponse.fromJson(json.decode(result));
       print(objRes.isSuccess);
       print(objRes.err);
       print("Here done");
     } catch (err) {
       print(err);
       throw err;
     }
     return objRes;
   }
   
#httpclient


Http package example:

#example start

  Future<NormalResponse> addSubjectMaterial(
      {GetSubjectMaterial objSubMat,
      bool isDelete,
      PlatformFile objfile,
      Function sendProgress,
      Function receiveProgress,
      dio.CancelToken cancelToken}) async {
    NormalResponse objRes = NormalResponse();
    try {
      print(objSubMat.objMaterial.subjectId);
      dio.FormData formData = dio.FormData();
      formData.fields.add(MapEntry("ObjSubMat", json.encode(objSubMat)));
      formData.fields.add(MapEntry("IsDelete", isDelete.toString()));
      formData.fields
          .add(MapEntry("ClassesId", AppConstants.classesId().toString()));
      if (objfile != null) {
        formData.files.add(
            MapEntry("objfile", await getMultipartFile(objfile, "objfile")));
      }
      var resp = await dio.Dio().post(
        AppConstants.addUpdateSubjectMaterial,
        data: formData,
        options: requestConfig,
        cancelToken: cancelToken,
        onSendProgress: sendProgress,
        onReceiveProgress: receiveProgress,
      );

      // String respStr = resp.toString();
      // objRes = NormalResponse.fromJson(json.decode(respStr));
      objRes = NormalResponse.fromJson(resp.data);
    } catch (err) {
      objRes.err = err.toString();
      objRes.isSuccess = false;
      objRes.newId = -1;
      sendProgress = null;
      receiveProgress = null;
    }
    return objRes;
  }

#example end

Answer 1

You must use Future, await and async which continues the task of streams in background thread while the UI of your application works smoothly.