Skip to content

Overview

AuraFileUpload extends Filament\Forms\Components\FileUpload and layers on a branded drop zone via pure CSS. No Blade view overrides, no new JavaScript, no Filepond replacement — every upstream option (->image(), ->avatar(), ->imageEditor(), ->multiple(), ->reorderable(), ->disk(), etc.) continues to work unchanged.

Usage

use BlueStarSystem\AuraFilament\Forms\Components\AuraFileUpload;

AuraFileUpload::make('attachment')
    ->label('Attachment')
    ->disk('public')
    ->directory('attachments')
    ->maxSize(5120)
    ->helperText('Drag a file in or click to browse. Max 5 MB.');

Because every method inherits from Filament's FileUpload, you can use it as a drop-in replacement wherever you have FileUpload::make(...) today.

Visual behavior

State What you see
Default Glass panel, dashed neutral border, soft blur on the page behind
Hover Border → primary (at 0.55 alpha), soft primary glow on the outside
Drag-over Border → solid primary, panel tinted light primary at 0.06 alpha
Focus within Same primary border + glow as hover, for keyboard users
Dark mode Darker glass card, border alpha scaled for the dark surface

Uploaded file tiles get rounded corners matching --aura-radius-md, and the progress indicator uses --primary-600 so it always matches the active theme — including when the end user has changed the primary via the theme configurator.

Avatar variant

AuraFileUpload::make('avatar')
    ->label('Avatar')
    ->avatar()
    ->image()
    ->imageEditor()
    ->disk('public')
    ->directory('avatars');

The avatar variant uses a solid (not dashed) border and a transparent background so the image breathes, while still getting the primary hover glow. The built-in image editor inherits the same glass treatment.

How the styling is wired

Behind the scenes, AuraFileUpload overrides getExtraAttributes() to ensure the root always carries the class fi-aura-fo-file-upload. The stylesheet targets that class and descends into Filepond's own classes (.filepond--root, .filepond--drop-label, .filepond--item, .filepond--file).

This design means:

  • If you call ->extraAttributes(['class' => 'my-thing']), your class is preserved and the Aura marker is still applied.
  • If you include the marker class yourself, it's not duplicated.
  • The component works identically to FileUpload in every other respect — tests, validation, uploads, all of it.

Example: profile form

use BlueStarSystem\AuraFilament\Forms\Components\AuraFileUpload;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Components\Section;

Section::make('Profile')
    ->columns(2)
    ->components([
        TextInput::make('name')->required(),
        TextInput::make('email')->email()->required(),

        AuraFileUpload::make('avatar')
            ->label('Avatar')
            ->avatar()
            ->image()
            ->imageEditor()
            ->disk('public')
            ->directory('avatars')
            ->columnSpanFull(),

        AuraFileUpload::make('cv')
            ->label('CV')
            ->acceptedFileTypes(['application/pdf'])
            ->maxSize(10240)
            ->downloadable()
            ->columnSpanFull(),
    ]);

See both the attachment and avatar variants on demo.aura-ui.com/admin/components-showcase.