javascript - 在事件中使用承诺

Question

我使用 flow.js ( doc here ) 在我的网站上上传文档。

2种上传内容的方法：

• 通过“上传”按钮
• 通过拖放

如果文件被拖放，我想请用户确认。

你可以看看下面的代码：

 this.flow.on('fileAdded', (file, event) => {


        if (event.type == 'drop') // File has been dropped
        {
            if (!confirm("ok?"))
                this.flow.removeFile(file);
        }

    });

它可以工作，但它对用户不友好，如下所示：

还有其他解决方案吗？我曾考虑过使用 Promise 和自定义框，但到目前为止，我无法将 Promise 系统与此事件处理程序 ( this.flow.on('fileAdded'...) 结合使用。

我不认为该fileAdded事件正在等待承诺。

Answer 1

生成有吸引力的、用户友好的确认对话框的最简单方法是采用已经编写的内容。

这是基于此处jQuery UI回答的类似问题的内容。

// static method of jQuery
(function($, $container) {
  $.confirm = function(question, title) {
    return $.Deferred(function(defer) {
      $container.html(question).dialog({
        'autoOpen': true,
        'modal': true,
        'title': title || 'Confirm',
        'buttons': {
          'Yes': defer.resolve,
          'No': defer.reject
        },
        'close': defer.reject
      });
    }).always(function() {
      $container.dialog('close');
    }).promise();
  }
}(jQuery, $('<div/>')));

演示

你可以写类似于模仿window.alert()和 window.prompt()

用法 ...

jQuery.confirm(...)返回一个承诺，因此你可以写jQuery.confirm(...).then(...)

this.flow.on('fileAdded', (file, event) => {
    var that = this;
    if (event.type == 'drop') { // File has been dropped
        jQuery.confirm('Remove the file?').then(function() {
            that.flow.removeFile(file);
        }, function() {
            console.log('Removal of file not confirmed'); // or whatever you need to do when the action is not confirmed.
        });
    }
});

不要忘记，$.confirm()如上所述，它依赖于jQuery UI它的 CSS 文件。

编辑 1

文档不是很好，flow.js但表明：

• 在fileAdded处理程序中，可以通过返回来拒绝文件false。
• 可以使用 以编程方式添加文件Flow.addFile(file)。

所以有了我jQuery.confirm(...)的位置（和一些猜测），这里有一些可以在“fileAdded”处理程序中尝试的东西：

this.flow.on('fileAdded', (file, event) => {
    var flow = this.flow;
    if (event.type == 'drop') {
        jQuery.confirm('Remove the file?').then(function() {
            console.log('Removal of file confirmed');
            // flow.removeFile(file); // having returned false, this shouldn't be necessary.
        }, function() {
            console.log('Removal of file not confirmed');
            flow.addFile(file);
            // not sure if the queue will start/resume automatically; if not then try one of the following:
                // flow.upload(); 
                // flow.resume();
        });
        return false; // reject the file
    }
    return true;
});

笔记：

1. 我不能保证这是 100% 正确的。评论指出了不确定性所在。您可能需要运行测试并准备进行一些调试。
2. flow.addFile()可能会重新触发“fileAdded”事件，但您的(event.type == 'drop')测试应该可以防止您陷入无限循环。

Answer 2

如果您只想在确认对话框失败的情况下执行 this.flow.removeFile(file) 应该没有问题。在您的情况下，请注意“this”，因为承诺处理程序中的上下文会发生变化。

   this.flow.on('fileAdded', (file, event) =>{
        if (event.type == 'drop') // File has been dropped
        { 
            var self = this;
            confirm().then(function ok() {
                // nothing to do
            },function cancel() {
                self.flow.removeFile(file);
            });
        }

    });