Filament•2w ago

Modify Upload File Interface?

I'm creating an app that allows importing up to 100 CSV files at once. When using the default file upload, it looks really messy, the progress bars stack vertically or horizontally and stretch too far. Is there a way to customize it? Could someone give me a few pointers? Thanks!

Solution:

Form schema add an extra class to the field ```...

Jump to solution

13 Replies

awcodes•2w ago

In what world is someone uploading 100 csv files?

HGalihOP•2w ago

It’s for a scraper app integration, each CSV contains 60–100 products grouped by keyword. That’s just how the scraper outputs them, so merging isn’t practical. The importer already works efficiently. I’m just trying to improve the UI aesthetics now haha You maybe know the best way to do it?

awcodes•2w ago

Obviously I don’t because the use case doesn’t make sense to me.

HGalihOP•2w ago

I know it’s a really niche setup, but trust me, this is the only way to make it work with the company’s existing software 😂 Everything else is an UX nightmare

awcodes•2w ago

So, offload it to a queue worker. Just saying I think it’s a laravel thing and not a filament thing.

HGalihOP•2w ago

I did, the progress went smoothly. It just the UI stretches so much, I don't like it aesthetics Wait I think you miss understand, let me give you a screenshot

HGalihOP•2w ago

This is what I mean, imagine 100 of that card Stacking them vertically won’t work either, it just keeps adding up and forces the user to scroll all the way down to reach the action.

awcodes•2w ago

I can’t even fathom 100 file uploads. Sorry.

HGalihOP•2w ago

🙁

awcodes•2w ago

Could always try to modify it with css.

Solution

Komodo•2w ago

Form schema add an extra class to the field

public function form(Schema $schema): Schema
    {
        return $schema
            ->statePath('data')
            ->components([
                FileUpload::make('file')
                    ->multiple()
                    ->panelLayout('grid')
                    ->extraAttributes([
                        'class' => 'custom-file-input',
                    ])
            ]);
    }

public function form(Schema $schema): Schema
    {
        return $schema
            ->statePath('data')
            ->components([
                FileUpload::make('file')
                    ->multiple()
                    ->panelLayout('grid')
                    ->extraAttributes([
                        'class' => 'custom-file-input',
                    ])
            ]);
    }

theme.css Customize the css in your custom theme css file.

  .custom-file-input .filepond--item{
      @apply size-[80px];
  }

  .custom-file-input .filepond--item{
      @apply size-[80px];
  }

HGalihOP•2w ago

Thank you, it helps me a lot

Gaming

Programming

Modify Upload File Interface?

Did you find this page helpful?