TypeError: Cannot read property 'post' of undefined error on Angular 7 Upload file

Question

i'm new of Angular. My target is do a single uploader zip file and put in on folder. So my html code:

<div class="form-group">
          <label for="file">Choose File</label>
          <input type="file" id="file" (change)="handleFileInput($event.target.files)">
        </div>

My component.ts code:

handleFileInput(files: FileList) {
      this.fileToUpload = files.item(0);
      alert(this.fileToUpload.type + " " + this.fileToUpload.name + " " + this.fileToUpload.size / 1024);
      this.postFile(this.fileToUpload);
  }

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

on the handeFileInput i receive correctly all info about the file, the name the size ecc... But when I start the method postFile i receive this error:

ERROR TypeError: Cannot read property 'post' of undefined at ListCertificatesComponent.push../src/app/list-certificates/list-certificates.component.ts.ListCertificatesComponent.postFile (list-certificates.component.ts:43) at ListCertificatesComponent.push../src/app/list-certificates/list-certificates.component.ts.ListCertificatesComponent.handleFileInput (list-certificates.component.ts:34) at Object.eval [as handleEvent] (ListCertificatesComponent.html:46) at handleEvent (core.js:21673) at callWithDebugContext (core.js:22767) at Object.debugHandleEvent [as handleEvent] (core.js:22470) at dispatchEvent (core.js:19122) at core.js:19569 at HTMLInputElement. (platform-browser.js:993) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

I've trying to insert but without success:

import { Http} from '@angular/http';

Thanks for help

Answer 1

inject the HttpClient to the constructor instead of using httpClient: any;

import { HttpClient} from '@angular/common/http';
import {map, catchError} from 'rxjs/Operators';

constructor(
    private httpClient: HttpClient, 
)
postFile(fileToUpload: File): Observable<boolean> {

  return this.httpClient
    .post(endpoint, formData, { headers: "yourHeadersConfig" })
    .pipe (
       map(() => { return true; })
       catchError((e) => this.handleError(e))
     );

}

Answer 2

You are using HttpClient the wrong way.

Angular - HttpClientModule

First you will need to import HttpClientModule in app.module.ts .

import { HttpClientModule } from '@angular/common/http';

You need to import and inject HttpClient in service.

import { HttpClient} from '@angular/common/http';

constructor(private httpClient: HttpClient) {}

postFile(fileToUpload: File): Observable<boolean> {
  const endpoint = 'your-destination-url';
  const formData: FormData = new FormData();
  formData.append('fileKey', fileToUpload, fileToUpload.name);
    return this.httpClient
        .post(endpoint, formData, { headers: "yourHeadersConfig" })
        .subscribe((response: any) => { console.log('Response', response); })
        .catch((e) => this.handleError(e));
}

Please refer following link for more info.

Angular - HttpClientModule