Gabotronix's avatar

Can't access uploaded images in the browser

Hi, I'm making an admin panel wich lets you upload and visualize each entry you create, I'm uploading images via AJAX into the following folder:

C:\xampp\htdocs\Restaurante1\storage\app\public\uploads

Problem is when I append the data into my table the images are not visible since they are not in the public directory, this is what they look like after I print the values with JQuery:

 background-image:url(storage/app/public/uploads/jDPEGL.png); 

I tried making a symbolic link with php artisan storage:link but it's not working.

Any idea how I can fix this?

This is the controller methos wher I store the entries:

 public function store(StoreSlider $request)
    {
        
        $uploadFile = $request->file('image');
        
        //generate random filename and append original extension (eg: asddasada.jpg, asddasada.png)
        $filename = str_random(6).'.'.$uploadFile->extension();

        // storing path (Change it to your desired path in public folder)
        //$path = 'img/uploads/';

        // Move file to public filder
        $uploadFile->storeAs('uploads', $filename);
        
        
        $slider = new Slider();
        $slider->title = $request->title;
        $slider->body = $request->body;
        $slider->image = 'storage/app/public/uploads/'.$filename; // So that you can access image by url($slider->image);
        $slider->isVisible = $request->isVisible;
        $slider->save();
        
        return response()->json([
        
            'success' => 'Diapositiva guardada correctamente',
            'slider' => $slider,
        ]);
    }

and my filesystems config file:

eturn [

    /*
    |--------------------------------------------------------------------------
    | Default Filesystem Disk
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default filesystem disk that should be used
    | by the framework. The "local" disk, as well as a variety of cloud
    | based disks are available to your application. Just store away!
    |
    */

    'default' => env('FILESYSTEM_DRIVER', 'public'),

    /*
    |--------------------------------------------------------------------------
    | Default Cloud Filesystem Disk
    |--------------------------------------------------------------------------
    |
    | Many applications store files both locally and in the cloud. For this
    | reason, you may specify a default "cloud" driver here. This driver
    | will be bound as the Cloud disk implementation in the container.
    |
    */

    'cloud' => env('FILESYSTEM_CLOUD', 's3'),

    /*
    |--------------------------------------------------------------------------
    | Filesystem Disks
    |--------------------------------------------------------------------------
    |
    | Here you may configure as many filesystem "disks" as you wish, and you
    | may even configure multiple disks of the same driver. Defaults have
    | been setup for each driver as an example of the required options.
    |
    | Supported Drivers: "local", "ftp", "sftp", "s3", "rackspace"
    |
    */

    'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
        ],

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
        ],

        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
        ],

    ],

];

0 likes
4 replies
Cronix's avatar
Cronix
Best Answer
Level 67

What OS are you using? artisan storage:link should work, unless you're on windows. If you can't get storage:link to work, then you should just upload them to the main /public dir (personally I'd put the in a S3 bucket though).

You can just change the disk to use the public_path() instead of storage_path()

'public' => [
            'driver' => 'local',
            'root' => public_path(),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
        ],

and save the url like

$slider->image = '/uploads/'.$filename;

Then you could just do

<img src="{{ $slider->image }}">

and assets would be like

 background-image:url(/uploads/jDPEGL.png); 

Please or to participate in this conversation.