Kendo Upload - 调用 uploadFiles 似乎没有做任何事情

Question

我正在尝试在我们的剑道上传组件之上实现一个小功能。这个想法是，如果用户选择上传新文件，则会出现提示，警告他们它将覆盖他们当前的选择以及他们是否希望继续。如果他们同意，那么我们将打开文件选择。出现的第一个问题是，由于浏览器安全性，我不能只调用底层文件选择按钮及其单击事件，因此解决方法是创建文件类型的隐藏输入，然后通过后面的代码单击该输入（为什么有效） ，而剑道则不确定，因为它是相同的方法）。文件列表打开。

我获取文件并使用

addFiles

方法将其添加到组件中，我也尝试过直接将文件添加到

fileList

属性中，但无济于事。我从来没有看到任何错误被解雇。上传事件也没有被触发。查看该文件，它似乎也符合我的限制。代码：

组件.ts

  fileRestrictions: FileRestrictions = {
    allowedExtensions: ['.jpg', '.jpeg', '.png'],
    maxFileSize: 400000
  };


fileChanged(event: any) {
    if(event && event.target.files && event.target.files.length) {
      const files = event.target.files as FileList;
      const selectedFile = files[0];
      const fileInput = selectedFile as FileInfo;

      this.kendoUpload.addFiles([fileInput]);
      this.kendoUpload.uploadFiles();
      
    }
  }

  kendoUploadWrapperClick(e: PointerEvent) {
    if(this.usingRedesign) {
      e.preventDefault();
      e.stopPropagation();

      const model = new ConfirmDialogModel('Change Login Image?', 'Are you sure you want to update your login image?');
      const dialogRef = this.dialogService.open(
        ConfirmDialogComponent, 
        model, {width: '400px'}
      );
      
      dialogRef.afterClosed().pipe(take(1))
      .subscribe((result: boolean) => {
        if(result) {
          //retrigger so we get the actual select to appear.
          this.fileInput.nativeElement.value = null;
          this.fileInput.nativeElement.click();
        }
      })
    } else {
      //do nothing
    }
  }

---

无指针事件的 css 类将指针事件设置为无，包装器只是将光标设置为指针

组件.html

<input #fileInput type="file" 
      [hidden]="true" 
      accept="{{fileRestrictions.allowedExtensions}}"
      (change)="fileChanged($event)"/>
    <div 
      [ngClass]="usingRedesign ? 'no-pointer-events-wrapper' : null"
      (click)="kendoUploadWrapperClick($event)">
      <kendo-upload #kendoUpload
        [ngClass]="usingRedesign ? 'no-pointer-events' : null"
        [saveUrl]="uploadSaveUrl" 
        [disabled]="imageType !== 'Custom' || disabled"
        [multiple]="!usingRedesign"
        [restrictions]="fileRestrictions" 
        (upload)="uploadEvent($event)"
        (error)="errorEvent($event)"
        (success)="successEventHandler($event)">
      </kendo-upload>
    </div>

我到底错过了什么，在我看来它应该相当简单。

Answer 1

您必须使用

usingRedesign

反转条件，因为当

usingRedesign

为

true

时，由于

pointer-event: none

而无法单击，并且当您将其设置为

false

时，

kendoUploadWrapperClick

内的第一个if条件将转到 else 块。

kendoUploadWrapperClick(e: PointerEvent) {
    if(!this.usingRedesign) { // <- changed here!
      e.preventDefault();
      e.stopPropagation();
      ...
    } else {
      //do nothing
    }
  }