以编程方式将现有文件添加到Dropzone

Question

我正在尝试以编程方式将现有图像添加到我的dropzone,使用dropzone.js常见问题解答作为指南:

// Add the existing image if it's there.
// headerDropzone is my dropzone (debug shows it as existing and initialized at this point.
var on_load_header = $( '[name="on_load_header_image"]' ).val();
var on_load_header_path = $( '[name="on_load_header_image_path"]' ).val();

if ( on_load_header ) {

    // Hardcoded size value is just for testing, see my second question below.
    var on_load_header_data = { name: on_load_header, size: 12345 };

    // Call the default addedfile event handler
    headerDropzone.options.addedfile.call( headerDropzone, on_load_header_data );

    // And optionally show the thumbnail of the file:
    headerDropzone.options. thumbnail.call( headerDropzone, on_load_header_data, on_load_header_path);

}

我的第一个问题是这不起作用.添加的文件事件不会触发(或至少headerDropzone从不触发的添加文件处理程序),缩略图也是如此.

我的第二个问题/问题是:我是否必须提供文件大小？我可以得到服务器端,但如果我不需要,我宁愿不这样做.

Answer 1

如果需要将多个现有文件添加到Dropzone中,请将现有文件声明为数组,然后在循环内以编程方式将其添加到Dropzone中,如此...

        Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone("#myDropzone", {
            url: "/file/post",
            maxFileSize: 50,
            acceptedFiles: ".pdf",
            addRemoveLinks: true,
            //more dropzone options here
        });

        //Add existing files into dropzone
        var existingFiles = [
            { name: "Filename 1.pdf", size: 12345678 },
            { name: "Filename 2.pdf", size: 12345678 },
            { name: "Filename 3.pdf", size: 12345678 },
            { name: "Filename 4.pdf", size: 12345678 },
            { name: "Filename 5.pdf", size: 12345678 }
        ];

        for (i = 0; i < existingFiles.length; i++) {
            myDropzone.emit("addedfile", existingFiles[i]);
            //myDropzone.emit("thumbnail", existingFiles[i], "/image/url");
            myDropzone.emit("complete", existingFiles[i]);                
        }

Answer 2

该悬浮窗FAQ离开了正确预加载(一)现有文件(县)一个悬浮窗所需的重要设置.

我的dropzone的init方法:

Dropzone.options.MyDropZoneID = {
    ...
    init: function () {
        var mockFile = { name: fileName, size: fileSize, type: fileMimeType, serverID: 0, accepted: true }; // use actual id server uses to identify the file (e.g. DB unique identifier)
        this.emit("addedfile", mockFile);
        this.createThumbnailFromUrl(mockFile, fileUrl);
        this.emit("success", mockFile);
        this.emit("complete", mockFile);
        this.files.push(mockFile);
        ...

我不知道上面是否是一个完美的实现,但它与maxFiles设置正常工作.如果你不想要有错误的行为,那就非常重要了(比如显示不应该上传的默认消息或上传的额外文件).您肯定需要将accepted属性设置为true并将文件添加到files属性.我认为唯一不需要的就是取得成功.尽管如此,我还没有充分利用这一点.

注意:我使用了以下NuGet包:

• 创建者:Matias Meno
• Id:dropzone
• 版本:4.2.0

Answer 3

看看功能headerDropzone.options.addedfile和headerDropzone.options.thumbnail实际定义.它应该按照你的方式工作,但没有进一步的信息,很难分辨出什么是错的.

关于文件大小:不,没有必要实际提供准确的文件大小.这只是Dropzone自动显示文件大小.如果你不在乎是否显示了一些错误的文件大小,那么你可以只提供一些随机数或0.否则,您可能希望使用CSS隐藏文件大小,或者在添加后隐藏JS.(有问题的元素有类dz-size.

它的JavaScript版本看起来像这样:

var fileSizeElement = on_load_header_data.previewElement.querySelector(".dz-size");
fileSizeElement.parentNode.removeChild(fileSizeElement);

Answer 4

现在在官方常见问题解答中回答了这个问题

Dropzone.options.myDropzone = {
  init: function() {
    let myDropzone = this;

    // If you only have access to the original image sizes on your server,
    // and want to resize them in the browser:
    let mockFile = { name: "Filename 2", size: 12345 };
    myDropzone.displayExistingFile(mockFile, "https://i.picsum.photos/id/959/600/600.jpg");

    // If the thumbnail is already in the right size on your server:
    let mockFile = { name: "Filename", size: 12345 };
    let callback = null; // Optional callback when it's done
    let crossOrigin = null; // Added to the `img` tag for crossOrigin handling
    let resizeThumbnail = false; // Tells Dropzone whether it should resize the image first
    myDropzone.displayExistingFile(mockFile, "https://i.picsum.photos        /id/959/120/120.jpg", callback, crossOrigin, resizeThumbnail);
    myDropzone.files.push(mockFile); // line missing in official docs

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

Answer 5

最初我在这些方面做了一些事情,以编程方式将预先存在的文件上传到Dropzone:

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

但是,引用此Dropzone Github问题我找到了一种更简单的方法来直接上传:

headerDropzone.uploadFiles([imageFile])

遗憾的是,Dropzone文档中没有引用此uploadFiles方法,所以我想我会与所有Dropzone用户分享一些知识.

希望这有助于某人