Tricks

File upload previews not loading

May 30, 2022
Dan Harrin
Form builder, FAQ

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.

Other tricks

Dependent Select Filters

Table builder

by Hugh Messenger, 3 months ago

7 830

Render HTML in select options

Form builder

by Matthew Ost, 8 months ago

25 3307

Present a different Filament Form for mobile users

Form builder

by Andreas Kviby, 3 months ago

2 339
avatar
David

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 :

  • Access to fetch at 'http://localhost/storage/41lt91Hm7KgtnTWKjEK93AIcqmuRp1-metaQ29mX2V4aXN0ZW5jZV9pc19mdXRpbGVfY2QuanBn-.jpg' from origin 'http://127.0.0.1:8000' 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. module.esm.js:21914 GET http://localhost/storage/41lt91Hm7KgtnTWKjEK93AIcqmuRp1-metaQ29mX2V4aXN0ZW5jZV9pc19mdXRpbGVfY2QuanBn-.jpg net::ERR_FAILED 404 (anonymous) @ module.esm.js:21914 c @ runtime.js:63 (anonymous) @ runtime.js:294 (anonymous) @ runtime.js:119 Nl @ app.js?id=e8080c737ff6965d82c81035f6223567:8 a @ app.js?id=e8080c737ff6965d82c81035f6223567:8 (anonymous) @ app.js?id=e8080c737ff6965d82c81035f6223567:8 (anonymous) @ app.js?id=e8080c737ff6965d82c81035f6223567:8 (anonymous) @ module.esm.js:21913 n @ module.esm.js:13806 load @ module.esm.js:13793 l @ module.esm.js:14469 ADD_ITEM @ module.esm.js:15076 l @ module.esm.js:12211 (anonymous) @ module.esm.js:14751 DID_SET_FILES @ module.esm.js:14748 l @ module.esm.js:12211 r. @ module.esm.js:13219 l @ module.esm.js:12211 set @ module.esm.js:13202 (anonymous) @ module.esm.js:1787 (anonymous) @ module.esm.js:21947 c @ runtime.js:63 (anonymous) @ runtime.js:294 (anonymous) @ runtime.js:119 Nl @ app.js?id=e8080c737ff6965d82c81035f6223567:8 a @ app.js?id=e8080c737ff6965d82c81035f6223567:8 Promise.then (async) Nl @ app.js?id=e8080c737ff6965d82c81035f6223567:8 a @ app.js?id=e8080c737ff6965d82c81035f6223567:8 (anonymous) @ app.js?id=e8080c737ff6965d82c81035f6223567:8 (anonymous) @ app.js?id=e8080c737ff6965d82c81035f6223567:8 (anonymous) @ module.esm.js:2153 module.esm.js:21914 Uncaught (in promise) TypeError: Failed to fetch at module.esm.js:21914:36 at c (runtime.js:63:40) at Generator._invoke (runtime.js:294:22) at Generator.next (runtime.js:119:21) at Nl (app.js?id=e8080c737ff6965d82c81035f6223567:8:162572) at a (app.js?id=e8080c737ff6965d82c81035f6223567:8:162776) at app.js?id=e8080c737ff6965d82c81035f6223567:8:162837 at new Promise () at app.js?id=e8080c737ff6965d82c81035f6223567:8:162716 at module.esm.js:21913:17

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.

avatar
David

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.

🥳 2
avatar
Daniel Drummond

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

avatar
Daniel Drummond

Hi again,

I solved the problem, it was my forgetting to add the field in the model as fillable.

Thanks

avatar
Max Carvalho

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.

avatar
Max Carvalho

This is solved, it was an issue with CORS config on s3.

avatar
Vahn

No preview when using s3 in an Edit Page

return FileUpload::make('image')
->disk('do')
->directory('uploads')
->visibility('public')
Sign in to comment →