Как предварительно загрузить изображения в dropzone.js

У меня есть экземпляр dropzone.js на веб-странице со следующими параметрами:

autoProcessQueue:false
uploadMultiple:true
parallelUploads:20
maxFiles:20

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

Цель моих пользователей - использовать dropzone для управления изображениями для элемента, поэтому, когда я загружаю свое представление "редактирование/обновление" для элемента, я хотел бы предварительно загрузить dropzone с изображениями, которые ранее были загружены для этого элемента. Есть ли хороший способ реализовать это, чтобы уже существующие элементы не загружались повторно, когда они отправляли свои изменения в список изображений?

Ответ 1

Правильный способ сделать это - использовать метод .emit, предоставляемый в dropzone js, чтобы добавить файл и миниатюру для предварительной загрузки изображений с сервера. См. Пример кода ниже. Взято из https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

// 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");

.emit метод из dropzone вызовет функцию init, и если у вас есть какой-либо обработчик события addfile, написанный для него. например Я использую кнопку addfile add add remove, а также прикрепленную функцию удаления изображения.

Ответ 2

Dropzone настолько сильная и потрясающая, что вы можете что-либо сделать на этом.
Шаги к следующему →

1) Прежде всего вам придется создать серверную часть script, которая будет получить все имена файлов и их размер и отправить его как ответ json.
PHP-код:

  foreach($myitemfiles as $file){ //get an array which has the names of all the files and loop through it 
        $obj['name'] = $file; //get the filename in array
        $obj['size'] = filesize("uploadsfolder/".$file); //get the flesize in array
        $result[] = $obj; // copy it to another array
      }
       header('Content-Type: application/json');
       echo json_encode($result); // now you have a json response which you can use in client side

2) Теперь вы можете использовать ответ для отображения загруженных файлов. Запишите ниже код внутри функции инициализации dropzone
Код Javascript:

  init: function() {

      var thisDropzone = this;

        $.getJSON('get_item_images.php', function(data) { // get the json response

            $.each(data, function(key,value){ //loop through it

                var mockFile = { name: value.name, size: value.size }; // here we get the file name and size as response 

                thisDropzone.options.addedfile.call(thisDropzone, mockFile);

                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploadsfolder/"+value.name);//uploadsfolder is the folder where you have all those uploaded files

            });

        });
}

Примечание. не используйте весь путь URL-адреса файла в имени файла, просто возьмите его имя.
Это работает