• 1. Делаем демо для загрузки фото
• 2. Как сделать галерею фотографий "До и После"
• 3. Как добавить атрибут к загруженному файлу
• 4. Как отсортировать картинки мышкой

---

Если ограничить количество загружаемых файлов небольшой цифрой, то очень скоро каждый следующий посетитель будет вынужден удалять файлы предшественников, прежде, чем сам сможет загрузить файлы.

Для загрузки будет использовано расширение yii2-uploader. Это расширение, которое хранит информацию обо всех загруженных в приложении файлах, в одной модели - OneFile.

Model

В модели, которой нужна загрузка файлов, не создается поле с типом file, а "подмешивается" поведение, которое сохраняет информацию о загруженных файлах.

Создадим модель app\models\Photo.php категорий фотографий. В каждую категорию можно грузить несколько, например 5 фотографий.

namespace app\models;
use yii\base\Model;
use sergmoro1\uploader\behaviors\HaveFileBehavior;
class Photo extends Model
{
    public $id;
    public $category;

Модель не связана с таблицей базы данных. Она будет существовать только в памяти. Этого достаточно, ведь информация о загруженных файлах будет хранится в "реальной" модели. Подмешаем эту модель.

    public function behaviors()
    {
        return [
            [
                'class' => HaveFileBehavior::className(),
                'file_path' => '/photo/',
                'sizes' => [
                    'original' => ['width' => 1200, 'height' => 900, 'catalog' => 'original'],
                    'main'     => ['width' => 800, 'height'  => 600, 'catalog' => ''],
                    'thumb'    => ['width' => 120, 'height'  => 90,  'catalog' => 'thumb'],
                ],
            ]
        ];
    }
    /**
     * @inheritdoc
     */
    public function attributeLabels()
    {
        return [
            'category' => \Yii::t('app', 'Category'),
        ];
    }
    /**
     * Search for a model by ID
     * This method is required for the extension to work.
     * 
     * @param integer $id
     * @return yii\base\Model
     */
    public function findOne($id)
    {
        return new Photo(['id' => $id]);
    }
}

Параметр $sizes задает подкаталоги и размеры в которых будет сохраняться загруженное изображение, file_path определяет основной каталог для хранения файлов модели.

Controller

Будем считать, что категории фотографий неизменны и их количество фиксировано. Пусть их всего будет 4. Проще всего задавать их в виде массива app\controllers\PhotoController.php.

namespace app\controllers;
use Yii;
use yii\web\Controller;
use yii\data\ArrayDataProvider;
use app\models\Photo;
class PhotoController extends Controller
{
    public $models = [
        ['id' => 1, 'category' => 'Street'],
        ['id' => 2, 'category' => 'Office'],
        ['id' => 3, 'category' => 'Factory'],
        ['id' => 4, 'category' => 'Nature'],
    ];
    public $_model;

Теперь легко вывести список категорий и определить действия для замены и просмотра фото.

    public function actionIndex()
    {
        $dataProvider = new ArrayDataProvider([
            'allModels' => $this->models,
        ]);
        return $this->render('index', [
            'dataProvider' => $dataProvider,
        ]);
    }
    public function actionView($id)
    {
        return $this->renderAjax('view', [
            'model' => $this->getModel($id),
        ]);
    }
    public function actionUpdate($id)
    {
        return $this->render('update', [
            'model' => $this->getModel($id),
        ]);
    }
    public function getModel($id)
    {
        if($this->_model === null)
        {
            $data = $this->models[$id - 1];
            $this->_model = new Photo($data);
        }
        return $this->_model;
    }
}

View

Вывод списка категорий app\views\photo\index.php требует достаточно много кода, но становится понятно, как все работает.

