FileUpload

The file upload component is based on Filepond and provides a modern file upload experience.

Basic Usage

use Filament\Forms\Components\FileUpload;

FileUpload::make('attachment')

Available Methods

method

Sets the storage disk.

FileUpload::make('attachment')
    ->disk('s3')

method

Sets the upload directory.

FileUpload::make('attachment')
    ->directory('attachments')

method

Sets file visibility (public/private).

FileUpload::make('document')
    ->visibility('private')

method

Allows multiple file uploads.

FileUpload::make('attachments')
    ->multiple()

method

Restricts file types.

FileUpload::make('document')
    ->acceptedFileTypes(['application/pdf'])

FileUpload::make('image')
    ->acceptedFileTypes(['image/*'])

method

Sets maximum file size in kilobytes.

FileUpload::make('attachment')
    ->maxSize(10240) // 10MB

method

Sets minimum file size in kilobytes.

FileUpload::make('attachment')
    ->minSize(100)

method

Restricts uploads to images only.

FileUpload::make('avatar')
    ->image()

method

Enables the image editor.

FileUpload::make('avatar')
    ->image()
    ->imageEditor()

method

Sets available aspect ratios in image editor.

FileUpload::make('thumbnail')
    ->image()
    ->imageEditor()
    ->imageEditorAspectRatios(['16:9', '4:3', '1:1'])

method

Forces image cropping to specific aspect ratio.

FileUpload::make('avatar')
    ->image()
    ->imageCropAspectRatio('1:1')

method

Resizes images to target width.

FileUpload::make('photo')
    ->image()
    ->imageResizeTargetWidth('1920')

method

Resizes images to target height.

FileUpload::make('photo')
    ->image()
    ->imageResizeTargetHeight('1080')

method

Enables avatar mode (circular display).

FileUpload::make('avatar')
    ->avatar()

method

Preserves original filenames.

FileUpload::make('attachment')
    ->preserveFilenames()

method

Customizes filename generation.

use Livewire\Features\SupportFileUploads\TemporaryUploadedFile;

FileUpload::make('attachment')
    ->getUploadedFileNameForStorageUsing(
        fn (TemporaryUploadedFile $file): string => 
            (string) str($file->getClientOriginalName())
                ->prepend('custom-prefix-')
    )

method

Stores original filenames in separate field.

FileUpload::make('attachments')
    ->multiple()
    ->storeFileNamesIn('attachment_file_names')

method

Allows opening files in new tab.

FileUpload::make('document')
    ->openable()

method

Allows downloading files.

FileUpload::make('document')
    ->downloadable()

method

Allows previewing files.

FileUpload::make('image')
    ->previewable()

method

Allows reordering multiple files.

FileUpload::make('gallery')
    ->multiple()
    ->reorderable()

method

Appends new files instead of replacing.

FileUpload::make('documents')
    ->multiple()
    ->appendFiles()

method

Limits number of files.

FileUpload::make('gallery')
    ->multiple()
    ->maxFiles(5)

method

Sets minimum number of files.

FileUpload::make('gallery')
    ->multiple()
    ->minFiles(2)

method

Controls parallel upload limit.

FileUpload::make('attachments')
    ->multiple()
    ->maxParallelUploads(1)

method

Sets remove button position.

FileUpload::make('image')
    ->removeUploadedFileButtonPosition('left')

method

Sets upload button position.

FileUpload::make('image')
    ->uploadButtonPosition('left')

method

Sets progress indicator position.

FileUpload::make('file')
    ->uploadProgressIndicatorPosition('left')

Common Patterns

Simple File Upload

FileUpload::make('attachment')
    ->disk('public')
    ->directory('attachments')
    ->maxSize(5120)

Image Upload with Validation

FileUpload::make('featured_image')
    ->image()
    ->imageEditor()
    ->imageCropAspectRatio('16:9')
    ->imageResizeTargetWidth('1920')
    ->imageResizeTargetHeight('1080')
    ->maxSize(2048)
    ->required()

Avatar Upload

FileUpload::make('avatar')
    ->avatar()
    ->imageEditor()
    ->imageCropAspectRatio('1:1')
    ->imageResizeTargetWidth('300')
    ->imageResizeTargetHeight('300')
    ->disk('public')
    ->directory('avatars')

Multiple Documents

FileUpload::make('documents')
    ->multiple()
    ->acceptedFileTypes(['application/pdf', 'application/msword'])
    ->maxSize(10240)
    ->maxFiles(5)
    ->reorderable()
    ->downloadable()
    ->openable()

Image Gallery

FileUpload::make('gallery')
    ->image()
    ->multiple()
    ->maxFiles(10)
    ->reorderable()
    ->imageEditor()
    ->directory('galleries')

Database Casting

For multiple file uploads, add an array cast:

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected function casts(): array
    {
        return [
            'attachments' => 'array',
            'attachment_file_names' => 'array',
        ];
    }
}

Form Components

Table Components

Layout Components

Infolist Components

Basic Usage

Available Methods

Common Patterns

Simple File Upload

Image Upload with Validation

Avatar Upload

Multiple Documents

Image Gallery

Database Casting

​Basic Usage

​Available Methods

​Common Patterns

​Simple File Upload

​Image Upload with Validation

​Avatar Upload

​Multiple Documents

​Image Gallery

​Database Casting

Basic Usage

Available Methods

Common Patterns

Simple File Upload

Image Upload with Validation

Avatar Upload

Multiple Documents

Image Gallery

Database Casting