├── .gitignore ├── LICENSE ├── README.md ├── composer.json └── src ├── Canvas2BlobAsset.php ├── GalleryAsset.php ├── JQueryFileUpload.php ├── JQueryFileUploadAsset.php ├── JQueryFileUploadPlusAsset.php ├── JQueryFileUploadPlusUIAsset.php ├── JavascriptTemplatesAsset.php ├── LoadImageAsset.php ├── messages ├── en │ └── jqueryfileupload.php ├── pl │ └── jqueryfileupload.php ├── ru │ └── jqueryfileupload.php └── ua │ └── jqueryfileupload.php └── views ├── download.php ├── gallery.php ├── main.php ├── mainPlusUI.php └── upload.php /.gitignore: -------------------------------------------------------------------------------- 1 | /nbproject 2 | /vendor 3 | /composer.lock -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2016, limion 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | * Neither the name of yii2-jquery-fileupload-widget nor the names of its 15 | contributors may be used to endorse or promote products derived from 16 | this software without specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 22 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 23 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 24 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 25 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 26 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 27 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #Blueimp file upload widget for Yii2 2 | 3 | Yii2 port of [BlueImp jQuery File Upload plugin](http://blueimp.github.io/jQuery-File-Upload/). File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. 4 | Supports cross-domain, chunked and resumable file uploads and client-side image resizing. 5 | 6 | One widget, simple configuration, everything works out of the box. 7 | 8 | Inspired by https://github.com/2amigos/yii2-file-upload-widget 9 | 10 | ### Installation 11 | 12 | From command line 13 | 14 | ```bash 15 | $ composer require limion/yii2-jquery-fileupload-widget:~1.0 16 | ``` 17 | 18 | or add to your composer.json 19 | 20 | ``` 21 | "require": { 22 | "limion/yii2-jquery-fileupload-widget": "~1.0" 23 | } 24 | ``` 25 | 26 | ### Usage 27 | 28 | #### UI version 29 | See: https://blueimp.github.io/jQuery-File-Upload/index.html 30 | Please note, in case of using a "UI" version you need to embed the widget to an existing form. 31 | ```PHP 32 | 36 | $model, 38 | 'attribute' => 'img', 39 | 'url' => ['upload', 'someparam' => 'somevalue'], // your route for saving images, 40 | 'appearance'=>'ui', // available values: 'ui','plus' or 'basic' 41 | 'gallery'=>true, // whether to use the Bluimp Gallery on the images or not 42 | 'formId'=>$form->id, 43 | 'options' => [ 44 | 'accept' => 'image/*' 45 | ], 46 | 'clientOptions' => [ 47 | 'maxFileSize' => 2000000, 48 | 'dataType' => 'json', 49 | 'acceptFileTypes'=>new yii\web\JsExpression('/(\.|\/)(gif|jpe?g|png)$/i'), 50 | 'autoUpload'=>false 51 | ] 52 | ]);?> 53 | 54 | ``` 55 | ##### Customizing the UI 56 | You can use your own templates to customize the look and feel of upload,download and main views 57 | 58 | ```PHP 59 | 63 | $model, 65 | 'attribute' => 'img', 66 | 'url' => ['upload', 'someparam' => 'somevalue'], // your route for saving images, 67 | 'appearance'=>'ui', // available values: 'ui','plus' or 'basic' 68 | 'uploadTemplateView'=>'@app/views/jqueryfileupload/upload', // upload template 69 | 'downloadTemplateView'=>'@app/views/jqueryfileupload/download', // download template 70 | 'mainView'=>'@app/views/jqueryfileupload/main', // main view with buttonbar 71 | 'formId'=>$form->id, 72 | 'clientOptions' => [ 73 | 'maxFileSize' => 2000000, 74 | 'autoUpload'=>false 75 | ] 76 | ]);?> 77 | 78 | ``` 79 | 80 | #### Plus version 81 | See: https://blueimp.github.io/jQuery-File-Upload/basic-plus.html 82 | 83 | ```PHP 84 | ') 89 | .addClass('btn btn-primary') 90 | .prop('disabled', true) 91 | .text('Processing...') 92 | .on('click', function (e) { 93 | e.preventDefault(); 94 | var $this = $(this), 95 | data = $this.data(); 96 | $this 97 | .off('click') 98 | .text('Abort') 99 | .on('click', function () { 100 | $this.remove(); 101 | data.abort(); 102 | }); 103 | data.submit().always(function () { 104 | $this.remove(); 105 | }); 106 | }); 107 | JS; 108 | 109 | $this->registerJs($js); 110 | 111 | ?> 112 | 113 | 'files[]', 115 | 'url' => ['upload', 'someparam' => 'somevalue'], // your route for saving images, 116 | 'appearance'=>'plus', // available values: 'ui','plus' or 'basic' 117 | 'options' => ['accept' => 'image/*'], 118 | 'clientOptions' => [ 119 | 'maxFileSize' => 2000000, 120 | 'acceptFileTypes'=>new yii\web\JsExpression('/(\.|\/)(gif|jpe?g|png)$/i'), 121 | 'autoUpload'=>false 122 | ], 123 | 'clientEvents' => [ 124 | 'add' => "function (e, data) { 125 | data.context = $('
').appendTo('#files'); 126 | $.each(data.files, function (index, file) { 127 | var node = $('

