vorst.ru - Пример использования расширения по загрузке фото
Статьи из рубрики form

Как написать валидатор

Пример валидатора для серверной и клиентской частей

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

Нужно записать правило проверки уникальности комбинации атрибутов как для обычной формы так и для ее модального варианта.


Интерфейс для полнотекстового поиска

Использование ElasticSearch во frontend

На создание ElasticSearch индекса понадобилось совсем не много усилий, как видно из предыдущей статьи. Чтобы сделать индекс доступным конечному пользователю, усилий понадобиться не многим больше.

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


Как написать виджет для WordPress

Пример виджета для WordPress

Иногда производители предоставляют возможность покупателю самостоятельно выбрать на сайте комплектацию товара. В этом случае, при разработке сайта, нужно предусмотреть возможность показа текущей цены на видном месте (demo).

В WordPress для подобных задач используется область виджетов. Как писать виджет в WordPress подробно написано в кодексе. Но всегда есть нюансы.


Как написать short-code для WordPress

Пример написания short-code для WordPress

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

Должна быть возможность легко размещать такой вопросник в статье или на странице блога WordPress. Об этом была речь в предыдущем посте.


Как написать плагин для WordPress

Плагин для WordPress подсчета цены по компонентам

Любой товар состоит из элементов. Довольно часто производитель, поставив задачу написать электронный магазин, позволяет выбирать комплектацию заранее, до производства. Выбирая комплектующие есть возможность сэкономить или наоборот, согласиться с утверждением "Я этого достоин(а)" и заказать по полной.

Например можно представить пиццерию, где в меню указана стоимость составляющих - лепешка, сыр трех сортов, помидоры двух сортов, колбаса 5 видов. Комбинируете вы сами и постоянно видите, как ваш выбор отражается на цене.

Но это отвлеченный пример, а был конкретный - Demo, Plugin.


Как отсортировать картинки мышкой

Сортировка строк мышкой

Оставили комментарий в конце января: "Напишите, пожалуйста, статью, как массово загружать изображения через ajax с возможностью сортировки перетаскиванием."

Речь о расширении yii2-uploader, которое может загружать, сжимать, обрезать картинки для любой модели. Я писал о нем уже пару раз.

На тот момент этой функциональности не было. Собирался я долго. Наконец добавил требуемое. Теперь спешу написать несколько слов о процессе. Демо (при редактировании).


Как добавить атрибут к загруженному файлу

Добавление описания к файлу

Иногда важно определить дополнительную информацию для загружаемого файла. Например это может быть описание. В расширении yii2-uploader возможность добавить описание к файлу уже предусмотрена.

Кроме описания может быть добавлено и любое другое свойство. В предыдущем примере использовалось свойство when типа radio с двумя значениями - "до" и "после". Как добавить новое свойство?


Как сделать галерею фотографий "До и После"

Показ фотографий до и после момента времени

Представьте, что вы продаете курс похудания. Вам нужно наглядно представить результат вашего курса. Фото "До" и "После", что может быть лучшей иллюстрацией?

Как и в предыдущем примере примем, что участников ограниченное количество. Например 4. Забудем про похудающих - слишком скучно. Будем "работать" с кинозвездами. Для каждого можно загрузить только 4 фотографии. Таким образом всего 16 фото. Если загружены все 16 и кому-то захочется добавить "свои" фото, то придется что-то удалить. Демо.


Делаем демо для загрузки фото

Загрузка жестко определенного количества файлов

Чтобы показать, как работает загрузка изображений, нужно разрешить загружать изображения на свой сайт. Но, в этом случае, дисковое пространство может быть быстро исчерпано и нужно как-то удалять оставленный посетителями "мусор".

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


Редактирование и валидация модальной формы

Использование pop-up формы

Бывает, что количество полей в таблице не слишком велико и редактировать в модальном окне проще и нагляднее. Что необходимо, чтобы организовать стандартный набор операций - CReate, Update, Delete?



Поиск



Делаем демо для загрузки фото

Загрузка жестко определенного количества файлов

Чтобы показать, как работает загрузка изображений, нужно разрешить загружать изображения на свой сайт. Но, в этом случае, дисковое пространство может быть быстро исчерпано и нужно как-то удалять оставленный посетителями "мусор".

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


    Поделиться

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

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

Model

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

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

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

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

  public $sizes = [
      'original' => ['width' => 600, 'height' => 450, 'catalog' => 'original'],
      'main' => ['width' => 400, 'height' => 300, 'catalog' => ''],
      'thumb' => ['width' => 120, 'height' => 90, 'catalog' => 'thumb'],
  ];
  public function behaviors()
  {
      return [
          [
              'class' => HaveFileBehavior::className(),,
              'file_path' => '/files/photo/',
          ]
      ];
  }

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

Теперь нужно определить, какие именно файлы относятся к модели.

  public function getFiles()
  {
      return OneFile::find()
          ->where('parent_id=:parent_id AND model=:model', [
              ':parent_id' => $this->id,
              ':model' => 'sample\models\Photo',
          ])
          ->all();
  }

Controller

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

namespace sample\controllers;
use Yii;
use yii\web\Controller;
use yii\data\ArrayDataProvider;
use sample\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([
          'models' => $this->models,
      ]);
      return $this->render('index', [
          'dataProvider' => $dataProvider,
      ]);
  }

View

Список в демо немного сложнее, но полное описание только утомит, поэтому приводится только часть кода, а именно вывод миниатюры sample\views\photo\index.php.

<?= 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(['id' => $data['id'], 'category' => $data['category']]);
                $count = count($model->files);
                return $count == 0 
                    ? '<i class="fa fa-3x fa-photo"></i>'
                    : Html::img($model->getImage('thumb', $count - 1));
            }
        ],

Выводится последняя загруженная миниатюра. Теперь можно посмотреть, как это работает.

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

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

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

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

А в контроллере sample/controller/PhotoController.php добавим соответствующее действие.

  public function actionUpdate($id)
  {
      return $this->render('update', [
          'model' => $this->getModel($id),
      ]);
  }
  public function getModel($id)
  {
      if($this->_model === null)
      {
          $model = $this->models[$id - 1];
          $this->_model = new Photo(['id' => $model['id'], 'category' => $model['category']]);
      }
      return $this->_model;
  }

Заключение

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

Comments

  • Напишите, пожалуйста, статью, как массово загружать изображения через ajax с возможностью сортировки перетаскиванием, прикрепляя их к другой модели. Нигде ничего путного не найти. Например я хочу сделать изображения для объявления перетаскиванием в объявление(dropzone) (то есть уже должен быть ID у модели объявления, к которому привязать все изображения.) Кроме того пользователь должен иметь возможность тут же сортировать изображения, перетаскивая мышкой. Спасибо Василий
  • -- Попробую. Спасибо! SergeyMorozov
  • And I thought I was the sensible one. Thanks for setting me startghi. Jenibelle
  • -- Thanks ) SergeyMorozov

Оставьте комментарий

Только зарегистрированные пользователи могут оставлять комментарии. Пожалуйста войдите или пройдите регистрацию.