I'm trying to upload an image from an angular application with php backend, but the file arrive as null to backend.
fileUploaded(event) { // called each time file input changes
let fileList: FileList = event.target.files;
if (fileList && fileList[0]) {
let file: File = fileList[0];
var reader = new FileReader();
reader.readAsDataURL(fileList[0]); // read file as data url
this.format.File = file;
reader.onload = (ev) => { // called once readAsDataURL is completed
this.format.Picture = ev.target['result'];
}
}
}
This is the caller to the service
createFormat(){
this.format.Label = this.format.Name;
const formData = new FormData();
formData.append('formatLogo', this.format.File);
this.formatService.uploadLogo(formData).subscribe()
}
this is the service. I tried to use Content-Type also, with the same result
uploadLogo(formData){
let headers = new HttpHeaders();
headers.append('enctype', 'multipart/form-data');
headers.append('Accept', 'application/json');
let options = { headers: headers }
return this.http.post(this.formatsPath + '/uploadLogo', formData, options);
}
This is the request payload
------WebKitFormBoundaryUlyYDb5WjslMf3nw
Content-Disposition: form-data; name="formatLogo"; filename="fileName.jpg"
Content-Type: image/jpeg
------WebKitFormBoundaryUlyYDb5WjslMf3nw--
This is the server side
function uploadLogo(){
$name = $_FILES['formatLogo']['name'];
--code--
}
The server side, obviosly, have more things to do. But the simple file is empty, so it's not useful to post everything.
I can't get the mistake. :'(
Someone smarter than me can provide his help? Please
enctypefor? That does not even officially exist as a defined HTTP request header, AFAIK. You might want to tryContent-Type…?formDataobject actually contained what you expected it to?var_dumpdebug output of it.