dropzone.js - 以编程方式将现有文件添加到 Dropzone

Question

我正在尝试使用dropzone.js FAQ作为指南，以编程方式将现有图像添加到我的 dropzone ：

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

}

我的第一个问题是这不起作用。addedfile 事件不会触发（或者至少headerDropzone不会触发 addedfile 处理程序），缩略图也是如此。

我的第二个问题/问题是：我必须提供文件大小吗？我可以在服务器端获取它，但如果我实际上不需要，我宁愿不这样做。

score 26 · Accepted Answer

如果您需要将多个现有文件添加到 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]);                
        }

score 22 · Accepted Answer

Dropzone 常见问题解答遗漏了使用（一个）现有文件正确预加载 dropzone 所需的重要设置。

我的 dropzone 的初始化方法：

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 设置一起正常工作。如果您不希望出现错误行为（例如不应该显示默认消息或上传额外文件），这一点非常重要。您肯定需要将接受的属性设置为 true 并将文件添加到 files 属性。我认为唯一不需要的是发射成功。我还没有玩够，但肯定知道。

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

创建者：马蒂亚斯·梅诺
编号：dropzone
版本：4.2.0

score 11 · Accepted Answer

查看函数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);

score 7 · Accepted Answer

现在在官方常见问题解答中对此进行了回答

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;
  }
};

score 7 · Accepted Answer

最初，我正在按照这些方式做一些事情，以编程方式将预先存在的文件上传到 Dropzone：

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

但是，参考这个Dropzone Github 问题，我发现了一种更简单的直接上传方法：

headerDropzone.uploadFiles([imageFile])

不幸的是， Dropzone 文档中没有对这个uploadFiles方法的引用，所以我想我会与所有 Dropzone 用户分享一些知识。

希望这可以帮助某人

score 4 · Accepted Answer

我遇到了同样的问题，找到了 Dropzone 的handleFiles(files)方法。

所以如果你有inputTypeFileRef，你可以

// inputTypeFiles.files is an object of type FileList
var fileArray = Object.values(inputTypeFiles.files || {});
myDropZone.handleFiles(fileArray);

这也将触发所有Dropzone的事件并传递通常通过在其上拖动文件来传递的文件数据 - 进度、文件大小等。

希望它有所帮助。

score 2 · Accepted Answer

最新的 Dropzone 缺少示例，文档不清晰或不完整。您可以使用以下内容将现有图像添加到 Dropzone。

for (var i = 0; i < imagesList.length; i++) {
  let name = imagesList[i];
  name = name.substring(name.lastIndexOf('/') + 1);

  fetch(imagesList[i])
    .then(res => res.blob())
    .then(blob => {
      let file = new File([blob], name, blob);
      myDropzone1.addFile(file);
    });
}

imagesList 是您要添加到 Dropzone 的图像列表。

但是，我仍然面临一个问题：图像没有像 imagesList 中那样按顺序/顺序添加或显示。它们看起来相当随机。有没有办法让图像以图像列表中的顺序/顺序显示？

score 1 · Accepted Answer

其中许多答案都已经过时了，在撰写本文时，这在最新的 Dropzone JS 中对我有用（请注意包含的评论）：

init: function() {
    var dzObj = this;

    // In my template I looped through existing files from the database and created:
    // <div class="existing-image" data-url="/path/to/file.jpg"></div>
    $('.existing-image').each(function() {
        // I didn't have this data - works fine without
        var mockFile = { name: '', size: '', dataURL: $(this).data('url') };

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

        // The Dropzone JS FAQ incorrectly references "file" here instead of  mockFile".
        // The other parameters are outdated, dataURL goes in the object above,
        // and you need to pass through other parameters.
        // It DOES NOT WORK without the thumbnail event being triggered.
        dzObj.createThumbnailFromUrl(mockFile, dzObj.options.thumbnailWidth, dzObj.options.thumbnailHeight, dzObj.options.thumbnailMethod, true, function (dataUrl) {
            dzObj.emit("thumbnail", mockFile, dataUrl);
        });

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

        dzObj.options.maxFiles = dzObj.options.maxFiles - 1;
    });
}

score 0 · Accepted Answer

对于 5.7.0 版本，这里没有任何东西对我有用，但这确实：

var myDropzone = new Dropzone(document.body, {
    url: "<?= site_url('site/upload') ?>",
    acceptedFiles: "<?= $uploadFieldAcceptValue ?>",
    maxFilesize: 15,
    maxFiles: 5,
    autoQueue: false,
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    init: function(){
        var that = this;

        that.on("addedfile", function(file) {
            // remove the start button
            var startButton = file.previewElement.querySelector(".start");
            if(startButton){
                startButton.parentNode.removeChild(startButton);
            }
        });

        <?php if(is_array($userUploads) && count($userUploads) > 0) { ?>
            <?php foreach($userUploads as $userUpload) { ?>
                <?php $file = $userUpload['file']; ?>

                var mockFile = {
                    name: '<?= basename($file) ?>', 
                    size: <?= filesize($file) ?>
                };

                var fileUrl = '<?= base_url() . str_replace('\\', '/', preg_replace('~^'. preg_quote(FCPATH) .'~', '', $file)) ?>';
                var callback = null;
                var crossOrigin = null;
                var resizeThumbnail = true;
                that.displayExistingFile(mockFile, fileUrl, callback, crossOrigin, resizeThumbnail);

                that.emit("success", mockFile);
                that.emit('complete', mockFile);

            <?php } ?>

            that.options.maxFiles = that.options.maxFiles - <?= count($userUploads) ?>;

        <?php } ?>
    }
});

score 0 · Accepted Answer

在 Dropzone 5.7.0 上有一个“displayExistingFile”功能。我在初始化部分调用它，工作正常。

     /**
     * Called when dropzone initialized
     * You can add event listeners here
     */
    init: function init() {
      var mockFile = { name: "Filename 1.pdf", size: 12345678 }; 
      this.displayExistingFile(mockFile,  "../../assets/site/wp-content/uploads/cropped-ic_credifisco-1-192x192.png");     
    },

score 0 · Accepted Answer

@tjbp 的回复对我来说效果很好，有以下变化：

我无法删除以编程方式添加的文件，然后添加另一个。我通过删除将“maxFiles”设置为0的这一行来解决这个问题。

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

为了确保“删除”按钮可见，我必须添加以下行：

if (mockFile.previewElement) {
    mockFile.previewElement.classList.add("dz-success");
}

dropzone.js - 以编程方式将现有文件添加到 Dropzone

11 回答 11

Related

Reference