# Upload, store in a DB and serve images with REST API

**URL:** <https://discourse.slimframework.com/t/upload-store-in-a-db-and-serve-images-with-rest-api/5120>\
**Category:** Questions\
**Created:** [February 7, 2022, 6:34pm UTC](https://discourse.slimframework.com/t/upload-store-in-a-db-and-serve-images-with-rest-api/5120 "2022-02-07T18:34:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![LaBaude](https://avatars.discourse-cdn.com/v4/letter/l/8e8cbc/32.png) [@LaBaude](https://discourse.slimframework.com/u/LaBaude)\
**Post date:** [February 7, 2022, 6:34pm UTC](https://discourse.slimframework.com/t/upload-store-in-a-db-and-serve-images-with-rest-api/5120/1 "2022-02-07T18:34:41Z")

</div>

Hi,

I have followed the Odan tutorial to create a REST API with a Mysql DB to serve data in Json format to some clients (VueJs for now).

But I need to use images in my app. I need to send it with my client to my API server, stock them and serve them to the client.  
It’s images to illustrate some object (hundreds). Object is a table of my DB with some properties.  
So i think I need to store images directly in a directory of my server and store the path in my object table.

But I don’t konw how to do that.

First I tried to serve an existent image form my server to my client (postman to try it) following the image tutorial from Odan  
But if switch this line :

```php
// Create image in memory
        $image = $this->imageManager->canvas(800, 600, '#719e40');

```

to that one :

```php
$image = $this->imageManager->make('public/foo.png');

```

I got that error :

> **Type:** Intervention\Image\Exception\NotReadableException
> 
> **Code:** 0
> 
> **Message:** Image source not readable
> 
> **File:** XXX/app-core-test/vendor/intervention/image/src/Intervention/Image/AbstractDecoder.php
> 
> **Line:** 351

So for this first part I don’t really know how to deal with that error.

And in a second part I really don’t know how to get an image form my client with the request interface and how to manage it.

Thanks for your help,  
Baudouin

---

<div class="post-metadata">

**Author:** ![odan](https://avatars.discourse-cdn.com/v4/letter/o/9de053/32.png) [@odan](https://discourse.slimframework.com/u/odan)\
**Post date:** [February 7, 2022, 7:26pm UTC](https://discourse.slimframework.com/t/upload-store-in-a-db-and-serve-images-with-rest-api/5120/2 "2022-02-07T19:26:23Z")

</div>

I think I have not covered this specific topic in my blog. This would need more explanations and examples etc.

Generally, it’s good to store the files in a directory and the filenames in the specific database table.

How you can handle file uploads is already documented in the Slim documentation: [Uploading files using POST forms](https://www.slimframework.com/docs/v4/cookbook/uploading-files.html).

Example to get all uploaded files:

```php
use Psr\Http\Message\UploadedFileInterface;
use Ramsey\Uuid\Uuid;
// ...

$uploadedFiles = $request->getUploadedFiles();

/** @var UploadedFileInterface $file */
foreach ($uploadedFiles as $file) {#
    $extension = pathinfo($file->getClientFilename(), PATHINFO_EXTENSION);
    $filename = sprintf('%s.%s', Uuid::uuid4(), $extension)
    //$contents = (string)$file->getStream();

    // Save file
    $file->moveTo('/path/to/public/img/uploads/' . $filename);

    // save filename in db
    // ...
}

```

Note that the ImageManager::make method expects an absolute (full) path to locate a file.

---

<div class="post-metadata">

**Author:** ![LaBaude](https://avatars.discourse-cdn.com/v4/letter/l/8e8cbc/32.png) [@LaBaude](https://discourse.slimframework.com/u/LaBaude)\
**Post date:** [February 13, 2022, 3:32pm UTC](https://discourse.slimframework.com/t/upload-store-in-a-db-and-serve-images-with-rest-api/5120/3 "2022-02-13T15:32:24Z")

</div>

Thanks a lot for your help !

I have a strange issue :

```auto
$extension = pathinfo($file->getClientFilename(), PATHINFO_EXTENSION);

```

This command does not work. It’s give me an empty string. I don’t now why because it’s the same line.

With more researches, I find that the `getClientFilename()` methods send (with a `var_dump()` : `string(14) \"bound sendFile\"\n\"\"`  
So it’s logical that the `pathinfo()` methods doesn’t work.

Edit :  
I have found the solution : The getClientFileName() methods doesn’t work if we had name property in the FormData javascript object.

---

<div class="post-metadata">

**Author:** ![LaBaude](https://avatars.discourse-cdn.com/v4/letter/l/8e8cbc/32.png) [@LaBaude](https://discourse.slimframework.com/u/LaBaude)\
**Post date:** [February 13, 2022, 5:41pm UTC](https://discourse.slimframework.com/t/upload-store-in-a-db-and-serve-images-with-rest-api/5120/4 "2022-02-13T17:41:52Z")

</div>

So did we need to do 2 request with to respond to send an image and datas ?  
For exemple if I have an obect like that :

```auto
{
  "objectName": "Some Object",
  "objectQuantity": 2,
  "objectPruchasePrice": 4500,
  "objectThumbnail": "filename.png"
}

```

Can I get all the data in JSON format and the image in one GET request ?  
Or I need to make 2 request, one for the data and an other for the image ?

---

<div class="post-metadata">

**Author:** ![odan](https://avatars.discourse-cdn.com/v4/letter/o/9de053/32.png) [@odan](https://discourse.slimframework.com/u/odan)\
**Post date:** [February 13, 2022, 7:36pm UTC](https://discourse.slimframework.com/t/upload-store-in-a-db-and-serve-images-with-rest-api/5120/5 "2022-02-13T19:36:20Z")

</div>

The `pathinfo` function works only for “valid” filenames. You could remove or replace all invalid characters before you use the pathinfo function. Generally, it is never very “safe” to use the client’s filename. So maybe consider a “fallback” to detect the correct extension.

You need only one request for the upload. The response from the POST (image upload) request could return a JSON object with the generated object values.