Upload and load images from Digital Ocean using Laravel Livewire

Prerequisite

  • Must have knowledge of Laravel, Livewire
  • using Laravel 9
  • must have digital ocean account with spaces 

Create account

First of all create the digital ocean account or you have.

Download aws package for digital ocean

"league/flysystem-aws-s3-v3": "~3.0",

Edit .env file

DO_ACCESS_KEY_ID=use_access_key
DO_SECRET_ACCESS_KEY=use_secret_access_key
DO_DEFAULT_REGION=sgp1(Server region name)
DO_BUCKET=name_of_bucket
DO_ENDPOINT=endpoint_of_bucket

Edit filesystems.php file(at config folder)

'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'),
            'endpoint' => env('AWS_ENDPOINT'),
        ],
        'do' => [
            'driver' => 's3',
            'key' => env('DO_ACCESS_KEY_ID'),
            'secret' => env('DO_SECRET_ACCESS_KEY'),
            'region' => env('DO_DEFAULT_REGION'),
            'bucket' => env('DO_BUCKET'),            
            'endpoint' => env('DO_ENDPOINT'),
        ],

Create new livewire component

$this->validate([
            'photo' => 'image|max:1024', // 1MB Max
        ]);
        $name=$this->photo->storePublicly('photos', 'do');
    
        if(Storage::disk('do')->exists($name)){            
            $contents = Storage::disk('do')->url($name);
            dd($contents);
        }

Load or view images from digital ocean using livewire

<img src="{{Storage::disk('do')->url('award.jpg')}}" alt="">
© 2016 - 2022, All Rights are Reserved.