Modify appearance of Uploader widget
Demo of Illustrated

Note: as this is a demo, you can't really upload files. However, you can browse for images on your system and test the Uploader widget.


The appearance of the Uploader widget can be modified in many ways. Here is just an example.

Settings of the Uploader widget

<?php
use sjaakp\illustrated\Uploader;
?>

<?php $form = ActiveForm::begin([
    'options' => ['enctype' => 'multipart/form-data']    // important, needed for file upload
]); ?>
    ...        // other form fields
<?= $form->field($model, 'img')->widget(Uploader::class, [
        'stylefileOptions' => [
            'btnClass' => 'btn btn-success',
            'btnText' => 'Please, browse for image'
        ],
        'cropperOptions' => [
            'diagonal' => 240,
            'margin' => 22,
            'sliderPosition' => 'right',
            'sliderOptions' => [
                'animate' => 'slow'
            ]
        ],
        'deleteOptions' => [
            'label' => '<i class="far fa-trash-alt"></i>', // Font Awesome icon
            'title' => 'Delete image'
        ]
    ]) ?>
    ...
<?php ActiveForm::end(); ?>