在Dropzone中添加现有的图像文件

I am using Dropzonejs to add image upload functionality in a Form, as I have various other fields in form so I have set autoProcessQueue to false and Processing it on click on Submit button of Form as shown below.

我正在使用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();
         });
     }
 }

This works fine and allows me to process all images sent when form is submitted. However, I also want to be able to see images already uploaded by user when he edits the form again. So I went through following post from Dropzone Wiki. https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

这样做很好，并且允许我处理表单提交时发送的所有图片。但是，我也希望在用户再次编辑表单时能够看到已经上传的图片。所以我从Dropzone的维基上浏览了这篇文章。https://github.com/enyo/dropzone/wiki/FAQ how-to-show-files-already-stored-on-server

Which populates dropzone-preview area with existing images but it does not send existing images with form submit this time. I guess this is because theses images are not added in queue but If it's so then how can update on server side, In case an existing image is removed by user?

它使用现有的图像填充dropzone-preview区域，但这次不使用表单submit发送现有的图像。我猜这是因为这些图片没有添加到队列中，但是如果是这样，那么如何在服务器端进行更新，以防用户删除现有的图片?

Also, what would be the better approach, add already added images in queue again or just send information of removed file?

此外，还有什么更好的方法，是在队列中添加已添加的图像，还是只发送已删除文件的信息?

5 个解决方案

#1

I spent a bit of time trying to add images again, but after battling with it for a while I ended up just sending information about the deleted images back to the server.

我花了一些时间试图再次添加图像，但是在与它搏斗了一段时间之后，我最终只是将删除的图像的信息发送回服务器。

When populating dropzone with existing images I attach the image's url to the mockFile object. In the removedfile event I add a hidden input to the form if the file that is being removed is a prepopulated image (determined by testing whether the file that is passed into the event has a url property). I have included the relevant code below:

当使用现有图像填充dropzone时，我将图像的url附加到mockFile对象。在removedfile事件中，如果要删除的文件是预填充的图像(通过测试传入事件的文件是否具有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');
            }
        });
    }
});

Server code (asp mvc controller):

服务器代码(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
        }
    }
}

I hope that helps.

我希望有帮助。

#2

To extend on Teppic's answer, I found you needed to emit the complete event to remove the progress bar on the preview.

为了扩展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

just use myDropzone.addFile(file)

只使用myDropzone.addFile(文件)

from dropzone source code https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172eb66e927f9c0c8564/dist/dropzone.js#L978

从dropzone源代码https://github.com/enyo/dropzone/blob/4e20bd4c508179997b4b172b172b172eb66e927f9c0c0564 /dropzone.js#L978

#4

Originally I was doing this to programmatically upload a pre-existing file:

最初，我这样做是为了以编程方式上载已存在的文件:

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

However, referencing this Dropzone Github Issue I found an easier way to directly upload:

然而，根据这个Dropzone Github的问题，我找到了一种更容易直接上传的方式:

myDropzone.uploadFiles([imageFile])

Unfortunately there are no references to this uploadFiles method in the Dropzone Documentation, so I figured I'd share some knowledge with all you Dropzone users.

不幸的是，在Dropzone文档中没有对这个uploadFiles方法的引用，因此我认为我应该与所有Dropzone用户共享一些知识。

Hope this helps someone

希望这可以帮助别人

#5

On click of upload files just clear the files from dropzone. All Files can be cleared using removeAllFiles() or specific file also you can delete by using removeFile(fileName).

点击上传文件，从dropzone中清除文件。可以使用removeAllFiles()或特定文件清除所有文件，也可以使用removeFile(文件名)删除所有文件。

#1