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": [
            "*"
        ],
        "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.

Jump to solution

Filament•7mo ago•

5 replies

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

Solution

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.

Jump to solution

CORS Filepond fileupload

THIS WORKS ##

THIS DOES NOT ##

CORS Filepond fileupload

THIS WORKS ##

THIS DOES NOT ##

Similar Threads

Similar Threads

Similar Threads