0
votes

I'm currently using ng2 file upload from valor software to perform image upload to server.

My previous code was written this way: After added a new post, the image uploader will upload the image based on the response id (which is the post Id).

this.socialPostService.addPost(postHeader).subscribe((response: PostHeader) => {
  this.pictureUploader.setOptions({
    url: this.baseUrl + 'socialphotos/post/' + response.id
  });
  this.pictureUploader.uploadAll();
}, error => {
  // this.errorService.handleError(error);
  this.errorService.handleError(error);
});

I'm learning state management and moving this to NGRX approach and i found it difficult to perform the image upload after added the post because i could not return the post id from the post adding action.

Below is the new approach im trying :

Effect to work with server and add the post.

@Effect()
    AddPost$: Observable<Action> = this.actions$.pipe(
        ofType<PostActions.AddToPost>(
            PostActions.ActionTypes.Add_To_Post
        ),
        mergeMap((action: PostActions.AddToPost) =>
            this.socialPostService.addPost(action.payload).pipe(
                map((newPost: PostHeader) =>
                        new PostActions.AddSuccess(newPost)
                ),
                catchError(err => of(new PostActions.AddFailed(err)))
            )
        )
    );

Dispatch add post action :

this.store.dispatch(new postHeaderActions.AddToPost(postHeader));
//Return post Id and perform image uploading based on that

Is there anyway to return the newly added post id from the ngrx effect so that i could perform image uploading based on that?

Thanks

1
What values are you getting if you put console.log in map of addPost? - KiraAG
Also you need to listen to PostActions.AddSuccess to call file upload. Or you need to use the selector, pick the postId and call the file upload. - KiraAG
@KiraAG Do you mean newPost: PostHeader? This is the newly added post, similar to the response: PostHeader from first approach - scholarwithfire
@KiraAG Do you mean like this? this.store.dispatch(new postHeaderActions.AddToPost(postHeader)); //Call selector to pickup postId and perform image upload - scholarwithfire
Sorry I meant, are you getting values in map of addPost ? - KiraAG

1 Answers

0
votes

You should change a little the design to better integrate the spirit of NgRx.

I suggest you to :

  • create a shared service UploadService which hold a reference to FileUploader
  • this service will listen to FileUploader events, and dispatch actions to inform store (state).
  • your view component could use FileUploader to manage drop zone for instance (or you should develop this part), but for the rest, it should interact with actions / selectors.
  • manage a little workflow, like :
    • dispatch AddNewPostHeader => NewPostHeaderCreated => UploadFiles => FilesUploaded
  • manage status flags into state, like headerAdding, fileUploading... to inform your view component of current process.

Hope my explanation is clear, and will help you.