Looking for best practices on customizing Filament FileUpload UI

[ShaungBhone]

I’m currently working on a project where I heavily use FileUpload (Filament + Livewire), and I’m looking for advice or best practices on customizing the FileUpload UI beyond the default experience.

Some things I’m exploring / struggling with:

• Custom preview layout (e.g. card-style or grid instead of the default list)
• Replacing or extending action buttons (upload, remove, replace)
• Adding custom metadata or extra UI controls per uploaded file
• Better UX for multi-file uploads (progress, grouping, limits, hints)
• How far UI customization should go inside Filament vs using a custom Livewire component

I know Filament provides hooks like previewable(), imagePreviewHeight(), panelLayout(), and custom view overrides, but I’d love to hear:

How are you customizing FileUpload UI in real projects?

Do you prefer extending Filament components or wrapping your own Livewire UI?

Any patterns, examples, or repos you recommend?

Not looking for a “perfect” solution — just want to learn how others approach this in production.

Thanks in advance 🙏

[Steffen-Svenningsen]

Hello Shaung!

I had an internship a couple months ago at a company where we had this discussion also! The issue was we wanted to preview Favicons in small 1:1 boxes instead of FileUploads full width default style, while still having the actual FileUpload input behaving normal. We wanted something like the preview Webflow has for that:

We tried all provided Filament hooks to achieve it, without luck and found out that a shared css file with custom Tailwind was the best solution in our case:

 /*
This file contains shared CSS styles for all panels.
This file is imported into both `resources/css/filament/admin/theme.css` and `resources/css/filament/xxxx/theme.css`.
*/

/* Favicon File Upload Styles */
.fi-fo-file-upload.favicon .filepond--image-clip {
    @apply !w-8 !h-8;
}

.fi-fo-file-upload.favicon .filepond--image-canvas-wrapper,
.fi-fo-file-upload.favicon .filepond--image-bitmap,
.fi-fo-file-upload.favicon .filepond--image-bitmap canvas {
    @apply !w-full !h-full !transform-none;
}

I hope this answer finds you well, not that I have any correct solution or deeper logic for what you should do, but maybe this gives you an idea of what other people are doing in similar situations 😁

[ShaungBhone]

Hey Steffen, thanks a lot! Great to hear someone else dealt with this too. The CSS approach is super useful — I'll give it a try! 🙏