SpatieMediaLibrary plugin CORS issue@

Hi everyone

I'm using Spatie's Media Library to manage my images in Filament. I did setup an S3 bucket with the following CORS policy:

[
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

[
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

[
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

[
    {
        "AllowedHeaders": [],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

`

When I upload an image in Filament I still get a CORS issue. How can I solve this?

DrByte•1/3/24, 10:36 PM

This is how I usually configure it.
(I don't like using

in the AllowedOrigins, so I put both my production URL and local-testing URL, unless I'm using separate buckets for those separate purposes, in which case I put the specific URL instead).

LiamOP•1/3/24, 10:40 PM

I see, but what I have should work no?

I did setup it in my env like this:

FILESYSTEM_DISK=s3
FILAMENT_FILESYSTEM_DISK=s3

LiamOP•1/3/24, 10:41 PM

I get an error when it tries to upload it to the livewire-tmp folder

Schermafbeelding_2024-01-03_om_23.40.40.png

DrByte•1/3/24, 11:09 PM

Have you tried specifically adding your .be.be domain to the AWS AllowedOrigins array?

LiamOP•1/3/24, 11:20 PM

I'll try that now, getting

Disk named `media` cannot be accessed

Disk named `media` cannot be accessed

error now. But I also changed my FILESYSTEM_DISK to local again and specific ->disk('media') on the form element now.

awcodes•1/3/24, 11:21 PM

Local disk cannot be accessed like this. Change disk to public.

awcodes•1/3/24, 11:22 PM

s3 should be fine as long as your s3 permissions are set up correctly.

LiamOP•1/3/24, 11:22 PM

It is set as public

LiamOP•1/3/24, 11:23 PM

Schermafbeelding_2024-01-04_om_00.23.03.png

LiamOP•1/3/24, 11:25 PM

I'm just really confused, I don't need to add

visibility('private')

visibility('private')

on the form element right? I just want to upload these images on my public bucket.

awcodes•1/3/24, 11:25 PM

You may still need it.

awcodes•1/3/24, 11:26 PM

Iirc there’s a caveat with s3 uploads if the livewire temp folder isn’t also set to s3.

LiamOP•1/3/24, 11:26 PM

Preferably I want the livewire-tmp folder to be on the bucket too but it doesn't work and its related to this I believe: https://github.com/filamentphp/filament/discussions/4483

GitHub

S3 cors · filamentphp filament · Discussion #4483

Local and remote same problem, added bucket Cors config: [ { "AllowedHeaders": [ "Authorization" ], "AllowedMethods": [ "GET", "HEAD", "PUT&qu...

awcodes•1/3/24, 11:27 PM

If you change the tmp directory in the livewire config I would expect it all to work correctly.

LiamOP•1/3/24, 11:27 PM

Aha, didn't try that yet. Will give it a try

awcodes•1/3/24, 11:27 PM

Again, depending on the bucket being configured correctly on the Aws side.

LiamOP•1/3/24, 11:28 PM

That should be all good. Thanks for the tip

awcodes•1/3/24, 11:28 PM

I don’t use Aws though. So my help here is limited.

LiamOP•1/4/24, 12:22 AM

Didn't work unfortunately.. Will take a break from it for now haha

awcodes•1/4/24, 12:39 AM

Always a good idea.

LiamOP•1/4/24, 10:49 AM

Ok fixed the CORS issue. I took the example from AWS again, replaced it with my data and it works now. But now I am still stuck with the Spatie Library not able to access my media disk in my flysystem config

LiamOP•1/4/24, 11:02 AM

Deleting

'visibility' => 'public'

'visibility' => 'public'

fixes it but I don't get why. Isn't that the purpose of the Spatie Media Library to have files uploaded to S3 which are publicly accessed?

SpatieMediaLibrary plugin CORS issue@

Similar Threads

Similar Threads

Similar Threads