Filepond Yii2 extension ¶

1. Installation
2. Usage

This extension allows you to use Filepond upload js library as a widget in yii2 projects.

Installation ¶

The preferred way to install this extension is through composer.

Either run

php composer.phar require  vkabachenko/yii2-filepond

or add

"vkabachenko/yii2-filepond": "dev-master"

to the require section of your composer.json file.

Usage ¶

Add the extension to the module section in your config file

    'modules' => [
       'filepond' => [
           'class' => \vkabachenko\filepond\Module::class
       ]
    ],

After that you can use Filepond library to upload files in your project.

Single file upload without model

Single file upload with model

Multiple files upload without model

Multiple files upload with model

Filepond options ¶

Filepond options described at the documentation can be set by setting instanceOptions or settingsOptions.

This is the preferred way:

    <?= FilepondWidget::widget([
            'name' => 'file',
            'instanceOptions' => [
                'required' => true,
                'maxFiles' => 10,
                ... other options ...
            ]
         ]);
    ?>

Filepond plugins ¶

If you want to add some of filepond plugins to the widget, set the allow plugin option to true. For example, to add file type validation plugin set allowFileSizeValidation:

    <?= FilepondWidget::widget([
            'name' => 'file',
            'instanceOptions' => [
                'allowFileSizeValidation' => true,
                'maxFileSize' => '10M',
                ... other options ...
            ]
         ]);
    ?>

Validation ¶

Only client-side validation is available. This kind of validation is the part of filepond library. You can add file size and file type validation. Example of file type validation:

    <?= FilepondWidget::widget([
            'name' => 'file',
            'instanceOptions' => [
                'allowFileTypeValidation' => true,
                'acceptedFileTypes' => ['image/*']
            ]
                ... other options ...
            ]
         ]);
    ?>

Localization ¶

Original library isn't localized and has only english labels. This widget has russian translations too. To apply the localization you have to set language option in Yii settings or directly in the widget:

    <?= FilepondWidget::widget([
            'name' => 'file',
            'language' => 'ru-RU'
         ]);
    ?>

Two or more widget instances on the page ¶

Simply separate widget class definitions.

Widget 1:

    <?= FilepondWidget::widget([
            'filepondClass' => 'filepond-class-1',
            'name' => 'file',
            'instanceOptions' => [
                ... first widget options ...
            ]
         ]);
    ?>

Widget 2:

    <?= FilepondWidget::widget([
            'filepondClass' => 'filepond-class-2',
            'model' => $uploadForm,
            'attribute' => 'files[]',
            'instanceOptions' => [
                ... second widget options ...
            ]
         ]);
    ?>