File upload previews not loading by Dan Harrin - Tricks

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

Admin panel resource not in sidebar

Admin panel FAQ

by Dan Harrin, 6 months ago

9 1424

File uploads not processing in production

Form builder FAQ

by Dan Harrin, 5 months ago

4 666

Hide and show form field bases on a multi-select or checkbox list

Form builder

by Suhendra Katrali, 4 months ago

3 865

David

5 months ago ✓ Link copied!

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.

David

5 months ago ✓ Link copied!

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.

🥳 1

Sign in to comment →