File upload in Angular5 - html

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
}