DropzoneJS上传后隐藏了dropzone区域,如何取回它?

时间:2017-02-23 13:38:57

标签: angular typescript dropzone.js

我正在使用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")}
};

当我选择要上传的文件时,我得到了很好的进度条。 当上传所有文件时,我最终得到一个大的空块,它先前包含进度条。我没有看到任何内容,因为我设置createImageThumbnails: false这是正确的,因为我上传了XML文件而且不需要缩略图。

当所有文件都完成后,我想重置dropzone。删除所有以前上传的文件,然后返回dropzone区域。

我找到了几个使用removeFile(file)方法的例子。这似乎可以解决问题,但是这些示例都是在JavaScript中,我使用的是TypeScript,并且无法弄清楚如何转换它(我是TypeScript的新手)。

我听取了QueueComplete

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

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

修改: 我的HTML:

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

1 个答案:

答案 0 :(得分:2)

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();
}
保罗还提到他添加了以下CSS:

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

仅供参考,我最初的想法是:让我们掌握dropzone指令创建的Dropzone实例!不幸的是,angular2-dropzone-wrapper不允许你访问它创建的dropzone实例(this.dropzone是私有属性)。它也不是exportAs实例(它可以让你写<dropzone #mydz="dzinstance"></dropzone>之类的内容来获取你自己的mydz属性中的dropzone实例。)