Set default image src in FileEditor
Hello! I am using the form builder inside a livewire component and have a field to save a profile photo. Attached is the photo of the UI and here is my code so far: https://gist.github.com/colinmac17/8b22912d53b4d5ecd293102ae4b351e6
My goal here: When the form loads the current profile picture should show in the circle if the photo is set in the database. Currently the filepath in R2 is saved in the database. Example: users/1/photos/becks.jpeg. How can I go about doing that? I've tried filling the form in mount and setting default() on the editor itself and both have not worked so far. I am using R2 as an s3 compatible driver for Storage.
Thank you in advance for your help!
7 Replies
If you temporarily switch it out, for testing, to store the image on the local filesystem, can you make it work as desired that way?
ie: rule out the issues of disks, directories, attributes from relations, etc.
Also, are there any JS errors occurring? And, is Filament doing fallbacks of any sort because it's not finding things? (empty incoming data, unable to find file, or finds an empty string which is not the same as null so therefore doesn't invoke the supplied default, etc)
In short: since you're calling a FileUpload object, can you make that work as intended within this page. Then begin altering things, to find out where the problem is really occurring.
... oh, and without the
->imageEditor() too ...Thanks @DrByte it should already be using the local file system until it saves to the db.
I guess my question is: am I on the right track? I wasn’t sure if it was even possible to do what I desire here. I can definitely debut further and remove one thing at a time until it fails, but I’ve never gotten it to work yet.
I was assuming if I filled the form or set the default it would just work
No JS errors. On filament 3.1
Ya, I hear you.
When things like this happen to me, which is frequent when learning something opinionated like Filament, using features I've not used in it yet, I find it best to try to rebuild it from as minimal as possible, to find out where it breaks (or fails to do what I was hoping). Sometimes that helps me revisit the whole objective from another angle or thought-process, which often then leads me to a working solution.
Yes I love that idea. When I get back in there I will have a fresher mind as well. Sometimes when learning new things it takes a session or two until it clicks. I was working on this during a flight. Maybe I’ll crack the issue on my flight home 🙂
Excellent!
I'd love to see what you come with code-wise. 😉
Ok two things fixed this!
1: getting rid of ->directory (as I was already saving that in my database as part of the path to the image)
2: adding ->visibility('private') as I am not using a public bucket and need pre-signed urls
3: adding a working CORS policy to the R2 bucket on cloudflar
The image now shows up correctly 🙂
woot!