I am trying to upload image from angular(frontend) to laravel(backend).
ANGULAR Project
product.component.html
<form [formGroup]="mediaFormGroup" (ngSubmit)="onSubmit();">
<input type="file" name="thumb_nail" (change)="onFileChange($event,'thumbnail')" />
<button type="submit" >UPLOAD</button>
</form>
product.component.ts
thumbFile: File;
onFileChange(event, imgType) {
this.thumbFile = <File>event.target.files[0];
}
onSubmit(){
const formData = new FormData();
formData.append('thumbimage', this.thumbFile);
this.uploadService.upload(formData).subscribe(
data => {
return data;
});
}
upload.service.ts
public upload(data) {
const headers = new HttpHeaders();
headers.append('Content-Type', 'multipart/form-data');
headers.append('Accept', 'application/json');
return this.httpClient.post<any>(`${this.SERVER_URL}/user/uploadImage`,data, {
headers: headers
})
.pipe(map((res) => {
return res;
}));
}
Laravel Project
api.php
Route::post('user/uploadImage', "User\UserController@uploadImage");
UserController.php
public static function uploadImage(Request $request){
//return $request->file(); // null
//return $request; //null
}
In laravel request is getting as null. What is wrong with this code? I think someone can help me..
