I'm trying to upload a file using Kendo UI in angular. Everything is working fine except progress bar. It always showing zero while upload processing. I'm using Kedno UI upload in popup.
Here is my parent component parent.component.html
<button kendoButton [primary]="true" (click)="uploadMe(id)">
<app-upload [model]="uploadItem" (cancel)="uploadcancelHandler()"> </app-upload>
parent.component.ts
public uploadMe (id) {
this.uploadItem = {
id: id
};
}
upload.component.html
<kendo-upload
[saveUrl]="saveUrl"
#dUpload
[(ngModel)]="myFiles"
[autoUpload]="false"
[restrictions]="myRestrictions"
[withCredentials]="false"
[disabled]="disme"
(clear)="clearEventHandler($event)"
(success)="successEventHandler($event)"
(upload)="uploadEventHandler($event)"
(error)="errorEventHandler($event)"
(select)="selectEventHandler($event)">
</kendo-upload>
upload.component.ts
saveUrl = "saveUrl";
selectEventHandler(e: SelectEvent) {}
uploadEventHandler(e: UploadEvent) {
}
successEventHandler(e: SuccessEvent) {
}
clearEventHandler(e: ClearEvent) {}
errorEventHandler(e: ErrorEvent) {}
interceptor.ts
intercept (
req: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
if (req.url === "saveUrl") {
const headers = new HttpHeaders({ "Content-Type": this.store.content });
const req = new HttpRequest(
"PUT",
this.store.fileurl,
this.store.actualfile,
{
headers: headers,
reportProgress: true
}
);
return next.handle(req).pipe(
map((event: HttpEvent<any>) => {
if (event instanceof HttpResponse) {
}
return event;
}),
catchError((error: HttpErrorResponse) => {
return throwError(error);
})
);
}
The Upload section are in pop up. File uploading successfully but progess bar always been zero not showing progessing counts. Thanks in advance.