yii2-extension yii2-file-upload-widget {🖫 16, ⚐ 9, ★ 1}

ruvents/yii2-file-upload-widget

Blueimp file upload widget for the Yii framework

Thursday, July 28, 2016
by RUVENTS
Repository
2 Watchers
1 Stars
16 Installations

PHP
0 Dependents
0 Suggesters
122 Forks
0 Open issues
9 Versions
7 % Grown

The README.md

, _(*1)

Renders a BlueImp jQuery File Upload plugin. That plugin integrates multiple file selection, drag&drop support, progress bars, validation and preview of images., _(*2)

Installation

The preferred way to install this extension is through composer., _(*3)

Either run, _(*4)

$ composer require 2amigos/yii2-file-upload-widget:~1.0

or add, _(*5)

"2amigos/yii2-file-upload-widget": "~1.0"

to the require section of your composer.json file., _(*6)

Usage

The widget comes with two flavors:, _(*7)

FileUpload: Basic and BasicPlus
FileUploadUI: BasicPlus UI



= FileUpload::widget([
    'model' => $model,
    'attribute' => 'image',
    'url' => ['media/upload', 'id' => $model->id], // your url, this is just for demo purposes,
    'options' => ['accept' => 'image/*'],
    'clientOptions' => [
        'maxFileSize' => 2000000
    ],
    // Also, you can specify jQuery-File-Upload events
    // see: https://github.com/blueimp/jQuery-File-Upload/wiki/Options#processing-callback-options
    'clientEvents' => [
        'fileuploaddone' => 'function(e, data) {
                                console.log(e);
                                console.log(data);
                            }',
        'fileuploadfail' => 'function(e, data) {
                                console.log(e);
                                console.log(data);
                            }',
    ],
]);?>


= FileUploadUI::widget([
    'model' => $model,
    'attribute' => 'image',
    'url' => ['media/upload', 'id' => $tour_id],
    'gallery' => false,
    'fieldOptions' => [
            'accept' => 'image/*'
    ],
    'clientOptions' => [
            'maxFileSize' => 2000000
    ],
    // ...
    'clientEvents' => [
            'fileuploaddone' => 'function(e, data) {
                                    console.log(e);
                                    console.log(data);
                                }',
            'fileuploadfail' => 'function(e, data) {
                                    console.log(e);
                                    console.log(data);
                                }',
    ],
]);
?>

<?php

// action examples

public function actionImageUpload()
{
    $imageFile = UploadedFile::getInstanceByName('Transport[name]');
    $directory = \Yii::getAlias('@frontend/web/img/temp') . DIRECTORY_SEPARATOR . Yii::$app->session->id . DIRECTORY_SEPARATOR;
    if (!is_dir($directory)) {
        mkdir($directory);
    }
    if ($imageFile) {
        $uid = uniqid(time(), true);
        $fileName = $uid . '.' . $imageFile->extension;
        $filePath = $directory . $fileName;
        if ($imageFile->saveAs($filePath)) {
            $path = '/img/temp/' . Yii::$app->session->id . DIRECTORY_SEPARATOR . $fileName;
            return Json::encode([
                'files' => [[
                    'name' => $fileName,
                    'size' => $imageFile->size,
                    "url" => $path,
                    "thumbnailUrl" => $path,
                    "deleteUrl" => 'image-delete?name=' . $fileName,
                    "deleteType" => "POST"
                ]]
            ]);
        }
    }
    return '';
}

public function actionImageDelete($name)
{
    $directory = \Yii::getAlias('@frontend/web/img/temp') . DIRECTORY_SEPARATOR . Yii::$app->session->id;
    if (is_file($directory . DIRECTORY_SEPARATOR . $name)) {
        unlink($directory . DIRECTORY_SEPARATOR . $name);
    }
    $files = FileHelper::findFiles($directory);
    $output = [];
    foreach ($files as $file){
        $path = '/img/temp/' . Yii::$app->session->id . DIRECTORY_SEPARATOR . basename($file);
        $output['files'][] = [
            'name' => basename($file),
            'size' => filesize($file),
            "url" => $path,
            "thumbnailUrl" => $path,
            "deleteUrl" => 'image-delete?name=' . basename($file),
            "deleteType" => "POST"
        ];
    }
    return Json::encode($output);
}

Please, check the jQuery File Upload documentation for further information about its configuration options., _(*8)