Image attached to a RichEditor component is not displayed
I'm trying to upload an image to s3 from a RichEditor component. Upload the image well and save to s3, but after a while if you go to edit the registry the image is not displayed.
16 Replies
Any errors in the browser console?
Probably because the signing token has expired. You’re not going to be able to store html images unless the bucket is public.
console: GET https://abc-uploads.s3.amazonaws.com/files/WnNTEdKhTEj3dXc6rRovMJDaCRMEedkD7c57YLPN.png..... 403(Forbidden)
this is the code: RichEditor::make('description')
->required()
->fileAttachmentsDisk('s3')
->fileAttachmentsDirectory('files')
->fileAttachmentsVisibility('private')
->columnSpanFull(),
Looks like an access issue... how can the browser show you the image if it's under a private visibility?
the bucket is public, but in database field is saved with query string as Ej3dXc6rRovMJDaCRMEedkD7c57YLPN.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20230828T215 335Z&X -Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Signature=9edd7f8x-aws
Sure, the bucket can be public by default but visibility is still controlled for each file (if I remember correctly... it's been about a year since my last project on AWS)
So if the bucket is public, I should be able to see this from my machine, right?
https://abc-uploads.s3.amazonaws.com/files/WnNTEdKhTEj3dXc6rRovMJDaCRMEedkD7c57YLPN.png
I'm also getting a 403
this is a fake url, the real is https://hispanic-application-uploads.s3.amazonaws.com/files/WnNTEdKhTEj3dXc6rRovMJDaCRMEedkD7c57YLPN.png
Ok, I see. Sorry, I think I'm too rusty with S3 then, I'm not sure I can really help...
thank you anyway
This may be a bug. I can’t imagine why the headers would be part of the query string. That just seems dangerous to me.
I would expect a signed token but not the headers.
So when I access the image as it is saved in the database with the query strings it shows this
<Error>
<Code>AccessDenied</Code>
<Message>Request has expired</Message>
<X-Amz-Expires>300</X-Amz-Expires>
<Expires>2023-08-28T21:58:35Z</Expires>
<ServerTime>2023-08-28T22:35:55Z</ServerTime>
<RequestId>81X79AD78SS0R0SB</RequestId>
<HostId>JBxI3/XTlkK7iX/oSD0cbgG8GLS6udf+ZinwAOhTNjbuQQDpfaC0p9gdQerFO2+VVPUp9Apoh84=</HostId>
</Error>
but without the query string it accesses fine
Yea. I don’t think any of that should be on the query string. But by the same token they would kinda have to be if it’s stored in the html in the db and was private.
Has to be the expires header / parameter
Wish I had a good answer for you, as someone who maintains a wysiwyg plugin. But also part of why I hate Aws.
🙂
The bucket may be public, but it looks like you are telling the RichEditor component that it's private, with ...
... and as the RichEditor has no way of knowing if your bucket is public or private, it just goes by what you tell it, and generates pre-signed requests, as you can see in the code (it calls temporaryUrl() with a timeout).
So try just removing that fileAttachmentsVisibility() line.
https://github.com/filamentphp/filament/blob/3.x/packages/forms/src/Components/Concerns/HasFileAttachments.php#L120
GitHub
filament/packages/forms/src/Components/Concerns/HasFileAttachments....
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament
don´t works
So what are the symptoms after you remove that line, and upload a new image?