F
Filament11mo ago
myster

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
No description
No description
17 Replies
myster
mysterOP11mo ago
any help !? @Leandro Ferreira pode me ajudar?
Andrew Wallo
Andrew Wallo11mo ago
What about your Livewire configuration file? Can you show that too? It is important here as well..
myster
mysterOP11mo 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
Andrew Wallo11mo 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
mysterOP11mo ago
🥹 I'm glad it was the only one I edited. I have backup, I will return to default.
Andrew Wallo
Andrew Wallo11mo 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
mysterOP11mo 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
Andrew Wallo11mo 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
mysterOP11mo ago
yes I will do what you said and test
Andrew Wallo
Andrew Wallo11mo ago
Okay great. Just let me know.
myster
mysterOP11mo 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
No description
No description
Andrew Wallo
Andrew Wallo11mo 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
mysterOP11mo 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
Andrew Wallo11mo 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
Andrew Wallo11mo ago
Try using public visibility for the FileUpload filament component and see if that changes anything. Might not, but worth a try.
myster
mysterOP11mo 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
Andrew Wallo11mo ago
Okay sounds good. Your welcome.

Did you find this page helpful?