transloadit/uppy

Not able to use Uppy dashboard in Angular 18

Closed this issue · 3 comments

Initial checklist

  • I understand this is a bug report and questions should be posted in the Community Forum
  • I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

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 https://uppy.io/docs/angular/

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

Screenshot 2024-10-01 at 9 52 29 AM

Also, the HTML show the following error

Screenshot 2024-10-01 at 9 53 13 AM

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.

Hi, you are assigning animateOpenClose to @uppy/core but that does not exist. It's a prop on <dashboard>. Does it work then?

Hi.

I'm also getting similar errors with Node 18.
For example:
Object literal may only specify known properties, and 'closeModalOnClickOutside' does not exist in type 'DashboardMiscOptions
Object literal may only specify known properties, and 'closeAfterFinish' does not exist in type 'DashboardMiscOptions

In fact all of these properties give me the same error

closeModalOnClickOutside: false,
closeAfterFinish: false,
disablePageScrollWhenModalOpen: true,
animateOpenClose: true,
browserBackButtonClose: false,
autoOpenFileEditor: false,

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

Thanks.

Hi, do you have a reproducible example in StackBlitz?