在flow.js的fileAdded事件中使用Promise实现拖拽文件确认的方案咨询

我懂你现在的痛点——原生confirm弹窗那种生硬的风格确实拉低用户体验，而且flow.js的fileAdded事件本身不会等待异步操作完成，直接套Promise的话，文件可能已经被塞进队列了，弹窗还没得到用户反馈，完全达不到预期效果。下面给你几个实用的解决方案，按需选就行：

方案1：完全接管拖拽事件，确认后再手动添加文件 #

这是最稳妥的方案，直接绕过fileAdded的异步问题——我们先阻止flow自动处理拖拽过来的文件，等用户确认后再手动把文件加入上传队列。

// 监听拖拽drop事件，先阻止flow的默认处理逻辑
this.flow.on('drop', function(event) {
  event.preventDefault(); // 阻止flow自动添加拖拽的文件
  const droppedFiles = event.dataTransfer.files;

  // 调用你的自定义弹窗（这里用Promise风格的模态框举例）
  yourCustomConfirmModal("确定要上传这些文件吗？")
    .then(confirmed => {
      if (confirmed) {
        // 用户确认后，逐个把文件加入flow队列
        Array.from(droppedFiles).forEach(file => {
          this.flow.addFile(file);
        });
      }
    })
    .catch(() => {
      // 用户取消弹窗或弹窗出错，直接忽略即可
    });
});

// 按钮上传的逻辑保持不变，不用做任何修改

这个方案的优势在于完全掌控文件添加的时机，不会出现“文件先出现在队列，用户取消后才消失”的尴尬情况，体验最流畅。

方案2：利用flow.js的异步事件支持（需版本兼容） #

有些新版本的flow.js允许fileAdded事件返回一个Promise，当Promise resolve为false时自动移除文件，resolve为true时保留文件。如果你的项目用的是支持这个特性的版本，可以试试这个更简洁的写法：

this.flow.on('fileAdded', (file, event) => {
  if (event.type === 'drop') {
    // 返回Promise让flow等待用户操作
    return new Promise((resolve) => {
      // 这里替换成你的自定义确认弹窗
      yourCustomConfirm({
        title: '确认上传',
        message: '确定要上传这个文件吗？'
      }).then(() => {
        resolve(true); // 确认上传，保留文件
      }).catch(() => {
        resolve(false); // 取消上传，自动移除文件
      });
    });
  }
  // 非拖拽上传的场景，直接允许添加
  return true;
});

注意：这个方案依赖flow.js的版本，如果你用的旧版本不支持fileAdded返回Promise，那这个方法就不生效，这时候方案1会更靠谱。

方案3：先加入队列再暂停，确认后恢复上传 #

如果上面两种方案都不适用，还可以退而求其次：先让文件加入队列，立刻暂停上传，等用户确认后再恢复，取消的话就移除文件。

this.flow.on('fileAdded', (file, event) => {
  if (event.type === 'drop') {
    file.pause(); // 先暂停上传，避免用户取消前就开始传
    yourCustomConfirmModal("确定要上传吗？")
      .then(confirmed => {
        if (confirmed) {
          file.resume(); // 用户确认后恢复上传
        } else {
          this.flow.removeFile(file); // 取消就从队列移除
        }
      })
      .catch(() => {
        this.flow.removeFile(file); // 弹窗出错也移除文件
      });
  }
});

这个方案的缺点是文件会短暂出现在上传队列中，需要配合UI处理（比如弹窗期间隐藏该文件的条目），否则用户可能会看到“闪一下又消失”的情况。

内容的提问来源于stack exchange，提问作者Bronzato