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.