使用来自服务器的文件填充 dropzone - 异步答案

【问题标题】：Populating a dropzone with files from the server - async使用来自服务器的文件填充 dropzone - 异步
【发布时间】：2019-12-17 01:15:45
【问题描述】：

我正在尝试使用从服务器获取的文件填充我的 dropzone。我发现this post 似乎可以满足我的要求，但是似乎我只能在 init 函数中调用这个 addCustomFile 函数，而不是在我从服务器异步接收到我的数据之后（与关联的文件列表与我正在查看的对象）。

Dropzone.options.imageDrop = {
    url: "upload.php",
    previewTemplate: previewTemplate,
    params: { taskId: urlParams.get('id')},
    init: function() {
        this.addCustomFile = function(file, thumbnail_url , response){
            this.files.push(file);
            this.emit("addedfile", file);
            this.emit("thumbnail", file, thumbnail_url);
            this.emit("processing", file);
            this.emit("success", file, response , false);
            this.emit("complete", file);
        }
        this.addCustomFile ({ //THIS WORKS
            processing: true,
            accepted: true,
            name: "The name",
            size: 12345,
            type: 'image/jpeg',
            status: Dropzone.SUCCESS
        }, "fine.jpg", {
            status: "success"
        })
    }
}

let imageDropZone = $("#imageDrop").dropzone();
imageDropZone.addCustomFile ({ //THIS DOESN'T WORK - addCustomFile is not a function
    processing: true,
    accepted: true,
    name: "The name",
    size: 12345,
    type: 'image/jpeg',
    status: Dropzone.SUCCESS
}, "fine.jpg", {
    status: "success"
})

关于如何最好地修改它以便我可以在创建 dropzone 后在异步函数中调用它有什么想法吗？

【问题讨论】：

标签： javascript dropzone.js dropzone

【解决方案1】：

我能够使用 Promise 解决这个问题。我必须为 promise 定义一个变量，并为在代码范围内的数据定义一个变量。然后在初始化期间创建承诺并在我的另一个异步调用中解决它。更新代码如下：

var imageLoadDefer; //Variable that will get a promise
var slowLoaded; //Variable that will get loaded with data async
Dropzone.options.imageDrop = {
url: "upload.php",
previewTemplate: previewTemplate,
params: { taskId: urlParams.get('id')},
init: function() {
    this.addCustomFile = function(file, thumbnail_url , response){
        this.files.push(file);
        this.emit("addedfile", file);
        this.emit("thumbnail", file, thumbnail_url);
        this.emit("processing", file);
        this.emit("success", file, response , false);
        this.emit("complete", file);
     }
     //Create the promise using jQuery
     imageLoadDefer =$.Deferred();
     //Important: Make sure to put this into a variable that can be used in the following function
      var imDrop = this;
      imageLoadDefer.always(function(){
            //promise is resolved and variable is now populated
            imDrop.addCustomFile ({ //THIS WORKS NOW, ASYNC
                processing: true,
                accepted: true,
                name: slowLoaded.name,
                size: slowLoaded.size,
                type: 'image/jpeg',
                status: Dropzone.SUCCESS
            }, slowLoaded.thumbnail, {
                status: "success"
            });
       });
    }
}

let imageDropZone = $("#imageDrop").dropzone();
$.getJSON('images.json', function (data) { 
        slowLoaded = data;
        imageLoadDefer.resolve(); //data loaded so resolve image promise
}

【讨论】：