File upload in Angular5

Question

I am trying to upload one or more than one files in my web application. I have tried with the code and error arising from vData.service.ts file

Error: property 'yoursHeadersConfig' does not exist on VDataservice
property 'catchError' does not exist on 'observable'
property 'HandleError' does not exist on 'VDataservice'

Can you let me know how to resolve the issue and provide an idea for multiple file upload in the web application? I have provided entire relevant code for the issue.

Gist links:
ad.component.html: https://gist.github.com/aarivalagan/ac15e8e2c6f77d0687c01a70e18bca6b ad:component.ts: https://gist.github.com/aarivalagan/a9c1d22c1d6056da624f0968fb6cd59c vData.service.ts: https://gist.github.com/aarivalagan/8bfbe47ef8cf0dac267374a8f0ef5b0f

code: ad.component.html

<div class="form-group col-sm-12">
        <label for="usr">Choose file to Upload </label>
        <input type="file" multiple formControlName="file" class="form-control" id="file" (change)="handleFileInput($event.target.files)" accept=".pdf,.docx" required>
      </div>

ad.component.ts

handleFileInput(files: FileList) {
        this.fileToUpload = files.item(0);
    }
    uploadFileToActivity() {
        this.fileUploadService.postFile(this.fileToUpload).subscribe(data => {
          // do something, if upload success
          }, error => {
            console.log(error);
          });
      }

vData.service.ts

postFile(fileToUpload: File): Observable<boolean> {
        const endpoint = 'your-destination-url';
        const formData: FormData = new FormData();
        formData.append('fileKey', fileToUpload, fileToUpload.name);
        return this.http
          .post(endpoint, formData, { headers: this.yourHeadersConfig })
          .map(() => { return true; })
          .catchError((e) => this.handleError(e));
          }

Answer 1

For catchError use pipe operator

property 'catchError' does not exist on 'observable'

  postFile(fileToUpload: File): Observable<boolean> {
    const endpoint = 'your-destination-url';
    const formData: FormData = new FormData();
    formData.append('fileKey', fileToUpload, fileToUpload.name);
    return this.http
      .post(endpoint, formData, { headers: this.yourHeadersConfig })
       .pipe(map(() => { return true; }),
             catchError((e) => this.handleError(e)));
   }

---

Error: property 'yoursHeadersConfig' does not exist on VDataservice

property 'HandleError' does not exist on 'VDataservice'

You havent defined these properties in VDataservice , so you can't call those methods using this .

You can try adding below method into VDataservice file:

HandleError(error){
   // write your logic to handle error here
}