title: How to return response from rest api when uploading media file in an Angular 8 app?
body: <p>I'm using a file upload example from the following link:
  <a href="https://www.truecodex.com/course/angular-6/file-upload-in-angular-6-7-with-progress-bar-using-web-api" rel="nofollow noreferrer">enter link description here</a></p>
  
  <p>You can see in the example that the server need to return status "progress"
  in order to see the progress bar.</p>
  
  <p>What I have in my rest api at the moment:</p>
  
  <pre><code>@POST
      @Path("Trip/{tripId}")
      @Consumes("multipart/form-data")
      @Produces("application/json")
      public Response  uploadTripVideo(@PathParam("tripId") Integer tripId, MultipartFormDataInput input){
  
          String fileName = "";       
          Map&lt;String, InputPart&gt; uploadForm = input.getFormData();
          InputPart inputPart = uploadForm.get("uploadedFile");
           try {
  
              MultivaluedMap&lt;String, String&gt; 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();
      }
  </code></pre>
  
  <p>here is my service call:</p>
  
  <pre><code>uploadVideo(url: string, file: File): Observable&lt;any&gt; {
      let formData = new FormData();    
      formData.append('uploadedFile', file, file.name);     
      return this.http.post&lt;any&gt;(this.baseUrl + url, formData, {      
        reportProgress: true,
        observe: 'events'
      }).pipe(           
          map(event =&gt; this.getEventMessage(event, formData)),
          catchError(this.handleError)
        );        
    }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>this.upload.uploadVideo(url, this.videoToUpload)
        .subscribe(
          (event) =&gt; {    
            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 =&gt; {
            this.videoUploadError = err;
              //console.log("POST call in error", response);                        
          },
          () =&gt; {
              //console.log("The POST observable is now completed.");                      
          });
  </code></pre>
  
  <p>What I'm getting is error in the console:</p>
  
  <pre><code>Backend returned code undefined, body was: undefined
  </code></pre>
  
  <p><strong>UPDATE</strong>
  I've removed the following code and things start moving:</p>
  
  <pre><code>//.pipe(           
      //     map(event =&gt; this.getEventMessage(event, formData)),
      //     catchError(this.handleError)
      //   ); 
  </code></pre>