singularity/yii2-dropzoneinput

Dropzone Input for Yii2 framework

1.0 2020-05-06 12:31 UTC

Requires

• bower-asset/jquery-ui-sortable: dev-master
• bower-asset/magnific-popup: dev-master
• bower-asset/slick-carousel: dev-master
• npm-asset/cropperjs: dev-master
• npm-asset/dropzone: dev-master
• yiisoft/yii2: ~2.0.13

Requires (Dev)

• phpunit/phpunit: ~4.0

BSD-3-Clause

• Singularity Solution

• input
• yii
• widget
• yii2
• dropzone
• yii 2
• singularity
• singularity solution
• dropzoneinput

README

Renders a Dropzone Input widget.

Installation

The preferred way to install this extension is through composer.

Either run

$ composer require singularity/yii2-dropzoneinput:~1.0

or add

"singularity/yii2-dropzoneinput": "~1.0"

to the require section of your composer.json file.

Usage

Using with ActiveForm

use singularity\dropzoneinput\DropzoneInput;

...

<?= $form->field($model, 'imageIds'])->widget(DropzoneInput::class, [
    'files' => $data
]); ?>

Using without ActiveForm

use singularity\dropzoneinput\DropzoneInput;

...

<?= DropzoneInput::widget([
    'model' => $model,
    'attribute' => 'imageIds',
    'files' => $data
]) ?>

Options

Preload Files

Example:

[
    'files' => $files // default empty
]

Expected file format:

$file = [
    'id' => 100,
    'name' => 'My image',
    'size' => 5,
    'status' => 'success',
    'url' => Url::to(['/image/view', 'id' => 100, 'spec' => 'w120']), // dropzone thumbnail image url
    'src' => Url::to(['/image/view', 'id' => 100, 'spec' => 'w1200']) // full preview image url
];

Highlight First Item

Example:

[
    'highlightFirst' => true // default false
]

Enable Rotation

Example:

[
    'enableRotate' => true // default false
    'clientOptions' => [
        'rotateUrl' => Url::to(['/image/rotate'])
    ]
]

Enable Preview

Example:

[
    'enablePreview' => true // default false
]

Enable Sort

Example:

[
    'enableSort' => true // default true
]

Enable Crop

Example:

[
    'enableCrop' => true // default false,
    'cropperOptions' => [
        'aspectRatio' => 1.4
    ],
    'clientOptions' => [
        'parallelUploads' => 1 // default 2 (it is recommended to set this to 1 when using crop)
    ],
    'beforeCrop' => new JsExpression("function() {
        console.log('Just before image is cropped!');
    }"),
]

Custom Remove Message

Example:

[
    'removeMessage' => 'Are you sure you want to delete image?' //this is the default
]

see Cropper.JS for full documentation

Contributing

Please see CONTRIBUTING for details.

Credits

• Dositej Grbovic
• All Contributors

License

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

#InventTomorrow
www.singularity.is