Filament•4mo ago

Error [AWS S3]: Unable to check existence for: livewire-tmp/

I'm trying to save a file directly to AWS S3. Until when I add an image it saves the temporary one in my bucket but when I click on create it gives this error. https://flareapp.io/share/4m4K29B5 I took the configuration from some people I found on the internet, see how I'm doing it. File name: cors.php

return [

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

    "AllowedMethods" => [
        "GET",
        "PUT",
        "POST",
        "DELETE"
    ],

    'allowed_origins' => ['http://127.0.0.1:8000'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => ['
        "x-amz-server-side-encryption",
        "x-amz-request-id",
        "x-amz-id-2",
        "Content-Type"
    '],

    'max_age' => 0,

    'supports_credentials' => false,

];

return [

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

    "AllowedMethods" => [
        "GET",
        "PUT",
        "POST",
        "DELETE"
    ],

    'allowed_origins' => ['http://127.0.0.1:8000'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => ['
        "x-amz-server-side-encryption",
        "x-amz-request-id",
        "x-amz-id-2",
        "Content-Type"
    '],

    'max_age' => 0,

    'supports_credentials' => false,

];

File name: .env

AWS_ACCESS_KEY_ID=AKIAS...
AWS_SECRET_ACCESS_KEY=oVZk9Q...
AWS_DEFAULT_REGION=sa-east-1
AWS_BUCKET=vistune-archive
AWS_USE_PATH_STYLE_ENDPOINT=false
AWS_URL=https://vistune-archive.s3.sa-east-1.amazonaws.com
FILAMENT_FILESYSTEM_DISK=s3
FILESYSTEM_DISK=s3

AWS_ACCESS_KEY_ID=AKIAS...
AWS_SECRET_ACCESS_KEY=oVZk9Q...
AWS_DEFAULT_REGION=sa-east-1
AWS_BUCKET=vistune-archive
AWS_USE_PATH_STYLE_ENDPOINT=false
AWS_URL=https://vistune-archive.s3.sa-east-1.amazonaws.com
FILAMENT_FILESYSTEM_DISK=s3
FILESYSTEM_DISK=s3

File name: Resource

FileUpload::make('image_training')
                    ->imageEditor()
                    ->downloadable()
                    ->hintIcon('heroicon-o-information-circle', tooltip: 'Descreva as funções só do Humano!')
                    ->uploadingMessage('Salvando o arquivo...')
                    ->disk('s3')
                    ->visibility('private'),

FileUpload::make('image_training')
                    ->imageEditor()
                    ->downloadable()
                    ->hintIcon('heroicon-o-information-circle', tooltip: 'Descreva as funções só do Humano!')
                    ->uploadingMessage('Salvando o arquivo...')
                    ->disk('s3')
                    ->visibility('private'),

Attached is a print of the error in my console and also a print of the bucket receiving the temporary images. How can I resolve this error?

Flare

Unable to check existence for: livewire-tmp/mC60qay7AlenuXlgC5CrVBEmeCZF1M-metaaW5NUE4xSlF4aUozeFpCYmhKQkd2RlpDSUhEZFlILW1ldGFTVzFoWjJWdElHUnZJRmRvWVhSelFYQndJR1JsSURJd01qUXRNREl0TVRJZ3c2QW9jeWtnTVRRdU1EWXVNRGxmTURFeE9XUXhaRGt1YW5Cbi0gKDEpLmpwZw==-.jpg - The error occurred at http://127.0.0.1:8000/artificial-intelligence/11/treinamentos/create

17 Replies

myster•4mo ago

any help !? @Leandro Ferreira pode me ajudar?

Andrew Wallo•4mo ago

What about your Livewire configuration file? Can you show that too? It is important here as well..

myster•4mo ago

one moment

<?php

return [

    'class_namespace' => 'App\\Livewire',

    'view_path' => resource_path('views/livewire'),

    'layout' => 'components.layouts.app',

    'lazy_placeholder' => null,

    'temporary_file_upload' => [
        'disk' => "s3",
        'path' => 'livewire-tmp',
        'rules' => null,
        'directory' => null,
        'middleware' => null,
        'preview_mimes' => [ 
            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
            'mov', 'avi', 'wmv', 'mp3', 'm4a',
            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
        ],
        'max_upload_time' => 5, 
    ],

    'render_on_redirect' => false,

    'legacy_model_binding' => false,

    'inject_assets' => true,

    'navigate' => [
        'show_progress_bar' => true,
        'progress_bar_color' => '#2299dd',
    ],

    'inject_morph_markers' => true,

    'pagination_theme' => 'tailwind',
];

<?php

return [

    'class_namespace' => 'App\\Livewire',

    'view_path' => resource_path('views/livewire'),

    'layout' => 'components.layouts.app',

    'lazy_placeholder' => null,

    'temporary_file_upload' => [
        'disk' => "s3",
        'path' => 'livewire-tmp',
        'rules' => null,
        'directory' => null,
        'middleware' => null,
        'preview_mimes' => [ 
            'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
            'mov', 'avi', 'wmv', 'mp3', 'm4a',
            'jpg', 'jpeg', 'mpga', 'webp', 'wma',
        ],
        'max_upload_time' => 5, 
    ],

    'render_on_redirect' => false,

    'legacy_model_binding' => false,

    'inject_assets' => true,

    'navigate' => [
        'show_progress_bar' => true,
        'progress_bar_color' => '#2299dd',
    ],

    'inject_morph_markers' => true,

    'pagination_theme' => 'tailwind',
];

This is my livewire.php in: vendor\livewire\livewire\config\livewire.php

Andrew Wallo•4mo ago

You are not EVER supposed to edit anything within the vendor/ directory of your application. Never do this. If this is what you did than there is no wonder that it does not work. You must publish the configuration file using the command php artisan livewire:publish --config, and then you must configure it. Also I am not sure if the path option here in the configuration even currently exist as an option. The default directory config option for Livewire is livewire-tmp already.

myster•4mo ago

🥹 I'm glad it was the only one I edited. I have backup, I will return to default.

Andrew Wallo•4mo ago

Sorry I hope you didn't think I was being rude. I get it, when I first started learning I didn't know that either but it is very important to not edit anything directly within the vendor/ directory. In PHP/Laravel you must always either override, extend, or publish (and edit) code already provided by packages, not directly edit them within the vendor/ directory.

myster•4mo ago

'temporary_file_upload' => [
        'disk' => null,        // 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' => null,        // 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...
    ],

not at all, I'm very happy that you're helping me

Andrew Wallo•4mo ago

Okay cool so if you now have published the configuration file, you should only have to edit the disk option and change it to s3 since that is what you are using right?

myster•4mo ago

yes I will do what you said and test

Andrew Wallo•4mo ago

Okay great. Just let me know.

myster•4mo ago

I think we're almost there, I did as I said:

php artisan livewire:publish --config

php artisan livewire:publish --config

, I edited this published file like this:

'temporary_file_upload' => [
        'disk' => "s3",        // Example: 'local', 's3'              | Default: 'default'
        'rules' => null,       // Example: ['file', 'mimes:png,jpg']  | Default: ['required', 'file', 'max:12288'] (12MB)
        'directory' => "test",   // 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' => "test",   // 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...
    ],

I put

'disk'='s3'

'disk'='s3'

and

'directory'='test'

'directory'='test'

. But unfortunately the same error message still remains (I put a screenshot attached) https://flareapp.io/share/17xwrJBP And in AWS S3 I can view the saved file (Also attached)

Flare

Unable to check existence for: test/lhnCo4sOwj6D0aRtimsT9P7TRALdxf-metadW5uYW1lZC5wbmc=-.png - The error occurred at http://127.0.0.1:8000/artificial-intelligence/11/treinamentos/create

Andrew Wallo•4mo ago

You changed the directory option to "test" now instead of the default "livewire-tmp". Did you make sure to account for this everywhere else as needed as well?

myster•4mo ago

I tested it both ways, both "livewire-tmp" and "test". Both return the same error. I was reading some documents here. The error cannot be in CORS?

return [

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

    "AllowedMethods" => [
        "GET",
        "PUT",
        "POST",
        "DELETE"
    ],

    'allowed_origins' => ['http://127.0.0.1:8000'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => ['
        "x-amz-server-side-encryption",
        "x-amz-request-id",
        "x-amz-id-2",
        "Content-Type"
    '],

    'max_age' => 0,

    'supports_credentials' => false,

];

return [

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

    "AllowedMethods" => [
        "GET",
        "PUT",
        "POST",
        "DELETE"
    ],

    'allowed_origins' => ['http://127.0.0.1:8000'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => ['
        "x-amz-server-side-encryption",
        "x-amz-request-id",
        "x-amz-id-2",
        "Content-Type"
    '],

    'max_age' => 0,

    'supports_credentials' => false,

];

One question, is it necessary to add some CORS to the bucket?

Andrew Wallo•4mo ago

I haven't used S3 before so I may not be giving the best advice here but I am pretty sure that you need to edit the CORS configuration in your AWS Bucket properly as well. You can take a look at this video here: https://youtu.be/YkeKBe8l-lk?t=758. It may help I'm not sure.

Bitfumes

YouTube

Laravel Livewire - New File Upload with Zero Config

Learn Laravel Livewire new File Uploading System Wire:model="photo" It is a full-stack framework by creating an awesome support ticket system. The course is from very basics to advanced using Laravel Livewire, creating Single Page Application (SPA) and lot's of fun Check out 15-20 hours of Laravel Content at https://bit.ly/indepthlaravel Bec...

Andrew Wallo•4mo ago

Try using public visibility for the FileUpload filament component and see if that changes anything. Might not, but worth a try.

myster•4mo ago

Thank you very much for your attention! I will solve it and let you know here, leaving what I did wrong and how I solved it to help other colleagues in the same situation. Thank you very much @Andrew Wallo

Andrew Wallo•4mo ago

Okay sounds good. Your welcome.

Gaming

Programming

Error [AWS S3]: Unable to check existence for: livewire-tmp/