Making 2 version of uploaded image
What looked like a simple task become 2 day headache.
I have a form, and one field for upload the image.
When I hit submit I want to make two image from it. One would be resized (and this posed no problems) and second one which would be a thumb of the either uploaded image or resized.
Tried to make it work doing some experiments, then I tried to google the solution, then Claude... One solution suggested using Intervention/Image, other Spatie media library, and all were so cumbersome, that I find it ridiculous.
Any suggestions on how to resolve this, since documentation is so limited with examples of commands/arguments?
14 Replies
Well, you’re going to need at least some php package to do the image manipulation. You don’t necessarily need spatie media library. But Intervention Image is solid, and spatie also has their own Image package too.
Another option would be a service like cloudinary. You could upload the image there, then use their url transformations to generate what ever sizes you need on demand so you don’t have to manipulate them upfront.
I've tried Spatie, but it doesn't suits my current database setup.
I went with Intervention/Image, but I can't find any solution using CreatePost and EditPost (what I found is so confusing)
I also tried using ->afterStateUpdated (which was most promising), but also failed in the end because I wasn't able to copy the name of thumbnail I've generated to hidden field called 'image_thumbnail'
What you suggested, to have 2 different images and upload them in 2 fields is something I wanted to avoid.
So, if you have any tips on how to resolve this problem using Intervention I would be grateful.
Also, to do everything using ->afterStateUpdated or to do image manipulation after submiting the form (which is the part I found very very little examples or documentation)
There’s a method on FileUpload called saveUploadedFileUsing() that you could use to modify the saving process.
Another option would be a model observer. You can read more about those in the laravel docs.
I will try the first suggestion.
Second I really don't have clue on how to implement 😦
Not your exact use case so don’t just copy paste, here’s an example https://github.com/awcodes/filament-curator/blob/67c448a520ed93ca4fd5c6de9f1e8152d22a6c96/src/Components/Forms/Uploader.php#L85
GitHub
filament-curator/src/Components/Forms/Uploader.php at 67c448a520ed9...
A media picker plugin for Filament Panels. Contribute to awcodes/filament-curator development by creating an account on GitHub.
Main thing is that you return what filament is expecting for the model’s field, but you could do extra things before returning the data to the form.
So only places I can find any ideas about method saveUploadedFileUsing() is the git you gave?
Any video/article on how to implement Laravel observer with Filament?
Observers aren’t filament specific. https://laravel.com/docs/11.x/eloquent#observers
Laravel - The PHP Framework For Web Artisans
Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.
Yes, I am familiar with them, but new to Filament. I was just asking on how to cuple them. Still struggling to find out what is happening inside Filament when I hit submit button, because I belived that it would be easy to do this, fill the form, upload image to temporary folder and when you hit submit you could invoke Intervention to do stuff as you did countless times before. But I was wrong, and it is hard to find some advanced stuff in manual or on web.
But, I will try to dig some solution to this. I hope.
Filament doesn’t have anything to do with the observer. There’s nothing to tie together. After the model is updated / created or while it is updating / creating you can use the storage facade to grab the image and do your manipulations and save the modified image back into storage.
Filament persists the image to storage during the form edit / create so it will be available by the time the observer runs.
So @awcodes I did as you suggested, I made Observer class, used Intervention/Image and all is running perfectly except my image manipulation method is being called twice for some reason.
I've tried putting it in
then I read somewhere that it might be the reason for it being called twice, and to change it to
but it didn't helped.
Checked my code and handleImage() is only called once by me, but somehow it runs twice. Generated images are as I wanted them, but I have more than I need.
Any ideas?
Hmm. Honestly don’t know why the observer is getting called twice. But you could always check to see the generated image exists first then run the function only if it doesn’t.
Thought about that but in the process of image manipulation I have changed the name so I can't check if it exists at the start of execution.
I need to think about other approach. Thought that there are more cycles that are not documented when you press submit button, but doesn't look like that.
Need to figure another approach then 🙂