boldstar's avatar

How To Save Image As Blob

So I am trying to use a blob column to store my image. However when I look in the database the data saved does not seem to look right. For example when I look at images that have been encoded to base64 they look quite long. When I check my database I only see this in the blob column.

0x433A5C55736572735C746A2E775C417070446174615C4C6F63616C5C54656D705C706870384332312E746D70

This is the method I am using to save the logo to the database

 public function uploadLogo(Request $request) {

        if (empty($request->file('file')->getRealPath())) {
            return back()->with('success','No file selected');
        }
        else {
            $account = Account::first();
            $logo = $request->file('file')->getRealPath();
            $account->logo = $logo;
            $account->save();
            return response('success');
        }
    }

But when I try to display it in vue It doesn't render anything, which makes me think that I am not saving it to the database correctly. Here is how I am trying to display it in Vue

 <img v-if="accountDetails.logo" v-bind:src="logo" />

computed

logo() {
        return `data:image/jpg;base64, ${btoa(this.accountDetails.logo)}`
      }

Any ideas?

0 likes
7 replies
boldstar's avatar
boldstar
OP
Best Answer
Level 2

Update: This seems to do the trick. I had to base64 the file contents. Also the size of the file can effect the database so need to only allow a certain size file before uploading.

$account = Account::first();
            $path = $request->file('file')->getRealPath();
            $logo = file_get_contents($path);
            $base64 = base64_encode($logo);
            $account->logo = $base64;
            $account->save();
            return response('success');
3 likes
shez1983's avatar

i have found a neat solution @boldstar which allows you to save the base64 string into the database.. as text (make sure your column is at least medium text type). then you can spit that out in your & it all works! no need for uploads....

Olawale's avatar

Pleae, what will be the column type for the image in the database?

Tray2's avatar

You should never store images in the database just the path to it on the file system. Binary object don't belong there.

The column type is blob (Binary Large Object).

1 like
BayronVazquez's avatar

Storing images in the database is not recommended for performance reasons, Having said that, you need to check several things before you can do this.

First: verify that the MySQL server configuration allows you to upload packets of maximum 16MB, to do this you must configure the option max_allowed_packet=16M, the way to configure this depends on whether you use linux or windows, search the internet for a tutorial.

Second: the data type in the table must be stored as MEDIUM_BLOB so that you can upload images up to 16 MB maximum, the data types are:

    BLOB allows maximum 64KB
    MEDIUM_BLOB allows a maximum of 16MB
    LONG_BLOB allows a maximum of 4GB

Blade Form:

<form action="{{ route('yourController.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('POST')
    <div class="row mb-4">
        <p class="instructions">
            Select the images or videos that you have of the model. It is necessary to upload at least one photo.
        </p>
        <div class="col-6">
            <label class="form-label" for="pictures">Pictures</label>
            <input type="file" name="pictures[]" multiple 
                class="form-control @error('pictures') is-invalid @enderror">
            @error('pictures')
            <div class="invalid-feedback">
                {{ $message }}
            </div>
            @enderror
        </div>
    </div>
    <div class="d-flex justify-content-end">
        <button class="btn button btn-danger mx-2" type="reset">
            Clean Form
        </button>
        <button class="btn button btn-success mx-2" type="submit">
            Save
        </button>
    </div>
</form>

Controller:

public function store(Request $request)
{
        $images = $request->file('pictures');
        $allowedfileExtension = ['jpg','png','gif','jpeg','webp'];
        foreach($images as $image)
        {
            $extension    = $image->extension();
            $hash         = hash('md5', $image->get());
            $filename     = "$hash.$extension";
            $filesize     = $image->getSize() / 1024;
            $originalName = $image->getClientOriginalName();
            try
            {
                $account = new Account;
                // .... etc. do something with the model
                $account->logo= $image->get();
                $account->save();
            }
            catch(\Illuminate\Database\QueryException $e)
            {
                // DEBUG IN CASE OF ERROR
				dd($e);
            }
        }
    	return redirect()->back();
}

Please or to participate in this conversation.