Bastos's avatar

Updated image does not show correctly

Hello there, I'll need your help because when I display an image that I upload, it show a white square. I have a form that I use for a profil picture, It's working, I can upload the picture, BUT it show me a white square instead of the photo. That's html code :

                <img src="{{Auth::user()->images}}"/>
                <p>{{Auth::user()->firstName}} {{Auth::user()->lastName}}</p>
                <a href="{{ url('/my_account') }}">Mon compte</a> | <a href="{{ url('/logout') }}">Se déconnecter</a>
            </div>

And that's my ProfilePictureController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\User;
use Auth;


class ProfilePictureController extends Controller
{
    public function update(Request $request)
    {
        $request = $request->All();

            User::where('id', Auth::user()->id)
                ->update(
                    [
                        'image' => $request['image']]
                );
            return redirect()->to('/')->with(['image-changed' => 'Photo de profil modifiée !']);
        }

}

I don't know if my question was clear but ask if you need more informations. Thank you.

0 likes
10 replies
grenadecx's avatar

I'm not sure what's going on here. In your view you are calling

                <img src="{{Auth::user()->images}}"/> // images?

And then in your controller you are

User::where('id', Auth::user()->id)
                ->update(
                    [
                        'image' => $request['image']] // image?
                );

Question is, what are you storing and how do you know if the image is stored correctly? If you are attempting to store the file path, you are not really storing the file anywhere. If you are attempting to store it as a binary to the database, I'm pretty sure that's also not the correct way (especially the output would be different).

Please take a look under the documentation to get a better understanding of uploading files using laravel: https://laravel.com/docs/5.8/filesystem#file-uploads

Bastos's avatar

@GRENADECX - I'm storing an image via a form , and I know the image is stored correctly because it appear on my database

grenadecx's avatar

If you are storing the image as a binary in the database, the output would normally be something like:

<img src="data:image/jpg;base64, {{ Auth::user()->image }}" />

the image/jpg might need to be difference depending on the uploaded file however.

But I'm still not convinced on how the image is actually stored. If the image is stored as a filepath and the actual file in inside the storage folder then you would need to php artisan storage:link to make it available from the public folder.

grenadecx's avatar

The problem here is that you are saying the image is successfully stored.

User::where('id', Auth::user()->id)
                ->update(
                    [
                        'image' => $request['image']]
                );

This piece of code is odd. Because you take the image object which is a (UploadedFile class) from laravel and inserts directly into the image column in the user table. What structure is that column?

I don't see that UploadedFile class would have any magic functions such as __toString that would convert into into a binary if you would use it as you do. Therefor I'm not sure what you have stored.

Without additional information such as column structure, picture of the data stored, it's hard to help you any further.

Bastos's avatar

I would not say that the image is successfully stored, I just thaught is was but I'm clearly wrong ahah. You want to know the structure of the image column ?

grenadecx's avatar

That would help. It would also help to know how you want the image stored. Is the goal to have it stored in the database as a binary image or do you want to store the file on disk and just store the filepath in the database as reference?

If the second part is true, you should take a look here: https://laravel.com/docs/5.8/requests#storing-uploaded-files

They show how to store it to disk, and then you can use the filelpath you get back and store that into the database. In a default laravel installation, laravel have a filesystem configured as "public" that points to storage/app/public folder, this folder then gets symlinked to public/storage when you run php artisan storage:link.

If you want to store stuffs to that folder, something like this:

$path = $request['image']->store('images', 'public'); // First argument is folder and second is disk

// Now you have the $path and this could be stored in database as a string
$user = User::find(auth()->user()->id);
$user->image = $path;
$user->save();

// Now when you need to output this in the view I would do:
<img src="{{ \Storage::disk('public')->url(auth()->user()->image) }}"/>
 

Reference on using the filesystem to get urls https://laravel.com/docs/5.8/filesystem#file-urls

Now if you wanted it stored as a binary, the setup would be different. I would advise storing it as binary in database unless you really need it.

Bastos's avatar

@GRENADECX - So in my database I just created a new column, give it the name of "image" and give hime the type "longblob" that's all I did. When an Image is stored in the database, I have this in the column : "[BLOB - 14 o]" I just want people to chose a profile picture so it's better if it's stored in a database in the better way I suppose, I want to be able to call the image that the user submit multiple time.

grenadecx's avatar

I wouldn't say it's better, but it's doable. But you need to get the contents of the file and the base64 encode it.

I will show an example of how you could do it, it's untested code however.

$data = file_get_contents($request['image']->getPathName());
$base64 = base64_encode($data);

// Now you could store the base64 encoded into the binary column.

Checkout the following post for some suggestions to that, here they show how to retrieve the image type as well and store it together. Some of this needs to be converted to laravel functions but yeah. https://stackoverflow.com/questions/3967515/how-to-convert-an-image-to-base64-encoding

Bastos's avatar

Thanks for your time, I wont disturb you anymore and I will try to make this work :/ thank you

Please or to participate in this conversation.