File Upload: Image Column

File Upload: Image Column

2024-10-16 وقت القراءه : 1 دقائق

للتعامل مع رفع الصور في Filament بكل بساطه كل ما علينا القيام به هو تعريف هذا الحقل، لذلك نذهب ProductResource بداخل الدالة form-schema نضيف تعريف FileUpload

public static function form(Form $form): Form
{
    return $form
        ->schema([
            Forms\Components\TextInput::make('name')
                ->required()
                ->maxLength(255),
            Forms\Components\TextInput::make('price')
                ->required(),
            Forms\Components\FileUpload::make('image')
        ]);

}

كما نرى أنه بالوضع الإفتراضي يتم إستخدام filepond في رفع الصور.


عرض الصور

عند عرض البيانات، لإضافه إمكانية عرض الصوره بجانب Name, Price نذهب table-columns. ونضيف ImageColumn ويمكن لنا تحديد العرض والطول

public static function table(Table $table): Table
{
    return $table
        ->columns([
            Tables\Columns\ImageColumn::make('image')->width(100)->height(100),
            Tables\Columns\TextColumn::make('name')->sortable()->searchable(),
            Tables\Columns\TextColumn::make('price')->sortable(),
        ])
        ->defaultSort('price','desc')
        ->filters([
            //
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
        ])
        ->bulkActions([
            Tables\Actions\BulkActionGroup::make([
                Tables\Actions\DeleteBulkAction::make(),
            ]),
        ]);
}


إضافة تعليق
Loading...