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.

avatar

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

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.

🥳 3
avatar

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

Hi again,

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

Thanks

🥳 1
avatar

Thanks @Daniel Drummond you saved me hours of time!

avatar

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

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

avatar

can you please elaborate what was your cors config for s3?

avatar

No preview when using s3 in an Edit Page

return FileUpload::make('image')
->disk('do')
->directory('uploads')
->visibility('public')
avatar

APP_URL resolved the problem! Thanks and great tip!

😍 1
avatar

Hi Everyone I faced some issue in filament file upload im new in filament. So in my case I have two fields one is thumbnail_iimg & the second one is pdf. both are stores in different folder called thumbnail_img stored in thumbnail folder & pdf stores in catelogues stores my env APP_URL is http://127.0.0.1:8000 & already storage has been linked but when ever i tried to upload the pdf it display error called Error During Upload & i check the console so it displayed that **POST http://127.0.0.1:8000/livewire/upload-file?expires=1685421046&signature=3b012670fa4bf9f25ff78e18c72036ec837f2e7be1df91074c9d03b3a85daf7f 422 (Unprocessable Content) UploadManager.js:131 **

Please help me to solved this error & i can not upload the pdf

avatar

Hi everyone i solved the issue. Issue is in the file size which is set for 5 mb so maxed out to 100mb

avatar

Hi,could you tell me where can I modify the file upload size?I have the same problem.Thanks!

avatar

I currently have a problem with fileuploand, i used spartie plugin, Everything works fine on localhost. but on the server the image doesn't show, i have done storage link, also the appl_url is correct,yet still the images are not showing, keep getting 404 error when i checked the console.Please i need help

avatar

I think it seems i have he same problem. When i upload my file image, it keeps on displaying waiting for size with small circle still loading endlessly. I have tried the app url 8000 trick but still not working. As a result i can not edit uploaded image, until i deleyte entire post

avatar

Hello Brian, I'm stuck at the same thing. Did you a fix for it?

avatar

morning everyone, ive got problem when uploading image using fileupload, when its process upload theres no error, , but when i come to looking the result, ive got image broken, anyone have same problem and how to fix it?

avatar

Have you linked the folder ?

avatar

Hi there I'm facing a similar issue on saving image on database using FileUpload. The images are stored in public folders (and I create starege:link)...but it store the image name (without image url) and I can't display the images. Coul anyone help me please? Very thanks in advance!

avatar

Hi, Everybody.

Just to update this question, showing how I solved it: I changed the APP_URL to http://127.0.0.1:8000/, but it still showed the same error... so I removed the slash (/) at the end of the url and, "hello", it worked. So make sure you remove that slash.

avatar

I finally resolved the issue with incorrect URLs in my Laravel application.

By default, APP_URL was set to http://localhost in the .env file. But I'm developing locally with a Laravel server on port 8000, all of my URLs were being generated incorrectly.

So I modified the APP_URL line in the .env file to APP_URL=http://127.0.0.1:8000

You can also use http://localhost:8000 if preferred.

Laravel uses the APP_URL value to generate absolute URLs throughout the application. By replacing localhost with 127.0.0.1 and specifying port 8000, all my URLs are now generated properly based on my local environment.

I hope this helps others who run into issues with inconsistent relative and absolute URLs in Laravel projects. Defining the correct APP_URL in your .env file is crucial for URL generation.

Hope this can help!

👍 1
avatar

My issue was solved after editing and matching the url to my specific needs in the public disk in the filesystems.php file

avatar

Hello everyone! Loving Filament!

Similar to David's case, I'm getting a CORS issue as I'm trying to preview the recent uploaded image but I get an infinite filepond loading spinner. I'm using a custom domain(config('filament.url')) for my panel. I can upload to storage with no issues.

I've tried configuring the common files I have found thoughout forums and threads that may be causing the issue with no luck. Also clearing app, browser cache as well as config. The last thing I believe may need configuring is the web server. It's worth mentioning that I'm using Valet and Jetstream (which comes with middleware).

These are the errors I'm getting:

Access to fetch at 'http://domain/storage/product-colors/img3.jpg' from origin 'http://subdomain.domain.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.

GET http://sikte.test/storage/product-color file-upload.js?v=3.0.83.0:40 s/img3.jpg net::ERR_FAILED 200 (OK)

Uncaught (in promise) TypeError: Failed file-upload.js?v=3.0.83.0:40 to fetch load @ file-upload.js?v=3.0.83.0:40 r @ file-upload.js?v=3.0.83.0:2 n @ file-upload.js?v=3.0.83.0:2 f @ file-upload.js?v=3.0.83.0:2 ADD_ITEM @ file-upload.js?v=3.0.83.0:2 u @ file-upload.js?v=3.0.83.0:1 (anonymous) @ file-upload.js?v=3.0.83.0:2 DID_SET_FILES @ file-upload.js?v=3.0.83.0:2 u @ file-upload.js?v=3.0.83.0:1 n.

Any help or tips would be greatly appreciated! If you need anymore info, please let me know!

👀 1
avatar

I have same problem. How to fix?

avatar

For me, the problem of image previews not displaying was caused by using "local" as the livewire temporary file disk. The default setting of null causes the system to use the "local" filesystem definition. This was the default with my Laravel 9 application.

I edited ./config/livewire.php and changed the setting for 'temporary_file_upload' --> 'disk' to 'public' and then it worked. I also deleted the old livewire-tmp directory. Not sure if this is required or not.

I suspect the filament PHP front end is not aware of the special url prefix used by livewire when the temporary file upload storage disk is set to local.