Unable to upload photo from Angular 8 to Laravel : "Call to a member function extension() on null" error

In my application : Angular 8 font end and Laravel 5.8 back end. I need to upload photo. I am following this tutorial : ACADE MIND.

My template code :

 <input  *ngIf="photoEdit" enctype="multipart/form-data" type="file" (change)="onFileChanged($event)" #fileInput>
 <button *ngIf="photoEdit" class="btn btn-xs btn-danger" (click)="onUpload()"> Save</button>
 <button class="btn btn-small btn-primary" (click)="editPhoto()">Change Photo</button>

In the below method :

public onFileChanged(event) {
    this.selectedFile = event.target.files[0];
    console.log(this.selectedFile);
  }

It is showing that file has been selected in the console log.

onUpload() method :

onUpload() {
    // this.http is the injected HttpClient
    const uploadData = new FormData();
    uploadData.append('photo', this.selectedFile,this.selectedFile.name);
    // this.http.post('http://127.0.0.1:8000/api/photo/upload', { 'photo' : this.selectedFile }, this.authService.getHeader())
    //   .subscribe(event => {
    //     console.log(event);
    //   });
    this.http.post('http://127.0.0.1:8000/api/photo/upload', uploadData, this.authService.getHeader())
      .subscribe(event => {
        console.log(event);
      });
  }

I am getting :

   error : "Call to a member function extension() on null"

Photo upload from postman is working fine. In the server, i have printed the entire request. Below is the server log :

[Tue Nov 26 07:34:27 2019] Log In
[Tue Nov 26 07:34:34 2019] POST /api/photo/upload HTTP/1.1
Accept:          application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,bn;q=0.8
Authorization:   bearereyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC8xMjcuMC4wLjE6ODAwMFwvYXBpXC9sb2dpbiIsImlhdCI6MTU3NDczMjA2NywiZXhwIjoxNTc0NzM1NjY3LCJuYmYiOjE1NzQ3MzIwNjcsImp0aSI6IlhCQVR4YnlpVG
t5dzlha3IiLCJzdWIiOjQsInBydiI6Ijg3ZTBhZjFlZjlmZDE1ODEyZmRlYzk3MTUzYTE0ZTBiMDQ3NTQ2YWEifQ.Ul7eztDS024iN2AMgzwsHUiu4R4gcQctqtHnGftYaNw
Connection:      keep-alive
Content-Length:  39015
Content-Type:    application/json
Host:            127.0.0.1:8000
Origin:          http://localhost:4200
Referer:         http://localhost:4200/profile
Sec-Fetch-Mode:  cors
Sec-Fetch-Site:  cross-site
User-Agent:      Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36

------WebKitFormBoundaryvkYLBOFceCLCopiW
Content-Disposition: form-data; name="photo"; filename="3_4_5.png"
Content-Type: image/png

Server Side function:

    public function upload(request $request)
        {
            error_log($request);
            $extension = $request->file('photo')->extension();

            if ($request->hasFile('photo')) {
                error_log("FILE 
}
$fileName = "logedUserName";
$fileName =  $fileName . "." . $extension;
            $savedPhotoName = $request->photo->storeAs('public', $fileName );
            return $savedPhotoName;
        }

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/37AIdHG
via IFTTT