Not able to use Uppy dashboard in Angular 18

[anuj9196]

Steps to reproduce

I installed the following packages in Angular 18 application

"@uppy/angular": "^0.7.0",
"@uppy/core": "^4.2.1",
"@uppy/dashboard": "^4.1.0",

Followed the following instructions to setup in Angular Angular | Uppy

Added this code in the component.html file

<uppy-dashboard [uppy]="uppy"> </uppy-dashboard>

and component.ts file as

import {Component} from '@angular/core';
import {UppyAngularDashboardModule} from "@uppy/angular";
import {Uppy} from "@uppy/core";

@Component({
  selector: 'app-file-upload',
  standalone: true,
  imports: [
    UppyAngularDashboardModule
  ],
  templateUrl: './file-upload.component.html',
  styleUrls: [
    './file-upload.component.scss',
  ],
})
export class FileUploadComponent {
  uppy: Uppy = new Uppy({
    debug: true, autoProceed: true, animateOpenClose: false
  });
}

However the animateOpenClose is giving an error as

Also, the HTML show the following error

Expected behavior

The code should be working as given in the doc. Or the doc should be updated with clear instructions.

Actual behavior

I am getting error in declaring options for the uppy-dashboard component.

[Merlijn]

Hi, would you mind creating an issue for this on GitHub? Lots of bonus points if you can make a reproducible example on stackblitz.com

[Merlijn]

Never mind, you created an issue: Not able to use Uppy dashboard in Angular 18 · Issue #5481 · transloadit/uppy · GitHub

[anuj9196]

I removed the properties from Uppy() class and prepared a separate variable for the same

uppyProps: any = {
    restrictions: {
      allowedFileTypes: ['.jpg'],
      maxNumberOfFiles: 1
    }
  };

and updated the HTML as

<uppy-dashboard [uppy]="uppy" [props]="uppyProps"> </uppy-dashboard>

Here are the few issues, I’m noticing

1. Removing any from the type-cast gives an error
   
   
2. Adding DashboardOption as typecast gives further error

TS2314: Generic type DashboardOptions requires 2 type argument(s).

3. Setting any removes error, but I do not see any restrictions applied and I’m still able to upload other file types and more than 1 file

[Merlijn]

restrictions are options for @uppy/core, not dashboard. Your original issue was the same problem but the other way around. Please check the docs which options belong where.