F
Filament•2mo ago
BigBlueMonkey

CORS Filepond fileupload

I am at my wits end having spent the entire day on this now. When I upload a file using simple disk command everything works fine: .env: 
APP_URL='http://front.demo.localhost'
SESSION_DOMAIN='.demo.localhost'
APP_DOMAIN='demo.localhost'
APP_TIMEZONE='Asia/Dubai'
APP_URL='http://front.demo.localhost'
SESSION_DOMAIN='.demo.localhost'
APP_DOMAIN='demo.localhost'
APP_TIMEZONE='Asia/Dubai'
My test script which uploads the files without issue (ie the S3 config in my env is fine) - the file appears in my amazon s3 bucket: THIS WORKS ## 
$results = Storage::disk('s3')->put('test.txt','well hello');

$files = Storage::disk('s3')->files();

$this->info("Successfully connected to S3 and listed files in '{$bucketName}'.");
$this->info("Found " . count($files) . " files.");

if (count($files) > 0) {
    $this->info("First 5 files:");
    foreach (array_slice($files, 0, 5) as $file) {
        $this->line("- " . $file);
    }
}
$results = Storage::disk('s3')->put('test.txt','well hello');

$files = Storage::disk('s3')->files();

$this->info("Successfully connected to S3 and listed files in '{$bucketName}'.");
$this->info("Found " . count($files) . " files.");

if (count($files) > 0) {
    $this->info("First 5 files:");
    foreach (array_slice($files, 0, 5) as $file) {
        $this->line("- " . $file);
    }
}
Running the following always gives me a cores issue though: THIS DOES NOT ## 
Action::make('uploadfiles')
->label('Upload Files')
->icon('heroicon-o-cloud-arrow-up')
->form([
    FileUpload::make('files')
        ->label('Upload Files')
        ->helperText('Upload PDF coordination files')
        ->multiple()
        ->disk('s3')
        ->directory('test')
        ->acceptedFileTypes(['application/pdf'])
        ->maxSize(10240) // 10MB per file
        ->visibility('private')
        ->required()
        ->previewable(false)
        ->storeFileNamesIn('filename')
        ->required()
        ->columnSpan('full'),
Action::make('uploadfiles')
->label('Upload Files')
->icon('heroicon-o-cloud-arrow-up')
->form([
    FileUpload::make('files')
        ->label('Upload Files')
        ->helperText('Upload PDF coordination files')
        ->multiple()
        ->disk('s3')
        ->directory('test')
        ->acceptedFileTypes(['application/pdf'])
        ->maxSize(10240) // 10MB per file
        ->visibility('private')
        ->required()
        ->previewable(false)
        ->storeFileNamesIn('filename')
        ->required()
        ->columnSpan('full'),
CORS: 
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 403
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 403
Again - to be super clear, this works without issue with a normal disk->put (IE not a cors configuration issue on S3) and I have tried changing the urls to localhost, 127.0.0.1:8000, you name it I have tried it. Would really appreciate support at this point. Using sail in my demo environment. Ill also add that during development I added temporary_file_upload=local to config/livewire just to build. Now moving to production and needs fixing
Solution:
For anyone that finds this thread - here is the aws cors config: ``` [ { "AllowedHeaders": [...
Jump to solution
3 Replies
Dennis Koch
Dennis Koch•2mo ago
CORS is a client side thing. That's why $disk->put() works. You need to configure this on S3 itself.
BigBlueMonkey
BigBlueMonkeyOP•2mo ago
Yea - so GPT just gave me the hidden answer: ❗ Don't use "*" for AllowedOrigins if you're using Authorization headers (which presigned URLs do) — otherwise AWS will silently block CORS.
Solution
BigBlueMonkey
BigBlueMonkey•2mo ago
For anyone that finds this thread - here is the aws cors config: 
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST",
            "PUT",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ],
        "MaxAgeSeconds": 3000
    }
]
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST",
            "PUT",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ],
        "MaxAgeSeconds": 3000
    }
]
If the above does not work, try adding in your url in allowed origins.

Did you find this page helpful?