How to customize File Upload Grid in Filament 4 for more columns

User interface customization is an essential aspect of enhancing the user experience in web applications. In particular, Filament 4 allows developers to customize file upload components, such as the File Upload Grid, to better fit the project's needs. Below is a detailed explanation of how to increase the number of columns in this component.

Creating a Custom Theme

To begin, it's crucial to establish a custom theme. Filament allows you to modify the CSS used to render the user interface by creating a custom stylesheet, known as a "theme." These themes use Tailwind CSS as a foundation.

To create a custom theme for a panel, you can run the following command in the terminal:

php artisan make:filament-theme

If you have multiple panels and wish to specify a theme for a particular one, use:

Read also

Setting Up Filament PHP for Production

Solution to the 404 error of Laravel Filament 4: livewire.js in production

php artisan make:filament-theme admin

By default, this command uses NPM to install the necessary dependencies. If you prefer to use another package manager, there is the --pm option:

php artisan make:filament-theme --pm=bun

This command will perform the following actions:

1. It will install the necessary Tailwind CSS dependencies.
2. It will generate a CSS file in resources/css/filament/{panel}/theme.css.
3. It will attempt to automatically add the theme to the input array in vite.config.js.
4. It will try to register ->viteTheme() in the panel provider.
5. It will offer the option to compile the theme using Vite.

If the command cannot automatically set up the files (due to a non-standard format), it will display manual instructions. To do this, the following steps must be followed:

Read also

How to Implement Gravatar in Filament: Step-by-Step Guide

How to enable profile display for user in Filament

Manual Setup

1. Add the theme CSS file to the input array of the Laravel plugin in vite.config.js:

input: [
    // ...
    'resources/css/filament/admin/theme.css',
]

1. Register the CSS file generated by Vite in the panel provider:

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->viteTheme('resources/css/filament/admin/theme.css');
}

Customizing Columns with CSS

Once the theme is created and configured, the next step is to customize the column layout. To modify the default layout from 3 columns to, for example, 5 columns, the following CSS code should be added to the theme.css file of the custom theme. Since Filament uses FilePond internally, you'll need to target the width classes of the specific FilePond elements:

.filepond--item {
    width: calc(20% - 0.5em);
}

This adjustment will allow the File Upload Grid layout to be more flexible and adapt to the increased number of columns.

Finally, it is necessary to compile the theme using Vite with the following command:

npm run build

Conclusion

Customizing the File Upload Grid in Filament 4 to incorporate more columns is a process that allows for greater flexibility and adaptability in file uploads. Through the creation of a custom theme and adjustments to the CSS, the arrangement of elements in the user interface is improved. This not only optimizes the experience for the end user but also reflects a more tailored approach in application design.

For more tips and guides on development and customization in Filament, readers are encouraged to continue exploring the content of this blog.