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: 
option 2 for me because, for what I have read from other articles, converting the image to blob would make the process slower. unlike on storing the path you just retrieve it's path string to the database and retrieve much faster. 

here are other related articles to that **[Storing Images in DB - Yea or Nay?](https://stackoverflow.com/questions/3748/storing-images-in-db-yea-or-nay)**
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.