Skip to main content
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

​
disk
method
Sets the storage disk.
FileUpload::make('attachment')
    ->disk('s3')
​
directory
method
Sets the upload directory.
FileUpload::make('attachment')
    ->directory('attachments')
​
visibility
method
Sets file visibility (public/private).
FileUpload::make('document')
    ->visibility('private')
​
multiple
method
Allows multiple file uploads.
FileUpload::make('attachments')
    ->multiple()
​
acceptedFileTypes
method
Restricts file types.
FileUpload::make('document')
    ->acceptedFileTypes(['application/pdf'])

FileUpload::make('image')
    ->acceptedFileTypes(['image/*'])
​
maxSize
method
Sets maximum file size in kilobytes.
FileUpload::make('attachment')
    ->maxSize(10240) // 10MB
​
minSize
method
Sets minimum file size in kilobytes.
FileUpload::make('attachment')
    ->minSize(100)
​
image
method
Restricts uploads to images only.
FileUpload::make('avatar')
    ->image()
​
imageEditor
method
Enables the image editor.
FileUpload::make('avatar')
    ->image()
    ->imageEditor()
​
imageEditorAspectRatios
method
Sets available aspect ratios in image editor.
FileUpload::make('thumbnail')
    ->image()
    ->imageEditor()
    ->imageEditorAspectRatios(['16:9', '4:3', '1:1'])
​
imageCropAspectRatio
method
Forces image cropping to specific aspect ratio.
FileUpload::make('avatar')
    ->image()
    ->imageCropAspectRatio('1:1')
​
imageResizeTargetWidth
method
Resizes images to target width.
FileUpload::make('photo')
    ->image()
    ->imageResizeTargetWidth('1920')
​
imageResizeTargetHeight
method
Resizes images to target height.
FileUpload::make('photo')
    ->image()
    ->imageResizeTargetHeight('1080')
​
avatar
method
Enables avatar mode (circular display).
FileUpload::make('avatar')
    ->avatar()
​
preserveFilenames
method
Preserves original filenames.
FileUpload::make('attachment')
    ->preserveFilenames()
​
getUploadedFileNameForStorageUsing
method
Customizes filename generation.
use Livewire\Features\SupportFileUploads\TemporaryUploadedFile;

FileUpload::make('attachment')
    ->getUploadedFileNameForStorageUsing(
        fn (TemporaryUploadedFile $file): string => 
            (string) str($file->getClientOriginalName())
                ->prepend('custom-prefix-')
    )
​
storeFileNamesIn
method
Stores original filenames in separate field.
FileUpload::make('attachments')
    ->multiple()
    ->storeFileNamesIn('attachment_file_names')
​
openable
method
Allows opening files in new tab.
FileUpload::make('document')
    ->openable()
​
downloadable
method
Allows downloading files.
FileUpload::make('document')
    ->downloadable()
​
previewable
method
Allows previewing files.
FileUpload::make('image')
    ->previewable()
​
reorderable
method
Allows reordering multiple files.
FileUpload::make('gallery')
    ->multiple()
    ->reorderable()
​
appendFiles
method
Appends new files instead of replacing.
FileUpload::make('documents')
    ->multiple()
    ->appendFiles()
​
maxFiles
method
Limits number of files.
FileUpload::make('gallery')
    ->multiple()
    ->maxFiles(5)
​
minFiles
method
Sets minimum number of files.
FileUpload::make('gallery')
    ->multiple()
    ->minFiles(2)
​
maxParallelUploads
method
Controls parallel upload limit.
FileUpload::make('attachments')
    ->multiple()
    ->maxParallelUploads(1)
​
removeUploadedFileButtonPosition
method
Sets remove button position.
FileUpload::make('image')
    ->removeUploadedFileButtonPosition('left')
​
uploadButtonPosition
method
Sets upload button position.
FileUpload::make('image')
    ->uploadButtonPosition('left')
​
uploadProgressIndicatorPosition
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()

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',
        ];
    }
}

Build docs developers (and LLMs) love

Get started for freeTalk to us