如何在 Kendo Angular Upload 组件中重置上传的文件列表

Question

我有一个

kendo-upload

组件可以只上传一个文件。文件上传后，我需要清除列表或上传的文件。

1. 初始状态

   

2. 选择文件后

   

3. 文件上传后

   

我需要步骤 3. 看起来像步骤 1. = 就像我点击

Clear

按钮一样。

我尝试绑定到

(success)

事件并执行以下操作：

a.

this.pictureUpload.fileList.clear();

b.

this.pictureUpload.fileList.remove(this.pictureFilePreview.uid);

但总是会得到

uploadService

的例外：

我确实深入研究了

uploadService

源代码并理解了为什么我会遇到异常。我还查看了

upload-component

源代码并尝试了解如何从外部执行

Clear

按钮方法，但没有找到任何简单的方法。我认为我把这个问题过于复杂化了，一定有一些我还没有发现的简单解决方案。

Answer 1

您可以使用模型绑定来做到这一点。

  import { FileInfo } from '@progress/kendo-angular-upload';

首先捕获kendo-upload中完成的事件：

    [(ngModel)]="myFiles" (complete)="uploadCompleted()"

添加会员：

     myFiles: Array<FileInfo> = [];

并捕获事件并将文件列表重置为空：

 public uploadCompleted(){
    this.myFiles = [];
 }

Answer 2

文件选择组件有一个

clearFiles

方法，但其访问方式并不明显。

在中添加#fileSelect="kendoUpload"

<kendo-upload ...
  (complete)="complete()"
  #fileSelect="kendoUpload">
</kendo-upload>

然后在组件中@ViewChild("fileSelect")。上传完成时或通过 this.fileSelect.clearFiles(); 调用该方法

import { UploadComponent } from "@progress/kendo-angular-upload";

@ViewChild('fileSelect') fileSelect!: UploadComponent;

public complete = () => {
  this.fileSelect.clearFiles();
}