MoonShine MoonShine
EN
← All plugins

MoonShine FilePond

Made by the authors of MoonShine

MoonShine FilePond is a modern file upload field for the MoonShine admin panel, powered by the FilePond library. It features drag-and-drop functionality, image previews, multiple file uploads, and provides seamless integration for Laravel projects.

Rating
5
Downloads
37
Version
0.2.1
Last updated
21.01.2026
MoonShine version
v4
Github stars
4
Install
Danil Shutsky
Author
Danil Shutsky
More from this author
Manager Seo

Manager Seo

Laravel SEO By URL - это пакет для управления SEO-метаданными в Laravel 9+ и PHP 8+, который позволяет легко сохранять и управлять SEO-информацией (заголовки, описания, ключевые слова, og-теги) для страниц сайта на основе их URL, с поддержкой кэширования и интеграцией с MoonShine админ-панелью.

5
8689 downloads
Sortable tree resource

Sortable tree resource

MoonShine Tree Resource - это расширение для MoonShine v2.0+, которое добавляет возможность создания и управления древовидными структурами с функцией сортировки (drag-and-drop), позволяя легко организовывать иерархические данные, такие как категории или меню.

5
17108 downloads
Input extension - display the number of characters

Input extension - display the number of characters

Character counter extension for MoonShine Laravel admin panel's input fields. This lightweight package adds a real-time character count display to text inputs, with optional minimum and maximum length validation and visual warnings. Perfect for content management where character limits are important.

5
234 downloads
Other packages from the category
Moonshine Slider - слайдер

Moonshine Slider - слайдер

MoonShine Slider
A customizable slider component for MoonShine, allowing dynamic presentation of items in the admin panel with adjustable settings for layout, looping, and navigation.

5
61 downloads
MoonShine kanban board resource

MoonShine kanban board resource

MoonShine Kanban Board Resource adds Kanban board functionality to MoonShine, providing an interactive interface for task management with customizable statuses and sorting. The package seamlessly integrates with MoonShine v3.0+ and allows you to define task fields, models, and relationships.

5
543 downloads
Image cropper field for MoonShine Laravel admin panel

Image cropper field for MoonShine Laravel admin panel

Image Cropper Field for MoonShine Laravel Admin Panel adds an image cropping feature to MoonShine, allowing users to crop images directly within the admin panel. The package integrates seamlessly with MoonShine v2.0+, and all methods used for the Image field are supported.

5
32 downloads

Probably russian text:

Total Downloads Latest Stable Version License

Laravel 10+ PHP 8.2+

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
composer require moonshine/filepond

Publish assets:

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

Optionally, publish translations:

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

Usage

Basic Usage

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

Multiple Files

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

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

protected function casts(): array
{
    return [
        'images' => 'array', // or 'collection', 'json'
    ];
}
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');
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
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();
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.
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();
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'),
    ];
}
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
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.

GitHub
YouTube YouTube
Telegram Telegram
Discord Discord