Flutter Monitor FileUpload progress using the http package

Question

I have been using the following code to upload files on my server as it is doing the job but i want to monitor the Upload Progress Percentage during the opration and Update the UI accordingly to reflect the prgress to the user

uploadFile({File imageFile, String refCode}) async {
    // open a bytestream
    var stream =
        new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
    // get file length
    var length = await imageFile.length();

    // string to uri
    var uri = Uri.parse(
        'http://-------------/api/FilesUploadB/?refCode=$refCode');

    // create multipart request
    var request = new http.MultipartRequest("POST", uri);

    // multipart that takes file
    var multipartFile = new http.MultipartFile('file', stream, length,
        filename: basename(imageFile.path));

    // add file to multipart
    request.files.add(multipartFile);

    // send
    var response = await request.send();

    // listen for response
    response.stream.transform(utf8.decoder).listen((value) {
      print(value);
    });

    //return response.
  }

NOTE that the value in the listen is getting me the final return from the WebAPI on the server. how to achieve that?

Answer 1

Take a look at this example on GitHub. It demonstrates how you can access the current upload progress of your file.