Bloc: Get Upload and Download status

Created on 27 May 2020  ·  17Comments  ·  Source: felangel/bloc

Describe the bug
A clear and concise description of what the bug is.
Used Package - Dio, Bloc, Flutter_Bloc
Issue - To Get current upload and download status/value
I'm using DIo package and need to get current upload and download status/value during download the file from server or upload single/multiple file (Multipart) to server. Can you tell me how to work with your package and get it because it's urgent and publish the production app of my organization. I need your help, if it's possible then please publish/give us to one example regarding it.
Additional context
Add any other context about the problem here.

question
Source
picture visual-velocity

Most helpful comment

Hi @visual-velocity 👋

You can use dio.download(onReceiveProgress: ...) to achieve this.

In your http client layer have a request around the lines of:

typedef DownloadPercentageChanged = void Function(double percentage);

Future downloadFile(
    DownloadPercentageChanged onDownloadPercentageChanged,
  ) {
    return _httpClient.download('download path', 'save path',
        onReceiveProgress: (received, total) {
      onDownloadPercentageChanged?.call((received / total) * 100);
    });
  }

You'd expose this call through a repository and consume it in your bloc where you'd end up doing something like:

if (event is DownloadFileRequested) {
  await _repository.downloadFile(onDownloadPercentageChanged: (percentage) => add(FileDownloadPercentageChanged(percentage)));
...
}

if (event is FileDownloadPercentageChanged) {
  yield state.copyWith(downloadPercentageCompleted: event.percentage);
  ...
}

Hope this gives you a starting point 👍

picture narcodico on 27 May 2020
❤3 👍3

All 17 comments

Hi @visual-velocity 👋

You can use dio.download(onReceiveProgress: ...) to achieve this.

In your http client layer have a request around the lines of:

typedef DownloadPercentageChanged = void Function(double percentage);

Future downloadFile(
    DownloadPercentageChanged onDownloadPercentageChanged,
  ) {
    return _httpClient.download('download path', 'save path',
        onReceiveProgress: (received, total) {
      onDownloadPercentageChanged?.call((received / total) * 100);
    });
  }

You'd expose this call through a repository and consume it in your bloc where you'd end up doing something like:

if (event is DownloadFileRequested) {
  await _repository.downloadFile(onDownloadPercentageChanged: (percentage) => add(FileDownloadPercentageChanged(percentage)));
...
}

if (event is FileDownloadPercentageChanged) {
  yield state.copyWith(downloadPercentageCompleted: event.percentage);
  ...
}

Hope this gives you a starting point 👍

narcodico picture narcodico on 27 May 2020
❤3 👍3

Can you suggest me how to handle this code?. Please give us suggestion or sample
if (event is FileDownloadPercentageChanged) {

yield state.copyWith(downloadPercentageCompleted: event.percentage); //don't know how to handle it

...

}

visual-velocity picture visual-velocity on 28 May 2020

That code goes into mapEventToState. downloadPercentageCompleted is a field on the bloc state that you'll be using to build some widget to show the progress on the UI or whatever your requirements might be.

narcodico picture narcodico on 28 May 2020

I'm writing this code, can you suggest to us,i am handling this code. Is it
correct or not correct?, because i never used copyWith before your response.

if(event is FileUploadPercentageChangedEvent){

*FileUploadPercentageChangedState *currentState=state;

yield currentState.copyWith(percentage: event.percentage);

}

class FileUploadPercentageChangedEvent *extends *SampleEvent{

final *double *percentage;

FileUploadPercentageChangedEvent({this.percentage});

*FileUploadPercentageChangedEvent *copyWith({

*double *percentage,

}) {

return new FileUploadPercentageChangedEvent(

  percentage: percentage ?? this.percentage,

);

}

@override

// TODO: implement props

List<Object> get props => [percentage];

}

class FileUploadPercentageChangedState *extends *SampleState {

final *double *percentage;

FileUploadPercentageChangedState ({this.percentage});

FileUploadPercentageChangedState copyWith({

*double *percentage,

}) {

return new FileUploadPercentageChangedState (

  percentage: percentage ?? this.percentage,

);

}

@override

// TODO: implement props

List<Object> get props => [percentage];

}

On Thu, May 28, 2020 at 8:28 PM Rolly Peres notifications@github.com
wrote:

That code goes into mapEventToState. downloadPercentageCompleted is a
field on the bloc state that you'll be using to build some widget to show
the progress on the UI or whatever your requirements might be.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/felangel/bloc/issues/1218#issuecomment-635404040, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/APGW34WZUE4GMQ4PNHEKD6TRTZ32JANCNFSM4NL45ECQ
.

visual-velocity picture visual-velocity on 28 May 2020
  • you could use equatable with your event/state.
  • get the snapshot of the currentState right at the beginning of the mapEventToState.
  • you don't need copyWith on event classes.
narcodico picture narcodico on 28 May 2020

@RollyPeres .Thank you so much for suggestion and feedback.
I have already extends equatable inside event/state class .like
@immutable
abstract class SampleState extends Equatable {
const SampleState();

@override
List get props => [];
}

@immutable
abstract class SampleEvent extends Equatable {
const SampleEvent();

@override
List get props => [];
}

Can you help me by telling me how can we reuse a previous state.

visual-velocity picture visual-velocity on 28 May 2020
👍1

