我正在使用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>
答案 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-complete { display: none !important; }
仅供参考,我最初的想法是:让我们掌握dropzone指令创建的Dropzone实例!不幸的是,angular2-dropzone-wrapper不允许你访问它创建的dropzone实例(this.dropzone
是私有属性)。它也不是exportAs
实例(它可以让你写<dropzone #mydz="dzinstance"></dropzone>
之类的内容来获取你自己的mydz
属性中的dropzone实例。)