Question: what is the most efficient way to keep images in mySQL database system?

1. option 1 - Converting the image to BLOB data type and keep it in a seperate column

or

1. option 2 - saving the image in a separate folder and keep the file path in a relevant database column

Answer: 
Go through Following links,

1. [What is the most efficient way to store and access images](https://stackoverflow.com/questions/4633454/what-is-the-most-efficient-way-to-store-and-access-images)
2. [What is the most efficient way to store and access images](https://stackoverflow.com/questions/4633454/what-is-the-most-efficient-way-to-store-and-access-images)
3. [The most efficient way to store photo reference in a database](https://stackoverflow.com/questions/19172286/the-most-efficient-way-to-store-photo-reference-in-a-database)
For larger images you should use file system but for small images like thumbnails that's how i handle it with [typeorm](https://typeorm.io)

```js
@Column({ type: "longblob" })
thumbnail: string;

```

> 
> By the way you should run this commands in a mysql console connected to that same server to avoid any package size errors
> 
> 
> 

```sh
set global net_buffer_length=1000000; 
set global max_allowed_packet=1000000000;

```

and I converted image to base64 string with built-in FileReader API

```js
// file param is coming from html input element
const reader = new FileReader();
// use try-catch because if user don't select a file it throws an error
    try {
      reader.onloadend = (e) => {
        const base64string = e.target.result;
        sendImageToServer(base64string);
        }
      }
      reader.readAsDataURL(file);
    } catch (error) {
      console.log(error);
    }

```

When you are sending thumbnail to client it converts it to a buffer object (ex. \

```json
{
   type: "Buffer", 
   data: [
     // Uint8Array
   ]
}

```

so we need to convert it base64 string again

```js
// This 'toString' function will convert buffer array to base64 string
const thumbnail = Buffer.from(recipe.thumbnail).toString();
sendDataToClient(thumbnail);

```

Then displaying image is very easy

```html
// If you're using react like me you can do it like that 
<img src={base64stringFromServer} alt="thumbnail" />
// otherwise just select img tag with query selector then set 'src' attribute to 'base64stringFromServer
// and find a better variable name then this :)

```

I think that's the best way to store images at database.