В Dropzone.js как сделать thumbnails?

Question

[Дилик Пулатов]

Здравствуйте!
у меня такой код:

<div id="myAwesomeDropzone" class="myDropzone" data-max-size="2"><label for="myAwesomeDropzone">Перетащите файлы сюда или выберите файлы</label></div>

var dropzoneMaxSizeFile = $("#myAwesomeDropzone").data('max-size');
$("#myAwesomeDropzone").dropzone({
	url: "/admin/media/upload",
	maxFilesize: dropzoneMaxSizeFile,
	maxFiles: 50
});

public function actionUpload(){
  if ($this->isAjax) {
    if (!empty($_FILES['file'])) {
      $image = UploadedFile::getInstanceByName('file');
      $formats = ['.jpg','.gif','.png','.jpeg','.bmp'];
      $imageName = sha1("dilikpulatov".rand(1000,9999)).'.'.$image->extension;
      if ($image->saveAs(Yii::getAlias('@webroot').'/img/uploads/'.$imageName)){
        $model = new Images();
        $model->url = Yii::getAlias('@web').'/img/uploads/'.$imageName;
        $model->name = $imageName;
        $model->ext = '.'.$image->extension;
        $model->alt = str_replace($formats, '', $_FILES['file']['name']);
        $model->date = time();
        $model->save(false);
        return ['res'=>'success'];
      }else{
        return ['res'=>'error'];
      }
    }
  }
}

все работает отлично...но я хотел сделать thumbnails для каждого картинку...в док не очень хорошо написано как пользоваться этот возможности плагина...те кто знает об этом пожалуйста объясните как можно сделать мини-картинка при загрузка картинок?

Answer 1

[Данил Чекалин]

1. нужно отлавливать событие `addfile` (см. раздел Events в документации Dropzone)
2. с помощью FileReader API получить datauri
3. создать new Image,
4. запихать в его src = datauri
5. отрисовать Image где-либо (либо в контейнере самого dropzone)

Я когда-то давно делал такое, точно конечно же не помню, но алгоритм примерно такой.
Доп. ссылка пример FileReader API: https://codepen.io/matt-west/pen/CfilG

Answer 2

[Дилик Пулатов]

Нашёл один способ
imagine.readthedocs.io/en/latest