Renders a BlueImp jQuery File Upload plugin. That plugin integrates multiple file selection, drag&drop support, progress bars, validation and preview of images.
The preferred way to install this extension is through composer.
Either run
$ composer require 2amigos/yii2-file-upload-widget:~1.0or add
"2amigos/yii2-file-upload-widget": "~1.0"
to the require section of your composer.json file.
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
use dosamigos\fileupload\FileUploadUI;
// with UI
?>
<?= 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)) {
FileHelper::createDirectory($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) {
$fileName = basename($file);
$path = '/img/temp/' . Yii::$app->session->id . DIRECTORY_SEPARATOR . $fileName;
$output['files'][] = [
'name' => $fileName,
'size' => filesize($file),
'url' => $path,
'thumbnailUrl' => $path,
'deleteUrl' => 'image-delete?name=' . $fileName,
'deleteType' => 'POST',
];
}
return Json::encode($output);
}Please, check the jQuery File Upload documentation for further information about its configuration options.
TODO
$ ./vendor/bin/phpunitPlease see CONTRIBUTING for details.
The BSD License (BSD). Please see License File for more information.
web development has never been so fun
www.2amigos.us
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent