angular - DropzoneJS 上传后隐藏dropzone区域，如何取回？

Question

我正在使用 angular2-dropzone-wrapper，我几乎可以根据需要使用它。

我有这样的配置:

this.dropZoneConfig = {
    server: this.url,
    maxFilesize: 50,
    acceptedFiles: ".xml",
    parallelUploads: 5,
    uploadMultiple: true,
    createImageThumbnails: false,
    addRemoveLinks: true,
    headers: { "Authorization": "Bearer " + sessionStorage.getItem("AccessToken")}
};

当我选择要上传的文件时，我会看到漂亮的进度条。上传所有文件后，我最终得到一个大的空白 block ，之前包含进度条。我没有看到任何东西，因为我设置了 createImageThumbnails: false 这是正确的，因为我正在上传 XML 文件并且不需要缩略图。

当所有文件都完成后，我希望重置放置区。所有以前上传的文件都被删除，拖放区又回来了。

我发现了几个使用 removeFile(file) 方法的例子。这似乎可以解决问题，但示例是用 JavaScript 编写的，我使用的是 TypeScript，但不知道如何转换它(我是 TypeScript 的新手)。

我会听QueueComplete:

private onDropZoneQueueComplete(event) {
    console.log("In onDropZoneQueueComplete");
}

在这里我想我需要调用 removeFiles 方法或在 'Success' 事件监听器中调用 removeFile。

编辑:我的 HTML:

  <dropzone [config]="dropZoneConfig" [message]="'Click or drag images here to upload'"
          (error)="onDropZoneUploadError($event)"
          (sendingmultiple)="onDropZoneSendingMultiple($event)"
          (queuecomplete)="onDropZoneQueueComplete($event)"></dropzone>

Answer 1

Dropzone documentation说你需要打电话 removeFile()或 removeAllFiles()在Dropzone 实例，即 myDropzone.removeAllFiles() .

但是，浏览 angular2-dropzone-wrapper 的源代码时我偶然发现了一个 reset()调用 this.dropzone.removeAllFiles() 的方法为你。旁注:调用 removeAllFiles() 时, 正在上传的文件将不会被删除。

您可以调用 reset()使用以下语法的方法:

<dropzone #dz (queuecomplete)="dz.reset()"></dropzone>

或者，如果您有更多代码要在 queuecomplete 上执行您可以调用自定义方法并将对指令 ( dz ) 的引用传递给它:

<dropzone #dz (queuecomplete)="onDropZoneQueueComplete($event, dz);"></dropzone>

然后在你的类里面:

private onDropZoneQueueComplete(event, dz) {
  this.filesListComponent.reload();  // additional code
  dz.reset();
}

Paul 还提到他添加了以下 CSS:

.dz-preview.dz-file-preview.dz-processing.dz-success.dz-comp‌​lete { display: none !important; }

仅供引用，我最初的想法是:让我们获取由 dropzone 指令创建的 Dropzone 实例!不幸的是，angular2-dropzone-wrapper 不允许您访问它创建的 dropzone 实例(this.dropzone 是一个私有(private)属性)。也不 exportAs实例(这会让你写类似 <dropzone #mydz="dzinstance"></dropzone> 的东西来在你自己的 mydz 属性中获取 dropzone 实例)。