0

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.

0 Answers0