Laravel With Wasabi

Prev Next

Laravel is validated for use with Wasabi.  To use this product with Wasabi, follow the instructions below.

  1. Set up Wasabi account and create bucket as described here.

  2. Create IAM user with appropriate permissions attached to the user for performing required action(s). Policy can be generated using tools such as AWS Policy Generator 

  3. Create API keys for your user using the console, and save this credential file so you can later use the API keys in the code

  4. Install Composer using the CLI as described How to install Composer for Linux, Mac, and Windows + best practices. 

  5. Create a new Laravel Project using the following command, and you will receive the following output on the terminal once this is successfully created

    composer create-project laravel/laravel 
    

    Screen_Shot_2019-10-30_at_4.23.35_AM.png

  6. Go inside your project using cd command, and you will see the project files inside

    Screen_Shot_2019-10-30_at_4.28.00_AM.png

  7. Edit certain files inside this project to make this work with S3 style storage. You can use any editor (for example, vim or nano) or an IDE (for example, Atom or Visual Studio Code) to easily search for and edit them.

    Once you have the framework open in an IDE, create a new PHP file in resources/views named fileUpload.blade.php.

    Note: Wasabi recommends using the same name for the test as the name you referenced in other files.

    The hierarchy would appear as follows.  

    Screen_Shot_2019-10-30_at_4.35.28_AM.png

  8. Paste the code below in the fileUpload.blade.php file.

    @extends('layouts.app')
    
    @section('content')
    <div class="container">
     <div class="row justify-content-center">
     <div class="col-md-8">
     <div class="card">
     <div class="card-header">File Upload</div>
    
    <div class="card-body">
     <form action="{{ route('upload') }}" method="post" enctype="multipart/form-data">
     @csrf
     <input type="file" name="file" class="form-control">
     <input type="submit" class="btn btn-primary">
     </form>
     </div>
     </div>
     </div>
     </div>
    </div>
    @endsection
  9. Go to routes and the web.php file. Replace the file with the following code.

    
    Route::get('/', function () {
     return view('fileUpload');
    });
    
    Route::post('upload',function(){
     request()->file('file')->store(
     'my-file',
     'Wasabi'
     );
    
    })->name('upload');
    
    Auth::routes();
    
    Route::get('/home', 'HomeController@index')->name('home');

    Note: The directory in this example my-file, and your files will be uploaded into it. Wasabi is being used as the driver, which you will configure later in filesystems.php to specify your custom driver for passing user input.

  10. Go to the vendor and the ENV file. Replace the file with the following code.

    NOTE: Make sure to use your correct Access key, Secret Access key, Wasabi bucket region, Wasabi Bucket Name, Wasabi Region URL

    APP_NAME=Laravel
    APP_ENV=local
    APP_KEY=base64:ZBWX+Pgx8ABy8CThdSi9ixRCyQmKQ1iWDsv1TSCMBUM=
    APP_DEBUG=true
    APP_URL=http://localhost
    
    LOG_CHANNEL=stack
    
    DB_CONNECTION=mysql
    DB_HOST=127.0.0.1
    DB_PORT=3306
    DB_DATABASE=laravel
    DB_USERNAME=root
    DB_PASSWORD=
    
    BROADCAST_DRIVER=log
    CACHE_DRIVER=file
    QUEUE_CONNECTION=sync
    SESSION_DRIVER=file
    SESSION_LIFETIME=120
    
    REDIS_HOST=127.0.0.1
    REDIS_PASSWORD=null
    REDIS_PORT=6379
    
    MAIL_DRIVER=smtp
    MAIL_HOST=smtp.mailtrap.io
    MAIL_PORT=2525
    MAIL_USERNAME=null
    MAIL_PASSWORD=null
    MAIL_ENCRYPTION=null
    
    AWS_ACCESS_KEY_ID=
    AWS_SECRET_ACCESS_KEY=
    AWS_DEFAULT_REGION=us-east-1
    AWS_BUCKET=
    
    PUSHER_APP_ID=
    PUSHER_APP_KEY=
    PUSHER_APP_SECRET=
    PUSHER_APP_CLUSTER=mt1
    
    MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
    MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
    
    
    WAS_ACCESS_KEY_ID=XXXXXXXXXXXXXXXXXXXX
    WAS_SECRET_ACCESS_KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    WAS_DEFAULT_REGION=us-east-1
    WAS_BUCKET=Bucket-Name
    WAS_URL=s3.wasabisys.com

    Note that this example uses Wasabi’s us-east-1 storage region. To use other Wasabi storage regions, please use the appropriate Wasabi service URL as described in  Service URLs for Wasabi's Storage Regions.

  11. Now you need to create a new driver as s3 has amazonaws.com hardcoded in the library. Go to config, then "filesystems.php" and replace it with the following code 

    
    return [
    
    'default' => env('FILESYSTEM_DRIVER', 'local'),
    
    'cloud' => env('FILESYSTEM_CLOUD', 's3'),
    
    'disks' => [
    
    'local' => [
     'driver' => 'local',
     'root' => storage_path('app'),
     ],
    
    'public' => [
     'driver' => 'local',
     'root' => storage_path('app/public'),
     'url' => env('APP_URL').'/storage',
     'visibility' => 'public',
     ],
    
    
     'Wasabi' => [
     'driver' => 's3',
     'key' => env('WAS_ACCESS_KEY_ID'),
     'secret' => env('WAS_SECRET_ACCESS_KEY'),
     'region' => env('WAS_DEFAULT_REGION'),
     'bucket' => env('WAS_BUCKET'),
     'endpoint' => 'https://s3.wasabisys.com'
     ],
    
    ],
    
    ];

    As the Wasabi/S3 driver is not the default driver for uploading in Laravel, we need a Composer Package to make this work. You can get this package on the Laravel website, as shown below.

    Screen_Shot_2019-10-30_at_5.11.08_AM.png

  12. Now, on the CLI, go inside your Laravel project and type the following two commands:

    php artisan make:auth
    composer require league/flysystem-aws-s3-v3

    Output

    Screen_Shot_2019-10-30_at_5.17.28_AM.png

  13. Run your code using the following command, and the server will start listening on port 8000.

    php artisan serve

    Output:

    Screen_Shot_2019-10-30_at_5.18.52_AM.png

  14. On the browser, type http://127.0.0.1:8000 , and you will be prompted to upload files to your Wasabi Bucket, and once submitted, your files will be visible inside bucket.

    Screen_Shot_2019-10-30_at_5.23.01_AM.png

    mceclip0.png