Issue with FileUpload Component Not Loading in Laravel Filament
Hello everyone,
I’m working on a Laravel project using Filament and facing an issue with the FileUpload component. I’m trying to implement a file upload feature that allows users to upload images, but the component is not loading as expected.
What I’m Trying to Do:
I want to create a file upload feature using the FileUpload component in my Laravel Filament application. The goal is to allow users to see the images they uploaded in their records, enhancing the application's interactivity.
What I’ve Done So Far:
I have set up the FileUpload component in my code as follows:
FileUpload::make('attachment')
->label('Attachment')
->image()
->default($record->attachment)
->disabled(),
I’ve ensured that the necessary Filament packages for file uploads are installed.
I’ve checked that the storage/app/public/attachments directory has the appropriate permissions.
Issues Encountered:
Despite my efforts, the FileUpload component is not rendering properly on the page. Here are the specific issues I’ve encountered:
The network tab indicates "failed to fetch" for the image URL:
GET http://localhost/storage/attachments/01JA2172H6K004EX15H5J73QQD.PNG net::ERR_CONNECTION_REFUSED
The component does not display any UI for file selection.
The console shows the following error:
Uncaught (in promise) TypeError: Failed to fetch
at load (file-upload.js?v=3.2.115.0:40:96368)
I have confirmed that $record->attachment is set to a valid file path.
Experience Level:
I am a beginner with PHP, Laravel, and Filament.
Could anyone provide insights on what I might be missing or any debugging steps I should take to resolve this issue?
Thank you for your help!
8 Replies
did you change the APP_URL of your app to the one you're using
I didn't change anything on the .env
everything is still the same
I just want to use the FileUpload component to view the uploaded file of the user
you should changed to you're current url like APP_URL=http://127.0.0.1:8001
Thanks. I used my alternative solution of displaying the image🙂
this is the official response of @Dan Harrin https://filamentphp.com/content/danharrin-file-previews-not-loading
Filament
Why are my file previews not loading? by Dan Harrin - Filament
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
I've tried that one but it didn't work on my code. I have storage link and modified my .env file
storage\app\public\attachments
What I'm trying to do is see the images stored using the file upload feature in the form.