MoonShine FilePond

A modern file upload field for MoonShine admin panel, powered by the FilePond JavaScript library.

Features

• Drag and drop file uploads
• Image previews with customizable dimensions
• Multiple file uploads with grid layout
• File reordering via drag and drop
• File type validation
• Localization support (EN, RU)
• Seamless integration with MoonShine v4+

Requirements

• PHP 8.2+
• Laravel 10+
• MoonShine 4.0+

Installation

Install the package via Composer:

composer require moonshine/filepond

Publish assets:

php artisan vendor:publish --tag=moonshine-filepond-assets

Optionally, publish translations:

php artisan vendor:publish --tag=moonshine-filepond-lang

Usage

Basic Usage

use MoonShine\Filepond\Fields\Filepond;

Filepond::make('Avatar', 'avatar')
    ->disk('public')
    ->dir('avatars');

Multiple Files

Filepond::make('Gallery', 'images')
    ->disk('public')
    ->dir('gallery')
    ->multiple();

Note: When using multiple(), ensure your model has the appropriate cast for the attribute:

protected function casts(): array
{
    return [
        'images' => 'array', // or 'collection', 'json'
    ];
}

With File Type Restrictions

Filepond::make('Documents', 'files')
    ->disk('public')
    ->dir('documents')
    ->multiple()
    ->acceptExtensions('pdf', 'doc', 'docx');

Configuration Methods

Item Dimensions

Set the preview item height with optional min/max values:

Filepond::make('Image')
    ->itemHeight(150)           // height: 150px
    ->itemHeight(150, 50, 200); // height: 150px, min: 50px, max: 200px

Grid Layout

To disable grid layout and stack items vertically:

Filepond::make('Files')
    ->multiple()
    ->vertical();

Aspect Ratio

Set the panel aspect ratio for the upload area:

Filepond::make('Cover')
    ->aspectRatio('16:9'); // or '1:1', '4:3', etc.

Compact Mode

Enable compact layout where the preview replaces the drop area:

Filepond::make('Thumbnail')
    ->compact();

Complete Example

use MoonShine\Filepond\Fields\Filepond;

public function fields(): array
{
    return [
        // Single file with aspect ratio and compact mode
        Filepond::make('Thumbnail', 'thumbnail')
            ->disk('public')
            ->dir('thumbnails')
            ->acceptExtensions('jpg', 'jpeg', 'png', 'webp')
            ->aspectRatio('16:9')
            ->compact(),

        // Multiple files in a grid layout
        Filepond::make('Gallery', 'images')
            ->disk('public')
            ->dir('gallery')
            ->multiple()
            ->itemHeight(180, 100, 200)
            ->acceptExtensions('jpg', 'jpeg', 'png', 'gif', 'webp'),

        // Documents with vertical layout
        Filepond::make('Documents', 'documents')
            ->disk('public')
            ->dir('documents')
            ->multiple()
            ->vertical()
            ->acceptExtensions('pdf', 'doc', 'docx', 'xls', 'xlsx'),
    ];
}

Localization

The package includes translations for English and Russian. To customize translations, publish the language files:

php artisan vendor:publish --tag=moonshine-filepond-lang

Translation files will be published to lang/vendor/moonshine-filepond/.

License

The MIT License (MIT). Please see License File for more information.