How to Upload Image in Laravel 10 Filament v3

In this section, we will see how to upload an image in Laravel 10 using FilamentPHP v3.

You can use the FileUpload component to upload image files.

use Filament\Forms\Components\FileUpload;
 
FileUpload::make('attachment')

Additionally, we will integrate image upload functionality into a Laravel 10 Filament v3 CRUD application.

Filament/Resources/BlogResource.php

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\BlogResource\Pages;
use App\Filament\Resources\BlogResource\RelationManagers;
use App\Models\Blog;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Textarea;
use Filament\Tables\Columns\TextColumn;
use Filament\Forms\Components\Section;
use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\FileUpload;
use Filament\Tables\Columns\ImageColumn;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;

class BlogResource extends Resource
{
    protected static ?string $model = Blog::class;

    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make()
                    ->schema([
                        TextInput::make('title')->required(),
                        FileUpload::make('image'),
                        RichEditor::make('content')->required(),
                    ])
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('id'),
                TextColumn::make('title'),
                ImageColumn::make('image')->square(),
                TextColumn::make('content')->limit(20)->markdown(),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ])
            ->emptyStateActions([
                Tables\Actions\CreateAction::make(),
            ]);
    }

    public static function getRelations(): array
    {
        return [
            //
        ];
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListBlogs::route('/'),
            'create' => Pages\CreateBlog::route('/create'),
            'edit' => Pages\EditBlog::route('/{record}/edit'),
        ];
    }
}

Make sure create symbolic link by run.

php artisan storage:link

You can configure the storage disk and directory for a specific field, as well as the visibility of files, using the disk(), directory(), and visibility() methods.

use Filament\Forms\Components\FileUpload;
 
FileUpload::make('attachment')
    ->disk('s3')
    ->directory('form-attachments')
    ->visibility('private')

You can preserving original file names.

use Filament\Forms\Components\FileUpload;
 
FileUpload::make('attachment')
    ->preserveFilenames()

Also you can generating custom file names.

use Livewire\Features\SupportFileUploads\TemporaryUploadedFile;
 
FileUpload::make('attachment')
    ->getUploadedFileNameForStorageUsing(
        fn (TemporaryUploadedFile $file): string => (string) str($file->getClientOriginalName())
            ->prepend('custom-prefix-'),
    )

You can enable an image editor for your file upload field using the imageEditor() method:

use Filament\Forms\Components\FileUpload;
 
FileUpload::make('image')
    ->image()
    ->imageEditor()

You can allow users to crop images to a set of specific aspect ratios using the imageEditorAspectRatios() method.

use Filament\Forms\Components\FileUpload;
 
FileUpload::make('image')
    ->image()
    ->imageEditor()
    ->imageEditorAspectRatios([
        '16:9',
        '4:3',
        '1:1',
    ])

You can also allow users to re-order uploaded files using the reorderable() method.

use Filament\Forms\Components\FileUpload;
 
FileUpload::make('attachments')
    ->multiple()
    ->reorderable()

saim ansari