remocodebe/laravelnova-filepond

A Nova field for uploading File, Image and Video using filepond.

0.2.14 2021-10-05 11:46 UTC

Requires

• php: >=7.1.0

MIT

• file
• upload
• nova
• video
• laravel
• field
• Doka

README

A Nova field for uploading File, Image and Video using Filepond.

Installation

You can install the package via composer:

composer require remocodebe/laravelnova-filepond

Usage

use DigitalCreative\Filepond\Filepond;

class Post extends Resource
{
    public function fields(Request $request)
    {
        return [
            // ...
            Filepond::make('Audio Example')
                    ->multiple() // the default is single upload, use this method to allow multiple uploads
                    ->limit(4) // limit the number of attached files
                    ->rules('required') // every validation rule works!!
                    ->mimesTypes([ 'audio/mp3', 'audio/ogg', 'audio/vnd.wav' ]) // if opmited, accepts anything
                    ->disk('public', '/optional/location') // the second argument instruct the file to be stored into a subfolder
                    ->storeAs(function (Illuminate\Http\File $file) { // this is optional, use in case you need generate custom file names
                        return Str::random(20) . '.' . $file->getExtension();
                    })

        ];

    }
}

When uploading multiple files you will need to cast the attribute to an array in your model class

class Post extends Model {
    
    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'images' => 'array'
    ];

}

Adding an Image Editor

To enable image editing for your users you have to add the Doka Image Editor.

1. Get a license for the editor and download the Doka library files.

2. Publish the configuration file:

php artisan vendor:publish --provider="DigitalCreative\Filepond\FilepondServiceProvider" --tag="config"

1. Set doka.enabled to true and update the path to the doka.min.js and doka.min.css library files.

'doka' => [
    'enabled' => true,
    'js_path' => public_path('doka.min.js'), // this assumes you places theses files within your public directory
    'css_path' => public_path('doka.min.css'),
]

1. Two options are available to enable/disable Doka on a given field, ->withDoka($options) accepts a list of options, you can find the documentation of all possible options here: https://pqina.nl/doka/docs/patterns/api/doka-instance/#properties

public function fields(Request $request)
{
    return [
        //...

        Filepond::make('Avatar')->withDoka([
            'cropShowSize' => true
        ]),
        
        /**
         * This will disable Doka for this specific field
         */
        Filepond::make('Simple Image')->withoutDoka(),

    ];
}

If you've setup everything correctly you should see the edit icon on top of FilePond images.

License

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