copyWith is used for that, for example yield currentState.copyWith(percentage: event.percentage);

narcodico picture narcodico on 28 May 2020
👍1

As always, thanks for taking the time to answer @RollyPeres 🙏
@visual-velocity closing this for now but feel free to comment with additional questions and I'm happy to continue the conversation 👍

felangel picture felangel on 28 May 2020

Let me check and add the code inside production app then i inform to you(@felangel and @RollyPeres )

visual-velocity picture visual-velocity on 28 May 2020

Hi @felangel and @RollyPeres
class UploadProfileImageEvent extends SampleEvent{
final File filePath;
final String fileName;
UploadProfileImageEvent({this.filePath, this.fileName});

@override
// TODO: implement props
List get props => [filePath,fileName];
}

class ProfileImageFileUploadPercentageChangedEvent extends SampleEvent{
final double percentage;

ProfileImageFileUploadPercentageChangedEvent({this.percentage});

@override
// TODO: implement props
List get props => [percentage];
}

class UploadProfileImageState extends SampleState{
final File filePath;
final String fileName;
UploadProfileImageState({this.filePath, this.fileName});

@override
// TODO: implement props
List get props => [filePath,fileName];
}

class ProfileImageFileUploadPercentageChangedState extends SampleState{
final double percentage;

ProfileImageFileUploadPercentageChangedState({this.percentage});

@override
// TODO: implement props
List get props => [percentage];
}

Repo call

Future> uploadProfileImage({String endPoint = UPLOAD_PROFILE_IMAGE, OnUploadProgressCallback onUploadProgress,String filePath,String fileName}) async {
NETWORK_STATUS network_status = await networkConnectivityStatus();
if (network_status == NETWORK_STATUS.CONNECTED) {
try {
FormData formData = FormData.fromMap({
"file": await MultipartFile.fromFile("$filePath",filename: "$fileName"),
});
response = await client.post("${endPoint}", //<-- client is Dio
data: await formData,
onSendProgress: (received,total){
if (total != -1) {
onUploadProgress?.call((received / total) * 100);
}
},
);
if (response.statusCode == SUCCESS) {
return Right(ModelName.fromJson(response.data));
}
} on DioError catch (e) {
return Left(e);
} catch (e) { return Left(e);
}
return await Future.delayed(Duration(microseconds: 1));
}

Bloc Code

if(event is UploadProfileImageEvent){
Either res = await repository.uploadProfileImage(filePath: event.filePath.path,fileName: event?.fileName,,onUploadProgress: (result)=>add(
ProfileImageFileUploadPercentageChangedEvent(percentage: result)
));

  yield* res.fold(
        (failure) async* {
         yield ImageUploadFailedState(failedReason: "Image upload failed");

    },
        (payload) async* {

          yield ImageUploadSuccessState(successMessage: "The profile image has been uploaded successfully.");
    },
  );
}

if(event is ProfileImageFileUploadPercentageChangedEvent){
if(currentState is ProfileImageFileUploadPercentageChangedState){
yield currentState.copyWith(percentage: event.percentage);
}else{
yield ProfileImageFileUploadPercentageChangedState(percentage: event.percentage);
}
//yield ProfileImageFileUploadPercentageChangedState(percentage: event.percentage);
}

visual-velocity picture visual-velocity on 29 May 2020

In the Above code, I am getting upload status(ProfileImageFileUploadPercentageChangedState) only once and I am not getting either the image upload success status (ImageUploadSuccessState) or the image upload failed status (ImageUploadFailedState), @felangel and @RollyPeres can you suggest us where am i wrong,please rectify our code and help me, because it's urgent.

visual-velocity picture visual-velocity on 29 May 2020

@visual-velocity please share a full sample repo that I can run locally. Thanks 👍

narcodico picture narcodico on 29 May 2020

Sorry @RollyPeres I'm not able to share full code due to my company protocol. I can share only sample. If you find any trouble tell me how can i help you

visual-velocity picture visual-velocity on 29 May 2020

Can you please create a small sample app that reproduces your issue ? It would be easier to help you if I see your complete approach. Thanks 👍

narcodico picture narcodico on 29 May 2020

As per last statement i understand what are you telling but due to not enough time i can't create sample app. I have shared to you my approach where i shared my event, state, bloc and repo everything. My agenda is i want to upload user profile image but I can't share the company endpoint due to protocol. Uploading process is working fine but i'm not able to get either the image upload success status (ImageUploadSuccessState) or the image upload failed status (ImageUploadFailedState), from repo. Which has already mentioned

visual-velocity picture visual-velocity on 29 May 2020

I can't really tell what's wrong in your code as long as I can't run it locally; that is precisely why I asked you to create a mock sample app.

You could have a problem when posting your data or the response status might not be success but also not an error. Exclude these scenarios and if you're still having issues consider joining bloc's discord channel and shoot me a private message and I'm willing to set up a meeting to have a look at your implementation. 👍

narcodico picture narcodico on 29 May 2020

Sure.

visual-velocity picture visual-velocity on 29 May 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

nerder picture nerder  ·  3Comments
shawnchan2014 picture shawnchan2014  ·  3Comments
RobPFarley picture RobPFarley  ·  3Comments
craiglabenz picture craiglabenz  ·  3Comments
nhwilly picture nhwilly  ·  3Comments