Skip to content

vaszloy/yii2-file-upload-widget

 
 

Repository files navigation

BlueImp File Upload Widget for Yii2

Latest Version Software License Build Status Coverage Status Quality Score Total Downloads

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

Installation

The preferred way to install this extension is through composer.

Either run

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

or add

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

to the require section of your composer.json file.

Usage

The widget comes with two flavors:

<?php
use dosamigos\fileupload\FileUpload;

// without 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);
                            }',
    ],
]);?>

<?php

// with UI

use dosamigos\fileupload\FileUploadUI;
?>
<?= 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()
{
        $model = new WhateverYourModel();

    $imageFile = UploadedFile::getInstance($model, 'image');
    $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.

Using the Actions

TODO

Testing

$ ./vendor/bin/phpunit

Contributing

Please see CONTRIBUTING for details.

Credits

License

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


web development has never been so fun
www.2amigos.us

About

BlueImp File Upload Widget for Yii2

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • PHP 100.0%