In angular I use ngx-dropzone to upload images. So far so good.
To select an image I use this :
onSelect(event): void {
this.files.push(...event.addedFiles);
}
And then, to upload and save my images on disk, I use this function :
uploadFile() {
const formData = new FormData();
for (let i = 0; i < this.files.length; i++) {
formData.append('file[]', this.files[i]);
}
this.httpService.post<any>('http://localhost:8080/upload-photo', formData)
.subscribe(res => {
console.log('result :', res)
});
}
This works.
I think that the problem is on the back side, I use php with slim 3.
Here is the code that I use to process the upload :
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: multipart/form-data; charset=UTF-8");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
$app->post('/upload-photo', function (\Slim\Http\Request $request, \Slim\Http\Response $response, array $args) {
$folderPath = "upload/";
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
foreach ($request->fileSource as $key => $value) {
$image_parts = explode(";base64,", $value);
$image_type_aux = explode("image/", $image_parts[0]);
$image_type = $image_type_aux[1];
$image_base64 = base64_decode($image_parts[1]);
$file = $folderPath . uniqid() . '.' . $image_type;
file_put_contents($file, $image_base64);
}
});
This doesn't work, the file is not save on the folder 'upload' and the return from the post call is empty, there is no error.
I am also very annoyed because I do not know how to debug what is happening on the back side. I know postman but I don't know how to send it the data which is actually sent from the front.
Thank you very much for your help.