Добавление существующих файлов изображений в Dropzone

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

Dropzone.options.portfolioForm = { 

    url: "/user/portfolio/save",
    previewsContainer: ".dropzone-previews",
    uploadMultiple: true,
    parallelUploads: 8,
    autoProcessQueue: false,
    autoDiscover: false,
    addRemoveLinks: true,
    maxFiles: 8,

    init: function() {

         var myDropzone = this;
         this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {

             e.preventDefault();
             e.stopPropagation();
             myDropzone.processQueue();
         });
     }
 }

Это прекрасно работает и позволяет обрабатывать все изображения, отправленные при отправке формы. Тем не менее, я также хочу видеть изображения, уже загруженные пользователем, когда он снова редактирует форму. Итак, я просмотрел следующую запись из Wiki Dropzone. https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

Что заполняет область dropzone-preview существующими изображениями, но она не отправляет существующие изображения с отправкой формы на этот раз. Я полагаю, это связано с тем, что изображения тезисов не добавляются в queue, но если это так, то как можно обновлять на стороне сервера, если существующее изображение удаляется пользователем?

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

Ответ 1

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

При заполнении dropzone существующими изображениями я прикрепляю URL-адрес изображения к объекту mockFile. В событии removefile я добавляю скрытый ввод в форму, если удаляемый файл является предварительно заполненным изображением (определяется путем проверки того, имеет ли файл, который передается в событие, свойство url). Я включил соответствующий код ниже:

Dropzone.options.imageDropzone = {
    paramName: 'NewImages',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,
    init: function () {
        var myDropzone = this;

        //Populate any existing thumbnails
        if (thumbnailUrls) {
            for (var i = 0; i < thumbnailUrls.length; i++) {
                var mockFile = { 
                    name: "myimage.jpg", 
                    size: 12345, 
                    type: 'image/jpeg', 
                    status: Dropzone.ADDED, 
                    url: thumbnailUrls[i] 
                };

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

                // And optionally show the thumbnail of the file:
                myDropzone.emit("thumbnail", mockFile, thumbnailUrls[i]);

                myDropzone.files.push(mockFile);
            }
        }

        this.on("removedfile", function (file) {
            // Only files that have been programmatically added should
            // have a url property.
            if (file.url && file.url.trim().length > 0) {
                $("<input type='hidden'>").attr({
                    id: 'DeletedImageUrls',
                    name: 'DeletedImageUrls'
                }).val(file.url).appendTo('#image-form');
            }
        });
    }
});

Код сервера (контроллер asp mvc):

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(ViewModel viewModel)
{
    if (ModelState.IsValid)
    {
        foreach (var url in viewModel.DeletedImageUrls)
        {
            // Code to remove the image
        }

        foreach (var image in viewModel.NewImages)
        {
            // Code to add the image
        }
    }
}

Я надеюсь, что это поможет.

Ответ 2

Чтобы продлить на Teppic ответ, я обнаружил, что вам нужно выдать полное событие, чтобы удалить индикатор выполнения на предварительном просмотре.

var file = {
    name: value.name,
    size: value.size,
    status: Dropzone.ADDED,
    accepted: true
};
myDropzone.emit("addedfile", file);                                
myDropzone.emit("thumbnail", file, value.path);
myDropzone.emit("complete", file);
myDropzone.files.push(file);

Ответ 3

просто используйте myDropzone.addFile(file)

из исходного кода dropzone https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978

Ответ 4

Первоначально я делал это для программной загрузки ранее существующего файла:

myDropzone.emit("addedfile", imageFile);                                
myDropzone.emit("thumbnail", imageFile, imageUrl);
myDropzone.files.push(file);

Однако, ссылаясь на этот Dropzone Github Issue, я нашел более простой способ прямой загрузки:

myDropzone.uploadFiles([imageFile])

К сожалению, ссылки на этот метод uploadFiles в Dropzone Documentation отсутствуют, поэтому я решил поделиться знаниями со всеми пользователями Dropzone.

Надеюсь, это поможет кому-то

Ответ 5

При щелчке по загрузке файлов просто удаляйте файлы из dropzone. Все файлы могут быть удалены с помощью removeAllFiles() или определенного файла, который также можно удалить с помощью removeFile (имя_файла).

Ответ 6

Там официальный FAQ для этого здесь