awcodes / filament-curator

A media picker plugin for Filament Panels.
MIT License
336 stars 87 forks source link

S3 Uploads: Image source not readable #302

Closed EdwardWestbury closed 1 year ago

EdwardWestbury commented 1 year ago

Filament Version

v3.0.39

Plugin Version

v3.0

PHP Version

PHP 8.1.0

Problem description

Attempting to upload media to S3 using the CuratorPicker component throws the following exception.

Intervention \ Image \ Exception \ NotReadableException - Image source not readable

The visibility of this media is set to private however the bucket was also made public just to ensure there are no issues with access. I'm no AWS expert so it's possible I've missed something super obvious, so apologies if that is the case.

In the linked reproduction repo the following steps in order were taken

  1. Created a new Laravel App, installed latest Filament Panels v3 (stable)
  2. Setup an S3 bucket & IAM user
  3. Attach AmazonS3FullAccess permissions to the user, implement basic policy on bucket (see below)
  4. Generated aws keys, added to .env
  5. Added a simple Blog model with title and content
  6. composer require awcodes/filament-curator & php artisan curator:install & npm install -D cropperjs
  7. Generated a filament theme, imported the css mentioned in the documentation and updated tailwind.config.js
  8. Included plugin in AdminPanelProvider
  9. Generated a BlogResource and added CuratorPicker & FileUpload to the schema

S3 User Settings Screenshot 2023-09-05 at 4 26 56 PM

S3 Bucket Settings Screenshot 2023-09-05 at 4 24 42 PM

S3 Bucket Policy

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::MY-BUCKET-NAME/*"
        }
    ]
}

Expected behavior

Upload should not throw the exception. Expect the newly uploaded image to appear in the "media library" output for selection.

Steps to reproduce

  1. Clone the linked reproduction repository, install dependencies
  2. Seed the db for 10 blogs and a user (test@example.com, password)
  3. Login as user, go to Media
  4. Attempt to create a new Media model via the form, observe exception
  5. Navigate to Blogs, edit an existing blog
  6. Upload a file to the S3 Upload input, wait for upload, save
  7. Observe no issues
  8. Add media, attempt to upload images via the right-hand side
  9. Observe exception

Reproduction repository

https://github.com/EdwardWestbury/curator-s3-issue

Relevant log output

No response

awcodes commented 1 year ago

Do you think these 2 could be related, https://github.com/awcodes/filament-curator/issues/269

EdwardWestbury commented 1 year ago

It's possible. This is the first time I'm personally trying out files with private visibility, as the images I need to store are of vehicles and contain license plates.

There doesn't seem to be many great resources on this, but I do think my configuration on AWS is fine, as using the standard FileUpload input from Filament seems to work without issue.

I could try and implement an ACL on my bucket to see if that gets me past the issue mentioned in #269

awcodes commented 1 year ago

Yea. I'm just thinking that there's something with the temp directory that may not be accessible, but it could be as simple as adding a signing token in the case that the disk is s3. It's on the model's get signed url method. It just might need to be added to the saveUploadedFileUsing on curator's uploader class because the saving method is trying to read the width and height etc, but intervention needs an actual path to a physical file to initialize with.

EdwardWestbury commented 1 year ago

I missed something painfully obvious and still had my temporary uploads on the local disk.

Changing this to s3 has solved the upload issue for me.

Embarrassed but glad I solved my problem.

Not sure if you find it worthwhile to maybe add a quick mention in the docs that temporary uploads will also need to be pushed to s3 for the muppets like me that don't clue in fast enough :clown_face:

awcodes commented 1 year ago

Interesting. Glad you're up and running though. I'll make a note about it and get something added to docs. Thank you.

l-mtc commented 11 months ago

How did you resolve this? I'm not getting an upload after editing an existing media upload? I'm not getting an error anymore but it's not uploading to s3

SanthoshSivan-Dev commented 5 months ago

Hi @awcodes @EdwardWestbury ,

Could you please provide me with details about fixing these issues? I am currently facing the same problems.

EdwardWestbury commented 5 months ago

@SanthoshSivan-Dev In my case the problem I had was while I had configured the uploads for Curator to use S3, I had not updated Livewire to do the same. See the documentation link below for the config change required.

Livewire - Uploading directly to Amazon S3

Hope that helps!

SanthoshSivan-Dev commented 5 months ago

Thanks a lot, @EdwardWestbury. This will help me fix my issues.