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;
}
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire