Filament•2mo ago

File Upload Preview Issue

What I am trying to do: I want to display uploaded images in Filament’s FileUpload field clearly (not blurred or pixelated) when editing a record. What I did: Configured FileUpload::make('image') with .directory('question_game_images') and .disk('public'). Images are uploaded correctly and stored in the DB as relative paths (question_game_images/filename.png). On edit, the image loads in the form preview, and when i open the image in new tap using openable() it shows with full resoultion. My issue/the error: The image preview inside the FileUpload form shows as very pixelated/blurred. It looks like Filament is rendering a low-resolution thumbnail instead of the original image. also the image start with a very small preview window when i click on it , it expands to be like what it is in the attachments Code:

Forms\Components\FileUpload::make('image')
                                ->label('Image')
                                ->directory('question_game_images')
                                ->image()
                                ->disk('public')
                                ->columnSpanFull()
                                ->downloadable(true)
                                ->openable()
                                ->visible(fn(Get $get) => $get('question_type') === 'image'),
                        ]),

Forms\Components\FileUpload::make('image')
                                ->label('Image')
                                ->directory('question_game_images')
                                ->image()
                                ->disk('public')
                                ->columnSpanFull()
                                ->downloadable(true)
                                ->openable()
                                ->visible(fn(Get $get) => $get('question_type') === 'image'),
                        ]),

12 Replies

Dennis Koch•2mo ago

Can you check your DevTools what image is loaded in the network tab?

Mahmoud ElshihaOP•2mo ago

Yes it has been loaded successfully in the DevTools

Dennis Koch•2mo ago

But what was loaded? The loaded file has full size?

Mahmoud ElshihaOP•2mo ago

yeah the full size image

Dennis Koch•2mo ago

That's weird. Sounds like an issue with FilePond then.

Mahmoud ElshihaOP•2mo ago

this issue only appear in the wizard , when i tried to take the image out of the wizard it works perfectly

Mahmoud ElshihaOP•2mo ago

this is the Resource :

QuestionGameQuestion...

Dennis Koch•2mo ago

Hm. Any JS errors?

Mahmoud ElshihaOP•2mo ago

there is nothing in the console , not even a warning oddly enough when the file upload used outside the wizard or even in the first step this problem disappear !!! i have searched all day long to solve this issue and all fixes has failed up till now

Azad Furkan ŞAKAR•2mo ago

This is a known issue. It's happening with tabs, repeater, builder, wizard components

Mahmoud ElshihaOP•2mo ago

how should i solve this issue then ?

Azad Furkan ŞAKAR•2mo ago

I haven't find anything yet, sadly 🤷‍♂️

Gaming

Programming

File Upload Preview Issue

Did you find this page helpful?