2amigos

What is the BlueImp File Upload Widget?

The File Upload Widget, renders a BlueImp jQuery File Upload plugin. That plugin integrates multiple file selection, drag&drop support, progress bars, validation and preview of image.

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 example

The widget comes with two flavors:

• FileUpload: Basic and BasicPlus
• FileUploadUI: BasicPlus UI

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

FileUpload Action Example

For the sake of the example, we have included all code within the Controller's action, but this is actually a pretty bad practice. Always keep your controllers very thin.

public function actionUpload($id)
{
    $tour = Tour::findOne($id);
    if (!$tour) {
        throw new NotFoundHttpException(Yii::t('app', 'Page not found'));
    }
    $picture = new TourPicture(['scenario' => 'upload']);
    $picture->tour_id = $id;
    $picture->image = UploadedFile::getInstance($picture, 'image');
    if ($picture->image !== null && $picture->validate(['image'])) {

        Yii::$app->response->getHeaders()->set('Vary', 'Accept');
        Yii::$app->response->format = Response::FORMAT_JSON;

        $response = [];

        if ($picture->save(false)) {
            // THIS IS THE RESPONSE UPLOADER REQUIRES!
            $response['files'][] = [
                'name' => $picture->image->name,
                'type' => $picture->image->type,
                'size' => $picture->image->size,
                'url' => $picture->getImageUrl(),
                'thumbnailUrl' => $picture->getImageUrl(TourPicture::SMALL_IMAGE),
                'deleteUrl' => Url::to(['delete', 'id' => $picture->id]),
                'deleteType' => 'POST'
            ];
        } else {
            $response[] = ['error' => Yii::t('app', 'Unable to save picture')];
        }
        @unlink($picture->image->tempName);
    } else {
        if ($picture->hasErrors(['picture'])) {
            $response[] = ['error' => HtmlHelper::errors($picture)];
        } else {
            throw new HttpException(500, Yii::t('app', 'Could not upload file.'));
        }
    }
    return $response;
}

Please, check the jQuery File Upload documentation for further information about its configuration options.