Upload and process files and images.
Based on jquery.fileapi Link to github
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist deanar/yii2-file-processor:"0.1.*"or add
"deanar/yii2-file-processor": "0.1.*"to the require section of your composer.json file and update composer dependencies;
If installation fails, try to use minimum stability: dev.
Then run migrations
./yii migrate/up --migrationPath=@deanar/fileProcessor/migrationsInclude module into your web config
'modules' => [
'fp' => [
'class' => 'deanar\fileProcessor\Module',
//'image_driver' => \deanar\fileProcessor\models\Uploads::IMAGE_DRIVER_GD,
'variations_config' => require(__DIR__ . '/file_processor_variations.php'),
//'root_path' => '@frontend/web', // default: @webroot
//'root_url' => 'http://front.example.com', // default: current host (Yii::$app->request->getHostInfo())
'upload_dir' => 'uploads',
//'default_quality' => 95,
//'default_resize_mod' => 'outbound',
//'unlink_files' => true,
//'debug' => true, // FileAPI debug. false by default
],
]Attach behavior to your model
public function behaviors()
{
return [
'fileSequence' => [
'class' => \deanar\fileProcessor\behaviours\ConnectFileSequence::className(),
'defaultType' => 'projects',
'registeredTypes' => ['projects', 'files'], // or 'projects, files' as string
]
];
}Create file file_processor_variations.php in config directory and configure image variations like:
use deanar\fileProcessor\components\WatermarkFilter;
return [
'projects' => [
'_original' => false,
'thumb' => [200, 150, 'inset'],
'small' => [300, 200, 'outbound', 75],
'big' => [
'width' => 600,
'height' => 350,
'mode' => 'outbound',
'quality' => 75,
'watermark' => [
'path' => 'watermark.png',
'position' => WatermarkFilter::WM_POSITION_BOTTOM_RIGHT,
'margin' => 10,
]
],
],
'article_header' => [
'_original' => true,
'thumb' => [200, 150, 'inset'],
],
'avatar_picture' => [
'_original' => true,
'preview' => [200, 200, 'outbound'],
// For single file uploads. Automatically will be updated 'avatar' attribute in 'Project' model
// with <id> of currently uploaded file
'_insert' => ['app\models\Project' => 'avatar'],
// variants of access control definitions
'_acl' => '*', // * - all users, like without _acl
'_acl' => '@', // @ - authenticated users only
'_acl' => ['users' => ['admin', 'user1']], // defined list of users
'_acl' => ['app\models\Project' => 'user_id'], // if current user id equals to `user_id` attribute of model `app\models\Project`
'_acl' => function ($type_id, $user_id) { // callable check
return \app\models\Project::findOne($type_id)->user_id == $user_id;
},
],
// Used if no variation with specified name found
'_default' => [ ],
// Mixin for all variations. Used by merging arrays.
'_all' => [ ],
];NB! Don't forget to disable php execution in your upload dir.
For example: If you use Apache web server, you can create .htaccess file in the root of upload directory with the following code inside:
RemoveHandler .php
AddType text/html .phpRun migrations
./yii migrate/up --migrationPath=@deanar/fileProcessor/migrationsIn ConnectFileSequence behaviour replace deleteTypes property to registeredTypes.
Once the extension is installed, simply use it in your form by adding widget code to view:
Multi upload widget:
<?= \deanar\fileProcessor\widgets\MultiUploadWidget::widget([
'type' => 'projects',
'type_id' => $model->id,
'options' => [
'autoUpload' => true,
'multiple' => true,
'accept' => 'image/*,application/zip',
'duplicate' => false,
'maxSize' => '2M', // you can use 'M', 'K', 'G' or simple size in bytes
'maxFiles' => 3,
'imageSize' => [
'minWidth' => 150,
'maxWidth' => 2000,
'minHeight' => 150,
'maxHeight' => 2000,
],
],
'htmlOptions' => [
'class' => 'additional-class',
'data-attribute' => 'value',
],
]) ?>Single upload widget:
<?= \deanar\fileProcessor\widgets\SingleUploadWidget::widget([
'type' => 'projects',
'type_id' => $model->id,
'crop' => true,
'preview' => true,
'previewSize' => [200,200],
'options' => [
'accept' => 'image/*',
'maxSize' => '2M', // you can use 'M', 'K', 'G' or simple size in bytes
'imageSize' => [
'minWidth' => 150,
'maxWidth' => 2000,
'minHeight' => 150,
'maxHeight' => 2000,
],
],
'htmlOptions' => [
'class' => 'additional-class',
'data-attribute' => 'value',
],
]) ?>If preview is set to false, crop automatically set to false and will be very simple upload widget.
If crop set to true, accept option automatically set to 'image/*'.
For single upload without crop, autoUpload automatically set to true.
To setup size of window and minimum size of crop area use previewSize property. Default is [200,200].
imageAutoOrientation option is set to false by default
You can access your images\files by:
$model = ExampleModel::findOne(1);
$uploads = $model->getFiles();
foreach($uploads as $u){
echo $u->imgTag('thumb2', true,['style'=>'border:1px solid red;']);
//or just url (for files/download links)
echo \yii\helpers\Html::a($u->original, $u->getPublicFileUrl('original', true));
}You can filter files like this:
$uploads = $model->imagesOnly()->getFiles();
// or
$uploads = $model->filesOnly()->getFiles();You can fetch first file in the row:
$uploads = $model->getFirstFile();You can display your images\files in the GridView.
Add in the column list:
[
'class' => 'deanar\fileProcessor\components\ImageColumn',
'header' => 'Image', // optional
'empty' => 'No Image', // optional
'type' => 'projects', // optional, default value goes from behavior options
'variation' => '_thumb',
'htmlOptions' => [], // optional
],You can display list of your images\files anywhere else via DisplayWidget, e.g. in DetailView widget or just in the view.
Case with DetailView:
'attributes' => [
'id',
'title',
...
[
'attribute'=>'Images',
'value'=>\deanar\fileProcessor\widgets\DisplayWidget::widget(['type'=>'projects','type_id'=>$model->id,'variation'=>'_thumb']),
'format'=>'raw',
],
...
'text',
],All properties of DisplayWidget are required.
=======
imageAutoOrientation option is set to false by default