Kendo Angular Upload control not firing events

[Tim]

I recently converted a file-upload control to use external buttons instead of the built-in Upload and Clear buttons.  The control was correctly firing all the events.  However, when I hid the built-in buttons and used my own buttons to execute the uploadFiles method, the events no longer fire.

Here is HTML that creates the control and the new buttons:

<kendo-upload #upload

[saveUrl]="equipmentUploadUrl"
[multiple]="false"
[autoUpload]="false"
[restrictions]="uploadRestrictions"
(complete)="completeEventHandler()"
(error)="errorEventHandler($event)"
(success)="successEventHandler($event)"
(select)="onSelectEvent($event)"
(upload)="onUploadEvent($event)"
(remove)="onRemoveEvent($event, upload)"
[(ngModel)]="uploadFileList">

<kendo-upload-messages select="Upload Equipment List">
</kendo-upload-messages>'

<div row *ngIf="fileCount > 0">

<button kendoButton [primary]="true" (click)="onClearButtonClick(upload)"> Clear </button>
<button kendoButton [primary]="true" (click)="onUploadButtonClick(upload)"> Upload </button>
&nbsp;
<input type="checkbox" [(ngModel)]="createSnapshots" class="k-checkbox" />
<label for="createSnapshots" class="k-checkbox-label">Create Snapshots</label>

</div>

Here is the handler for the click of the Upload button:

public onUploadButtonClick(upload: UploadComponent) {

this.loading = true;
upload.saveUrl += `?createSnapshot=${this.createSnapshots}`;
upload.uploadFiles();

}

When the uploadFiles() method is execute, it DOES fire the upload event, which my code handles in the onUploadEvent method, but none of the other events are fired.  I want to be able to catch when the upload is complete, but neither the "complete" nor "success" events are firing.

public onUploadEvent(e) {

this.resetFileUpload();

}

public completeEventHandler(): void {

this.loading = false;

}

public successEventHandler(e: SuccessEvent): void {

this.loading = false;

}

public errorEventHandler(e: ErrorEvent): void {
  alert("Your file upload failed.  Please try again.");
}

private resetFileUpload() {
    this.fileCount = 0;
    this.uploadFileList = [];
}

 

 

[Dimiter Madjarov]

Hello Tim,

Thank you for the provided details about the current scenario. Generally, in both cases - on action button click OR on API method invocation, the Upload component executes the same logic internally, so there should not be a difference in how the mentioned events are fired. As confirmed, the upload event is fired as expected.

This is why I assume that the root cause of the problem is something else. Could you please check:

• Are the files displayed as successfully uploaded in the files list i.e. with a "File successfully uploaded" green label
• Are there any errors in the browsers console?
• Are the initiated upload requests successful? This could be checked by opening the Network tab of the browsers developer tools and uploading a file in the mean time.

If all of the above looks OK, we will need a runnable example, in which the problem is reproducing, in order to inspect it locally and provide further assistance.

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Progress Telerik