Как в дроп зоне отобразить уже загруженные картинки?

Question

[Alex Mirgorodskiy]

Всем привет, кто знаком с Дропзоной подскажите как в нее можно засунуть файлы при Update обьекта, то есть чтоб были в ппревью контейнере отображались картинки которые уже на сервере и в базе, пути к картинкам передаю через модель, но как бы их правильней в превью засунуть? Наткунлся на такую вот схемку,

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");
// Or if the file on your server is not yet in the right
// size, you can let Dropzone download and resize it
// callback and crossOrigin are optional.
myDropzone.createThumbnailFromUrl(file, imageUrl, callback, crossOrigin);

// Make sure that there is no progress bar, etc...
myDropzone.emit("complete", mockFile);

// If you use the maxFiles option, make sure you adjust it to the
// correct amount:
var existingFileCount = 1; // The number of files already uploaded
myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;

потыкал, и понял что ничего не понял... ,не разъясните JS калеке?)

То что он вызывает события и запихивает в них инфу то понятно, но у меня чего-то не за работало, и вообще не понял, это все нужно выполнить, или для разных случаев методы? и вообще я дроп зону через плагин yii2 запускаю, но там суть та же вроде, просто с самими событиями немного не разобрался.

Answer 1

[Alex Mirgorodskiy]

В Html

//Счетчик
<?php $counter = 0; ?>

<?php foreach ($model->images as $image): ?>

    <?php
          ++$counter;
    ?>

    <div class="server_img" id="server_img_<?= $counter ?>"><?= $image->name ?></div>

<?php endforeach; ?>

После формы зарегистрировать Js

//Кол-во блоков с классом .server_img(То есть блоков с именами)
var path = $('.server_img').length;

//Сколько картинок столько и циклов
for (i = 1; i <= path; i++) {

  //Имя каждой
  var img_name = $('#server_img_' + i).text(),
  mockFile = { name: img_name };

//Добавляем файл drop-zon через событие
myDropzone.emit("addedfile", mockFile);

//Делаем превьюху по Url где хранятся загруженные картинки
myDropzone.emit("thumbnail", mockFile, "/web/upload/store/Products/" + mockFile.name);

//Даем статус загруженные
myDropzone.emit("complete", mockFile);
    
    }

Answer 2

[キム ファイブプラス]

Правильно выбрать инструмент и не мучаться.
plugins.krajee.com/file-input/demo

Comments

[Alex Mirgorodskiy]

SalatProduction, Уже знаком с этим расширением, оно не удовлетворяет другие запросы, при создании товара, дропзона подошла, но теперь нужно просто отобразить уже существующие картинки в зоне, для этого даже есть функция (выше) просто я с ней не разобрался, так как сильно JS не понимаю, не логично не разобравшись с методами подходящего инструмента менять его на другой, т.к с ним еще дольше разбираться. По этому спросил может кто уже апдейтил через Drop-zone, но все же спасибо)

[キム ファイブプラス]

Alex Mirgorodskiy, Что в DZ есть такого, чего нет в BU?

[Alex Mirgorodskiy]

SalatProduction, Может оно и есть) Но я не смог найти правильного решения, мне нужно при создании формы динамически добавлять input['FormName']['images'][] с путем к картинке, которая создается на сервере, и если форма отправлена сохранять, с превьюхами и возможностью удалить картинку или добавить на клиенте, а потом отправлять на сервер (Синхронно), а там по моему отдельно загружаешь фотки, потом жмешь отдельно загрузить и только потом отправляешь вместе с формой, короче много лишних действий и гемора с которым не разобрался, а так может можно все реализовать, не разобрался прост.

[キム ファイブプラス]

Alex Mirgorodskiy, в BU все это есть по дефолту. И создание доп инпутов и всевозможные обработчики и ивенты. Смотрите примеры в разделе Example.

[Alex Mirgorodskiy]

SalatProduction, Понял) спасибо, будет время разберусь с документашкой, решение кстати в DZ нашел, по этому менять загрузчик нет нужды, но будет время и с BU разберусь. Вот ответ может кому пригодится.

В Php выводим hidden ipnut или тупо дивы с именами картинок.

Потом в Js в цикле добавляем каждую в DZ, JS код писать после формы

//Кол-во блоков с классом .server_img(То есть блоков с именами)
var path = $('.server_img').length;

//Сколько картинок столько и циклов
for (i = 1; i <= path; i++) {

  //Имя каждой
  var img_name = $('#server_img_' + i).text(),
  mockFile = { name: img_name };

//Добавляем файл drop-zon через событие
myDropzone.emit("addedfile", mockFile);

//Делаем превьюху по Url где хранятся загруженные картинки
myDropzone.emit("thumbnail", mockFile, "/web/upload/store/Products/" + mockFile.name);

//Даем статус загруженные
myDropzone.emit("complete", mockFile);
    
    }

Конечно корявенько на скорую руку, но работает)