PHP code example of limion / yii2-jquery-fileupload-widget

1. Go to this page and download the library: Download limion/yii2-jquery-fileupload-widget library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php. 
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

limion / yii2-jquery-fileupload-widget example snippets



use limion\jqueryfileupload\JQueryFileUpload;

 $form = ActiveForm::begin(); 


use limion\jqueryfileupload\JQueryFileUpload;

 $form = ActiveForm::begin(); 


use limion\jqueryfileupload\JQueryFileUpload;

$js = <<< 'JS'
var uploadButton = $('<button/>')
    .addClass('btn btn-primary')
    .prop('disabled', true)
    .text('Processing...')
    .on('click', function (e) {
        e.preventDefault();
        var $this = $(this),
            data = $this.data();
        $this
            .off('click')
            .text('Abort')
            .on('click', function () {
                $this.remove();
                data.abort();
            });
        data.submit().always(function () {
            $this.remove();
        });
    }); 
JS;

$this->registerJs($js);




use limion\jqueryfileupload\JQueryFileUpload;

<?= limion\jqueryfileupload\JQueryFileUpload::widget([
        'url' => ['upload', 'someparam' => 'somevalue'], // your route for saving images,
        'appearance'=>'basic', // available values: 'ui','plus' or 'basic'
        'name' => 'files[]',
        'options' => [
            'accept' => 'image/*'
        ],
        'clientOptions' => [
            'maxFileSize' => 2000000,
            'dataType' => 'json',
            'acceptFileTypes'=>new yii\web\JsExpression('/(\.|\/)(gif|jpe?g|png)$/i'),
            'autoUpload'=>true
        ],
        'clientEvents' => [
            'done'=> "function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p/>').text(file.name).appendTo('#files');
                });
            }",
            'progressall'=> "function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }"
        ]
    ]);