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

Generate slugs from a title whilst typing (without overriding)

Form builder

by Ralph J. Smit, 2 weeks ago

4 184

Reveal on focus TextInputs

Form builder

by pxlrbt / Dennis Koch, 15 hours ago

0 5

Customize Filament look with Tailwind CSS overrides

Admin panel FAQ Form builder Table builder

by Simon Bühler, 3 days ago

0 95
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.

Sign in to comment →