Kendo Upload - calling uploadFiles does not seem to do anything

Question

I am trying to implement a small feature on top of our kendo upload component. The idea is that if a user chooses to upload a new file, a prompt is given warning them that it will override their current selection and do they wish to proceed. If they agree, then we will open the file selection. The first issue arose in that I couldn't just call the underlying file select button and its click event due to browser security, so the work around was to create a hidden input of type file and click that via the code behind (why that worked, and the kendo one did not is uncertain as it is the same approach). File list opens.

I get my file and add it to the component using the addFiles method, I've also tried it by directly adding a file to the fileList property to no avail. I don't see any errors being fired, ever. Nor is the upload event being triggered. Looking at the file, it seems to fit my restrictions as well. Code:

component.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
    }
  }

---

the css class for no-pointer-events sets the pointer-events to none, the wrapper just sets the cursor to be a pointer

component.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>

What exactly am I missing here, seems to me like it should be fairly straight forward.

Answer 1

Turns, what I had to do is actually convert the code in my afterClosed to be the following:

if(result) {
          //retrigger so we get the actual select to appear.
          this.modalAcknowledged = true;
          this.kendoUpload.fileSelectInput.nativeElement.value = null;
          this.kendoUpload.fileSelectInput.nativeElement.click()
        }

This properly triggers the file select for kendo, which means whatever unholy bindings it has internally also work.