<?php
/**
* @var dataProvider array data provider
*/
use yii\helpers\Html;
use yii\helpers\Url;
use yii\bootstrap\Modal;
use yii\grid\GridView;
use app\models\Photo;
use sergmoro1\uploader\models\OneFile;
$this->title = "Photo uploader example"; 
$this->params['breadcrumbs'] = [$this->title];
echo Modal::widget([
    'id' => 'photo-win',
    'toggleButton' => false,
    'header' => Yii::t('app', 'View box'),
    'footer' => '<button type="button" class="btn btn-default" data-dismiss="modal">' . Yii::t('app', 'Cancel') . '</button>',
]);
?>
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'layout' => "{items}\n{summary}\n{pager}",
    'columns' => [
        'id',
        [
            'header' => Yii::t('app', 'Image'),
            'format' => 'html',
            'options' => ['style' => 'width:120px'],
            'value' => function($data) {
                $model = new Photo($data);
                return $model->fileCount == 0 
                    ? '<span class="glyphicon glyphicon-picture"></span>'
                    : Html::img($model->getImage('thumb'));
            }
        ],
        [
            'header' => Yii::t('app', 'Description'),
            'value' => function($data) {
                $model = new Photo($data);
                $model->image;
                return $model->getFileDescription();
            }
        ],
        [
            'header' => Yii::t('app', 'Count'),
            'options' => ['style' => 'width:40px'],
            'value' => function($data) {
                $model = new Photo($data);
                return $model->fileCount;
            }
        ],
        'category',
        [
            'class' => 'yii\grid\ActionColumn',
            'template' => '{view} {update}',
            'buttons' => [
                'view' => function ($url, $data) {
                    $model = new Photo($data);
                    return $model->fileCount == 0 ? '' : Html::a(
                        '<span class="glyphicon glyphicon-eye-open"></span>', 
                        ['view', 'id' => $data['id']], [
                            'data-toggle' => 'modal',
                            'data-target' => '#photo-win',
                            'onclick' => "$('#photo-win .modal-dialog .modal-content .modal-body').load($(this).attr('href'))",
                        ]
                    );
                },
                'update' => function ($url, $data) {
                    return Html::a('<span class="glyphicon glyphicon-pencil"></span>', ['update', 'id' => $data['id']]);
                },
            ],
        ],
    ],
]); ?>

Файл app\views\photo\view.php значительно короче.

<?php
/* @var $this yii\web\View */
/* @var $model app\models\Photo */
use yii\bootstrap\Carousel;
?>
<?= Carousel::widget([
    'items' => $model->prepareSlider('div', [], ['class' => 'img-responsive'], true), 
    'options' => ['data-interval' => ''],
    'controls' => [
        '<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>',
        '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>',
    ]
]) ?>

И совсем небольшой файл app\views\photo\appendix.php для ввода и редактирования описания к фото.

<?php
/**
 * @var $file - oneFile model record
 */
?>
<span id='description'>
    <?php echo isset($file->vars->description) ? $file->vars->description : ''; ?>
</span>

Осталось организовать загрузку изображений.

Как будут загружаться изображения?

В представлении app/views/photo/update.php вызовем виджет Uploader.

<?php
use sergmoro1\uploader\widgets\Uploader;
?>
<?= Uploader::widget([
    'model' => $model,
    'secure' => false,
    'limit' => 5,
    'appendixView' => '/photo/appendix',
    'cropAllowed' => true,
    'draggable' => true,
]) ?>

В контроллере app/controller/PhotoController.php уже добавлено соответствующее действие update.

Configuration

Наконец нужно подключить модуль (например в app/config/web.php) и определить каталог для загружаемых файлов. В каталоге (в примере ниже files) создать подкаталог photo и дать право на запись.

<?php
return [
    'aliases' => [
        '@absolute' => '/root/dir/yoursite',
        '@uploader' => '/web/files',
    ],
    'modules' => [
        'uploader' => ['class' => 'sergmoro1\uploader\Module'],
    ],

Заключение

При подключении расширения yii2-uploader нет необходимости определять поле file в модели, обрабатывать submit и даже определять form. Полная документация, демо.