Filament•10mo ago

AWS S3 with Filament Laravel

I need help resolving a bug in my configuration. I want my panel to store files on AWS S3 instead of saving files locally. I already have the credentials and I managed to get the preview saved on my AWS S3, as it is being saved in the "livewire-tmp" folder. Therefore, I think the problem is not with credentials but with some bad configuration on my part within the filament. The error appears when I click save, see the message:

Unable to check existence for: livewire-tmp/Lv9otp3WPg8ga2o3zJ3OFuErwjZxDy-metabG9nby1jb21wbGV0ZWQtMi5qcGcucG5n-.png

Unable to check existence for: livewire-tmp/Lv9otp3WPg8ga2o3zJ3OFuErwjZxDy-metabG9nby1jb21wbGV0ZWQtMi5qcGcucG5n-.png

But when I access my AWS S3 bucket, I can see this file inside the livewire-tmp folder. (I attached a print)! Link to the error flareapp: https://flareapp.io/share/omwV9zZ5

Flare

Unable to check existence for: livewire-tmp/Lv9otp3WPg8ga2o3zJ3OFuErwjZxDy-metabG9nby1jb21wbGV0ZWQtMi5qcGcucG5n-.png - The error occurred at http://127.0.0.1:8000/artificial-intelligence/11/treinamentos/create

5 Replies

mysterOP•10mo ago

#I'll put the configuration snippets in the files here ~filesystem.php

'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'),
            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
            'throw' => false,
        ],

'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'),
            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
            'throw' => false,
        ],

~livewire.php

'temporary_file_upload' => [
        'disk' => "s3",        // Example: 'local', 's3'              | Default: 'default'
        'rules' => null,       // Example: ['file', 'mimes:png,jpg']  | Default: ['required', 'file', 'max:12288'] (12MB)
        'directory' => null,   // Example: 'tmp'                      | Default: 'livewire-tmp'
        'middleware' => null,  // Example: 'throttle:5,1'             | Default: 'throttle:60,1'
        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs...
            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
            'mov', 'avi', 'wmv', 'mp3', 'm4a',
            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
        ],
        'max_upload_time' => 5, // Max duration (in minutes) before an upload is invalidated...
    ],

'temporary_file_upload' => [
        'disk' => "s3",        // Example: 'local', 's3'              | Default: 'default'
        'rules' => null,       // Example: ['file', 'mimes:png,jpg']  | Default: ['required', 'file', 'max:12288'] (12MB)
        'directory' => null,   // Example: 'tmp'                      | Default: 'livewire-tmp'
        'middleware' => null,  // Example: 'throttle:5,1'             | Default: 'throttle:60,1'
        'preview_mimes' => [   // Supported file types for temporary pre-signed file URLs...
            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
            'mov', 'avi', 'wmv', 'mp3', 'm4a',
            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
        ],
        'max_upload_time' => 5, // Max duration (in minutes) before an upload is invalidated...
    ],

~.env

FILESYSTEM_DISK=s3
FILAMENT_FILESYSTEM_DISK=s3
APP_URL=http://127.0.0.1:8000
AWS_ACCESS_KEY_ID=AKIAS...
AWS_SECRET_ACCESS_KEY=B/AOPA...
AWS_DEFAULT_REGION=sa-east-1
AWS_BUCKET=vistu...
AWS_USE_PATH_STYLE_ENDPOINT=false
AWS_URL=https://(vistu...).s3.sa-east-1.amazonaws.com/livewire-tmp/

FILESYSTEM_DISK=s3
FILAMENT_FILESYSTEM_DISK=s3
APP_URL=http://127.0.0.1:8000
AWS_ACCESS_KEY_ID=AKIAS...
AWS_SECRET_ACCESS_KEY=B/AOPA...
AWS_DEFAULT_REGION=sa-east-1
AWS_BUCKET=vistu...
AWS_USE_PATH_STYLE_ENDPOINT=false
AWS_URL=https://(vistu...).s3.sa-east-1.amazonaws.com/livewire-tmp/

~ImageResource

Section::make('image')
                    ->schema([
                        FileUpload::make('image_training')
                            ->disk('s3')
                            ->label('Arquivo'),
                    ]),

Section::make('image')
                    ->schema([
                        FileUpload::make('image_training')
                            ->disk('s3')
                            ->label('Arquivo'),
                    ]),

~cors.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

Comments: Bucket Access (Public) Bucket Policy (It's empty) CORS on AWS S3 (It is empty) some help?

lmtc•4mo ago

@myster did you get this resolved?

nanopanda•4mo ago

I think you need ->visibility('private') for an S3 FileUpload on a form https://discord.com/channels/883083792112300104/1271362801708961802

Shaung Bhone•4mo ago

maybe your AWS_URL is wrong here is mine

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=ap-southeast-1
AWS_BUCKET=w****bucket
AWS_URL=https://we****bucket.s3.ap-southeast-1.amazonaws.com
AWS_USE_PATH_STYLE_ENDPOINT=true

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=ap-southeast-1
AWS_BUCKET=w****bucket
AWS_URL=https://we****bucket.s3.ap-southeast-1.amazonaws.com
AWS_USE_PATH_STYLE_ENDPOINT=true

https://laravel-news.com/using-aws-s3-for-laravel-storage

lmtc•4mo ago

It ended up being object ownership causing the issue

Gaming

Programming

AWS S3 with Filament Laravel