How to return response from rest api when uploading media file in an Angular 8 app?

Question

I'm using a file upload example from the following link: enter link description here

You can see in the example that the server need to return status "progress" in order to see the progress bar.

What I have in my rest api at the moment:

@POST
    @Path("Trip/{tripId}")
    @Consumes("multipart/form-data")
    @Produces("application/json")
    public Response  uploadTripVideo(@PathParam("tripId") Integer tripId, MultipartFormDataInput input){

        String fileName = "";       
        Map<String, InputPart> uploadForm = input.getFormData();
        InputPart inputPart = uploadForm.get("uploadedFile");
         try {

            MultivaluedMap<String, String> header = inputPart.getHeaders();
            fileName = getFileName(header);

            //convert the uploaded file to inputstream
            InputStream inputStream = inputPart.getBody(InputStream.class,null);

            byte [] bytes = IOUtils.toByteArray(inputStream);               
            //constructs upload file path
            fileName = "C:\\Users\\name\\Documents\\myfolder\\trip\\"+ tripId + "\\video\\" + fileName;             
            writeFile(bytes,fileName);                      

          } catch (IOException e) {
            e.printStackTrace();
          } 
        return Response.status(200)
            .entity("uploadFile is called, Uploaded file name : " + fileName).build();
    }

here is my service call:

uploadVideo(url: string, file: File): Observable<any> {
    let formData = new FormData();    
    formData.append('uploadedFile', file, file.name);     
    return this.http.post<any>(this.baseUrl + url, formData, {      
      reportProgress: true,
      observe: 'events'
    }).pipe(           
        map(event => this.getEventMessage(event, formData)),
        catchError(this.handleError)
      );        
  }

Any idea how to return a response that should indicate on the progress? The probrem is that the event is not coming when calling the service, here is the code where I subscribe to the post request:

this.upload.uploadVideo(url, this.videoToUpload)
      .subscribe(
        (event) => {    
          console.log(event);
          if (event.type === HttpEventType.DownloadProgress) {
              console.log("download progress");
          }
          if (event.type === HttpEventType.Response) {
              console.log("donwload completed");
          }
          this.videoUpload = event;              
            //console.log("POST call successful value returned in body", val);          
        },
        err => {
          this.videoUploadError = err;
            //console.log("POST call in error", response);                        
        },
        () => {
            //console.log("The POST observable is now completed.");                      
        });

What I'm getting is error in the console:

Backend returned code undefined, body was: undefined

UPDATE I've removed the following code and things start moving:

//.pipe(           
    //     map(event => this.getEventMessage(event, formData)),
    //     catchError(this.handleError)
    //   ); 

Answer 1

You can easily do this by setting the reportProgress flag to true in your POST HttpRequest .

The key here is to create a HttpRequest and pasing it to the HttpClient.request method rather than directly calling the post() method.

Once subscribed to the request, you need to check for the event type as

event.type == HttpEventType.UploadProgress

to perform the logic to show loading percentage as

100 * event.loaded / event.total

and check for the completion as

event.type === HttpEventType.Response

Demo at https://stackblitz.com/edit/angular-http-post-status