Upload animations not appearing correctly.

[waircit]

Wondering if I can get some help here.

I have an upload component that is not showing the progress bar loading animation correctly, nor is it showing the Uploading... spinner.

 

I have attached an image of what the component looks like after I have initiated an upload:

- the progress bar fills up 100% immediately without waiting for API

- the Uploading... does not spin

When the API response returns to the browser, the progress bar transitions to green and disappears.

I have this working in another project with all animations correct, so I'm confused as to what I have done wrong. I have checked package.json and the projects appear identical in the dependencies installed.

"dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/cdk": "^9.1.1",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/localize": "^9.1.9",
    "@angular/material": "^9.2.2",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    "@progress/kendo-angular-common": "^1.2.2",
    "@progress/kendo-angular-l10n": "^2.0.1",
    "@progress/kendo-angular-upload": "^5.2.1",
    "@progress/kendo-theme-default": "^4.18.2",
    "@progress/kendo-theme-material": "^2.3.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },

 

template:

<kendo-upload
  formControlName="formAttachment0"
  [autoUpload]="true"
  [saveUrl]="apiUrl"
  [removeUrl]="apiUrl"
  [restrictions]="restrictions"
  [multiple]="true"
  [withCredentials]="false"
  (upload)="uploadEventHandler($event)"
  (success)="successEventHandler($event)">
</kendo-upload>

[waircit]

Image of component in template attached

[waircit]

Sorry - to provide some more context:

- I am importing BrowserAnimationsModule in app.module.ts.

- I am using the Upload component in a lazy-loaded feature module.

[waircit]

I updated packages but still same result...no progress bar animation or spinner

 

  "dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/cdk": "^9.1.1",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/localize": "^9.1.9",
    "@angular/material": "^9.2.2",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    "@progress/kendo-angular-common": "^1.2.2",
    "@progress/kendo-angular-l10n": "^2.0.1",
    "@progress/kendo-angular-upload": "^5.3.0",
    "@progress/kendo-theme-default": "^4.18.2",
    "@progress/kendo-theme-material": "^2.5.2",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },

[Ivan]

Hello Wairc IT,

In deed very strange issue and is not quite clear what can cause it. We will need some additional information in order to solve the issue.

Did you noticed if the other animations are working fine, like those on a KendoDropdowns. Also you can check in Web Console -> Network for 'upload progress' multiple responses of upload event. In addition, if you suspect small file size, it is possible to throttle network like showed in attached file.

Regards,
Ivan
Progress Telerik

[waircit]

Hi Ivan,

 

Thanks for checking this out.

The upload component is the only component in this project I am currently using.

Could it be a CSS issue?

I am importing these stylesheets:

@import "~@progress/kendo-theme-material/scss/upload.scss";
@import "~@progress/kendo-theme-material/scss/button.scss";

[Ivan]

Hello WAIRC IT,

Just for the test you can import @progress/kendo-theme-material/scss/all.scss , also you can try with kendo-theme-default just to be sure, but probably the problem lies on other place.

Did you get chance to check server communication is ok and the server is responding as it should ?

Also some sample code of component and service for backend communication would help us to solve the issue.

Regards,
Ivan
Progress Telerik