DropzoneDialog: onSave has difficult to use type, fileObjects is now required

Bug Report

Describe the bug

38d5c00b4689f093f337111736aad66a239c97db updated the TypeScript types, but the new properties for DropzoneDialog appear to require properties that don’t exist, and functions with signatures that aren’t (easily) possible to satisfy.

Steps to reproduce

Use DropzoneDialog in a TypeScript project.

My code original code looked like this:

<DropzoneDialog
    acceptedFiles={['.txt']}
    cancelButtonText={'cancel'}
    submitButtonText={'submit'}
    dropzoneClass={classes.dropzone}
    dropzoneText={'Text files, one word per line. Click or drag to upload.'}
    previewGridClasses={{ container: classes.previewGrid }}
    previewText={'Files:'}
    maxFileSize={1000000}
    open={uploadOpen}
    onClose={() => setUploadOpen(false)}
    onSave={async (files: File[]) => {
        setUploadOpen(false);

        // ...
    }}
/>

But the same code now errors with:

Property 'fileObjects' is missing in type '{ acceptedFiles: string[]; cancelButtonText: string; submitButtonText: string; dropzoneClass: string; dropzoneText: string; previewGridClasses: { container: string; }; previewText: string; maxFileSize: number; open: boolean; onClose: () => void; onSave: any; }' but required in type 'DropzoneAreaBaseProps'.ts(2741)

As fileObjects has been added to the props as a non-optional param. I do not believe this prop exists (it appears to be a state variable, not a prop).

Additionally, onSave has an awkward type:

(property) onSave?: (((event: React.SyntheticEvent<Element, Event>) => void) & ((files: File[], event: React.SyntheticEvent<Element, Event>) => void)) | undefined

TS cannot infer the signature of this function, and it seems like a mistake that the first parameter is an event or an array of files. Specifying the type for my function’s parameter as File[] gives me the message:

Type '(files: File[]) => Promise<void>' is not assignable to type '((event: SyntheticEvent<Element, Event>) => void) & ((files: File[], event: SyntheticEvent<Element, Event>) => void)'.
  Type '(files: File[]) => Promise<void>' is not assignable to type '(event: SyntheticEvent<Element, Event>) => void'.
    Types of parameters 'files' and 'event' are incompatible.
      Type 'SyntheticEvent<Element, Event>' is missing the following properties from type 'File[]': length, pop, push, concat, and 28 more.ts(2322)

Expected behavior

Between 3.0.0 and 3.1.0, The TS code still compiles.

Versions

• OS: [e.g. iOS]
• Browser: [e.g. chrome, safari]
• @material-ui/core version: [e.g. 4.9.2]
• material-ui-dropzone version: [e.g. 3.0.1]

Additional context

To reproduce, use clone https://github.com/zikaeroh/codies, and run yarn upgrade && rm -rf node_modules && yarn install in the frontend directory to upgrade. yarn build will print messages (or open the workspace in VS Code and open gameView.tsx).

[zikaeroh]

Thanks, my project now builds again!

Exactly for that reason and unfortunately keeping the TS typings updated is a bit of pain (hoping to fix this with a future migration to TS 😬 ).

Yes, being able to write the whole thing and tests in TS will certainly help prevent API drift.

[panz3r]

Hi @zikaeroh ,

Thanks for the quick feedback 👍 , I just updated the typings.

Omit I also think is already built into TS, but maybe you’re redefining it for older versions of TS without it?

Exactly for that reason and unfortunately keeping the TS typings updated is a bit of pain (hoping to fix this with a future migration to TS 😬 ).