') 128 | .append($('').text(file.name)); 129 | if (!index) { 130 | node 131 | .append('
') 132 | .append(uploadButton.clone(true).data(data)); 133 | } 134 | node.appendTo(data.context); 135 | }); 136 | }", 137 | 'processalways' => "function (e, data) { 138 | var index = data.index, 139 | file = data.files[index], 140 | node = $(data.context.children()[index]); 141 | if (file.preview) { 142 | node 143 | .prepend('
') 144 | .prepend(file.preview); 145 | } 146 | if (file.error) { 147 | node 148 | .append('
') 149 | .append($('').text(file.error)); 150 | } 151 | if (index + 1 === data.files.length) { 152 | data.context.find('button') 153 | .text('Upload') 154 | .prop('disabled', !!data.files.error); 155 | } 156 | }", 157 | 'progressall' => "function (e, data) { 158 | var progress = parseInt(data.loaded / data.total * 100, 10); 159 | $('#progress .progress-bar').css( 160 | 'width', 161 | progress + '%' 162 | ); 163 | }", 164 | 'done' => "function (e, data) { 165 | $.each(data.result.files, function (index, file) { 166 | if (file.url) { 167 | var link = $('') 168 | .attr('target', '_blank') 169 | .attr('data-gallery','') 170 | .prop('href', file.url); 171 | $(data.context.children()[index]) 172 | .wrap(link); 173 | } else if (file.error) { 174 | var error = $('').text(file.error); 175 | $(data.context.children()[index]) 176 | .append('
') 177 | .append(error); 178 | } 179 | }); 180 | }", 181 | 'fail' => "function (e, data) { 182 | $.each(data.files, function (index) { 183 | var error = $('').text('File upload failed.'); 184 | $(data.context.children()[index]) 185 | .append('
') 186 | .append(error); 187 | }); 188 | }" 189 | ], 190 | ]);?> 191 | ``` 192 | 193 | #### Basic version 194 | See: https://blueimp.github.io/jQuery-File-Upload/basic.html 195 | 196 | ```PHP 197 | ['upload', 'someparam' => 'somevalue'], // your route for saving images, 202 | 'appearance'=>'basic', // available values: 'ui','plus' or 'basic' 203 | 'name' => 'files[]', 204 | 'options' => [ 205 | 'accept' => 'image/*' 206 | ], 207 | 'clientOptions' => [ 208 | 'maxFileSize' => 2000000, 209 | 'dataType' => 'json', 210 | 'acceptFileTypes'=>new yii\web\JsExpression('/(\.|\/)(gif|jpe?g|png)$/i'), 211 | 'autoUpload'=>true 212 | ], 213 | 'clientEvents' => [ 214 | 'done'=> "function (e, data) { 215 | $.each(data.result.files, function (index, file) { 216 | $('

').text(file.name).appendTo('#files'); 217 | }); 218 | }", 219 | 'progressall'=> "function (e, data) { 220 | var progress = parseInt(data.loaded / data.total * 100, 10); 221 | $('#progress .progress-bar').css( 222 | 'width', 223 | progress + '%' 224 | ); 225 | }" 226 | ] 227 | ]);?> 228 | ``` 229 | 230 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "limion/yii2-jquery-fileupload-widget", 3 | "description": "Blueimp file upload widget for Yii2", 4 | "keywords": [ 5 | "limion", 6 | "yii2", 7 | "widget", 8 | "upload" 9 | ], 10 | "type": "yii2-extension", 11 | "license": "BSD-3-Clause", 12 | "homepage": "https://github.com/limion/yii2-jquery-fileupload-widget", 13 | "authors": [ 14 | { 15 | "name": "Vladyslav Holovko", 16 | "email": "vlad.holovko@gmail.com" 17 | } 18 | ], 19 | "require": { 20 | "yiisoft/yii2": "~2.0.0", 21 | "yiisoft/yii2-bootstrap": "~2.0.0", 22 | "yiisoft/yii2-jui": "*", 23 | "bower-asset/blueimp-file-upload": "~9.11", 24 | "bower-asset/blueimp-gallery": "~2.17" 25 | }, 26 | "autoload": { 27 | "psr-4": { 28 | "limion\\jqueryfileupload\\": "src" 29 | } 30 | }, 31 | "extra": { 32 | "asset-installer-paths": { 33 | "npm-asset-library": "vendor/npm", 34 | "bower-asset-library": "vendor/bower" 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/Canvas2BlobAsset.php: -------------------------------------------------------------------------------- 1 | 16 | "js/canvas-to-blob.min.js", 17 | ]; 18 | } 19 | -------------------------------------------------------------------------------- /src/GalleryAsset.php: -------------------------------------------------------------------------------- 1 | 20 | "js/jquery.blueimp-gallery.min.js", 21 | ]; 22 | public $depends = [ 23 | 'yii\web\JqueryAsset' 24 | ]; 25 | } 26 | -------------------------------------------------------------------------------- /src/JQueryFileUpload.php: -------------------------------------------------------------------------------- 1 | registerTranslations(); 72 | 73 | if(empty($this->url)) { 74 | throw new InvalidConfigException('"url" cannot be empty.'); 75 | } 76 | if(empty($this->formId) && 'ui' == $this->appearance) { 77 | throw new InvalidConfigException('"formId" cannot be empty in case of "appearance"=="ui".'); 78 | } 79 | if(empty($this->mainView)) { 80 | $this->mainView = 'ui' == $this->appearance ? 'mainPlusUI' : 'main'; 81 | } 82 | 83 | $this->clientOptions['url'] = $this->options['data-url'] = Url::to($this->url); 84 | if (!isset($this->options['multiple'])) { 85 | $this->options['multiple'] = true; 86 | } 87 | } 88 | 89 | /** 90 | * @inheritdoc 91 | */ 92 | public function run() 93 | { 94 | echo $this->render($this->mainView); 95 | if ($this->gallery) { 96 | echo $this->render($this->galleryTemplateView); 97 | } 98 | if('ui' == $this->appearance) { 99 | echo $this->render($this->uploadTemplateView); 100 | echo $this->render($this->downloadTemplateView); 101 | } 102 | 103 | $this->registerClientScript(); 104 | } 105 | 106 | /** 107 | * Registers required script for the plugin to work as jQuery File Uploader 108 | */ 109 | public function registerClientScript() 110 | { 111 | $view = $this->getView(); 112 | 113 | if ($this->gallery) { 114 | GalleryAsset::register($view); 115 | } 116 | switch ($this->appearance) { 117 | case 'ui': 118 | JQueryFileUploadPlusUIAsset::register($view); 119 | break; 120 | 121 | case 'plus': 122 | JQueryFileUploadPlusAsset::register($view); 123 | break; 124 | 125 | default: 126 | JQueryFileUploadAsset::register($view); 127 | } 128 | 129 | $id = $this->formId ? : $this->options['id']; 130 | $this->registerClientOptions('fileupload', $id); 131 | $this->registerClientEvents('fileupload', $id); 132 | } 133 | 134 | /** 135 | * i18n 136 | */ 137 | public function registerTranslations() 138 | { 139 | $i18n = Yii::$app->i18n; 140 | Yii::setAlias('@jqueryfileupload', dirname(__FILE__)); 141 | if (empty($this->i18n)) { 142 | $this->i18n = [ 143 | 'class' => 'yii\i18n\PhpMessageSource', 144 | 'sourceLanguage' => 'en-US', 145 | 'basePath' => '@jqueryfileupload/messages' 146 | ]; 147 | } 148 | Yii::$app->i18n->translations['jqueryfileupload'] = $this->i18n; 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /src/JQueryFileUploadAsset.php: -------------------------------------------------------------------------------- 1 | 19 | "js/vendor/jquery.ui.widget.js", 20 | // 21 | "js/jquery.iframe-transport.js", 22 | // 23 | "js/jquery.fileupload.js", 24 | ]; 25 | public $depends = [ 26 | 'yii\web\JqueryAsset', 27 | //'yii\jui\JuiAsset', 28 | 'yii\bootstrap\BootstrapAsset', 29 | ]; 30 | } 31 | -------------------------------------------------------------------------------- /src/JQueryFileUploadPlusAsset.php: -------------------------------------------------------------------------------- 1 | 16 | "js/jquery.iframe-transport.js", 17 | // 18 | "js/jquery.fileupload-process.js", 19 | // 20 | "js/jquery.fileupload-image.js", 21 | // 22 | "js/jquery.fileupload-audio.js", 23 | // 24 | "js/jquery.fileupload-video.js", 25 | // 26 | "js/jquery.fileupload-validate.js" 27 | ]; 28 | public $depends = [ 29 | 'limion\jqueryfileupload\JQueryFileUploadAsset', 30 | 'limion\jqueryfileupload\LoadImageAsset', 31 | 'limion\jqueryfileupload\Canvas2BlobAsset' 32 | ]; 33 | } 34 | -------------------------------------------------------------------------------- /src/JQueryFileUploadPlusUIAsset.php: -------------------------------------------------------------------------------- 1 | 19 | "js/jquery.fileupload-ui.js" 20 | ]; 21 | public $depends = [ 22 | 'limion\jqueryfileupload\JavascriptTemplatesAsset', 23 | 'limion\jqueryfileupload\JQueryFileUploadPlusAsset' 24 | ]; 25 | } 26 | -------------------------------------------------------------------------------- /src/JavascriptTemplatesAsset.php: -------------------------------------------------------------------------------- 1 | 16 | "js/tmpl.min.js", 17 | ]; 18 | } 19 | -------------------------------------------------------------------------------- /src/LoadImageAsset.php: -------------------------------------------------------------------------------- 1 | 16 | "js/load-image.all.min.js", 17 | ]; 18 | } 19 | -------------------------------------------------------------------------------- /src/messages/en/jqueryfileupload.php: -------------------------------------------------------------------------------- 1 | '', 22 | 'Start upload' => '', 23 | 'Cancel upload' => '', 24 | 'Start' => '', 25 | 'Cancel' => '', 26 | 'Error' => '', 27 | 'Delete' => '', 28 | 'Processing' => '', 29 | ]; -------------------------------------------------------------------------------- /src/messages/pl/jqueryfileupload.php: -------------------------------------------------------------------------------- 1 | 'Dodaj pliki', 22 | 'Start upload' => 'Rozpocznij wysyłanie', 23 | 'Cancel upload' => 'Zatrzymaj wysyłanie', 24 | 'Start' => 'Start', 25 | 'Cancel' => 'Anuluj', 26 | 'Error' => 'Błąd', 27 | 'Delete' => 'Usuń', 28 | 'Processing' => 'Przetwarzanie', 29 | ]; 30 | -------------------------------------------------------------------------------- /src/messages/ru/jqueryfileupload.php: -------------------------------------------------------------------------------- 1 | 'Добавить файлы', 22 | 'Start upload' => 'Начать загрузку', 23 | 'Cancel upload' => 'Отменить загрузку', 24 | 'Start' => 'Загрузить', 25 | 'Cancel' => 'Отмена', 26 | 'Error' => 'Ошибка', 27 | 'Delete' => 'Удалить', 28 | 'Processing' => 'Загрузка', 29 | ]; 30 | -------------------------------------------------------------------------------- /src/messages/ua/jqueryfileupload.php: -------------------------------------------------------------------------------- 1 | 'Додати файли', 22 | 'Start upload' => 'Почати відвантаження', 23 | 'Cancel upload' => 'Скасувати відвантаження', 24 | 'Start' => 'Відвантажити', 25 | 'Cancel' => 'Скасувати', 26 | 'Error' => 'Помилка', 27 | 'Delete' => 'Видалити', 28 | 'Processing' => 'Обробка', 29 | ]; 30 | -------------------------------------------------------------------------------- /src/views/download.php: -------------------------------------------------------------------------------- 1 | 2 | 45 | -------------------------------------------------------------------------------- /src/views/gallery.php: -------------------------------------------------------------------------------- 1 | 2 |

-------------------------------------------------------------------------------- /src/views/main.php: -------------------------------------------------------------------------------- 1 | context; 5 | ?> 6 | 7 |
8 |
9 | 10 | 11 | 12 | ... 13 | 14 | model instanceof \yii\base\Model && $context->attribute !== null ? Html::getInputName($context->model, $context->attribute) : $context->name; 16 | $value = $context->model instanceof \yii\base\Model && $context->attribute !== null ? Html::getAttributeValue($context->model, $context->attribute) : $context->value; 17 | echo Html::hiddenInput($name, $value).Html::fileInput($name, $value, $context->options); 18 | ?> 19 | 20 | 21 |
22 | 23 |
24 | 25 |
26 |
27 |
28 |
29 |
30 | 31 |
32 | -------------------------------------------------------------------------------- /src/views/mainPlusUI.php: -------------------------------------------------------------------------------- 1 | context; 6 | ?> 7 | 8 |
9 |
10 | 11 | 12 | 13 | ... 14 | 15 | model instanceof \yii\base\Model && $context->attribute !== null ? Html::getInputName($context->model, $context->attribute) : $context->name; 17 | $value = $context->model instanceof \yii\base\Model && $context->attribute !== null ? Html::getAttributeValue($context->model, $context->attribute) : $context->value; 18 | echo Html::hiddenInput($name, $value).Html::fileInput($name, $value, $context->options); 19 | ?> 20 | 21 | 22 | 26 | 30 | 34 | 35 | 36 | 37 |
38 | 39 |
40 | 41 |
42 |
43 |
44 | 45 |
 
46 |
47 |
48 | 49 | -------------------------------------------------------------------------------- /src/views/upload.php: -------------------------------------------------------------------------------- 1 | 2 | --------------------------------------------------------------------------------