Once you've uploaded an image using the FileUpload
component and saved it, you should see a preview in the component.
To find out if you've misconfigured your app, check for any console errors. 404s or 403s? Read on.
Make sure that the APP_URL
variable in your .env
file matches the domain you're using to access your app from, including the protocol (http
or https
). This is usually the problem.
Additionally, if you're using the public
filesystem driver, ensure that you have run php artisan storage:link
.
Hi everyone, I'm totally new to Filament but I already like it a lot and I plan on using it on a regular basis. I've been testing it for a few days now and I have this issue : my APP_URL variable is ok (APP_URL=http://localhost). Also, I did the "php artisan storage:link". When I upload a file, it is saved in the "public/storage" folder without any problems and a preview is displayed. When I hit the save button the preview disappears and a spinner spins endlessly. In the devtools here is what I have :
My problem seems to be related to CORS and even after a few hours searching I don't really know how to fix this. If anyone can help me a bit it would be appreciated. I am using php 8.1.5, Laravel 9.11 and Filament 2.0.
Ok I think I solved it. In case it might help someone, I changed the APP_URL variable from http://localhost to http://127.0.0.1:8000 and it seems to do the trick.
Hi everyone
I'm having problems with the FileUpload field, regarding the upload itself everything is fine, but it's not writing the image path ou url in the database.
What can it be? Doesn't show any error
Hi again,
I solved the problem, it was my forgetting to add the field in the model as fillable.
Thanks
I'm having somre trouble with the FileUpload form component. In my scenario I use AWS s3 and a CloudFront distribuition to handle all images that are uploaded using the admin panel. The s3 bucket is not public, only the Cloudfront distribuition can access it. My CDN will have an URL that's different from the admin panel. I can upload images without an issue but I cannot visualize them, I get a CORS error like so:
"Access to fetch at 'https://cdn-developer.whatever.com/Yb8CN80XvibeoPzYYhIxdQzxpjZypw-metaTG9nb19OaWNrX1RhZ2xpbmVfSHJ6XzIucG5n-.png' from origin 'https://manager.test' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."
I already tried everything that I can think of and nothing seems to solve the issue.
This is solved, it was an issue with CORS config on s3.
No preview when using
s3
in an Edit Page