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.

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

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.

No preview when using s3 in an Edit Page

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

APP_URL resolved the problem! Thanks and great tip!

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

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

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

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?

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!

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!

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

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!

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.

I'm encountering an issue with image uploading using FilamentPHP. Everything works fine locally, but once deployed to my shared hosting on Hostinger, the files get uploaded to storage/app/public but not to public/storage. I've corrected all the APP_URL links, but still no file uploads. Only the file name gets stored in the database. I really like Filament, but this issue is quite discouraging for me.

Does anyone got a solution to preview in edit form not working?

Buenas tengo un problema desplegué en mi entorno de producción mi proyecto desarrollado con filament y al subir un archivo o imagen me sale este error https://127.0.0.1:8000/livewire/upload-file?expires=1729611171&signature=3cf07e8397b51ce82a398974e41ec28410898fcd893aeab7216f6e00d8372876 alguien sabe porqué se da este error?

Hey Dan, this is great, but what happens in I am in a multitenant configuration? , where one customer URL is for example:

account.mydomain.com

Then I cannot just change the APP_URL setting , how to walk around this case ?

of course there will be

account2.mydomain.com , etc

you see my point.

I will try to figure it out, but if you could suggest something , that would be great.

Thanks

Solution for multitenancy:

If updating the APP_URL doesn't work and you have a multitenant configuration then you'll have to override the filesystem domain via the config array. For me that looks like:

$tenantDomain = 'https://company.example.com'

config(['app.url' => $tenantDomain]); // Override the app url used for most routes config(['filesystems.disks.public.url' => $tenantDomain.'/storage']); // Override the filesystem url causing this issue

Note the .'/storage' to direct to the storage directory.

I set it in the AppServiceProvider, if your data is available you could also set it in the config files directly.