Typescript incompatibility with onupdatefiles and files props

[anthonysgro]

Is there an existing issue for this?

• I have searched the existing issues

Have you updated React FilePond, FilePond, and all plugins?

• I have updated FilePond and its plugins

Describe the bug

I am a new adopter of this library, and I am using typescript. However, I cannot figure out how to have my files in state match the type demanded by onupdatefiles.

Reproduction

export default function FreePollForm() {
    // State for the file input
    const [files, setFiles] = useState<Array<FilePondInitialFile | File | Blob | string>>([]);
    const [formData, setFormData] = useState({});
    
    const filepondRef = useRef<FilePond>(null)

    return (
                <FormItem>
                <FormLabel>Image</FormLabel>
                    <FormControl>
                        <FilePond
                            ref={filepondRef}
                            files={files}
                            onupdatefiles={setFiles}
                            allowMultiple={false}
                            name="files"
                            labelIdle='Drag & Drop your files or <span className="filepond--label-action">Browse</span>'
                        />
                    </FormControl>
            </FormItem>
    )

Here I am getting an error with onupdatefiles:

No overload matches this call.
  Overload 1 of 2, '(props: FilePondProps): FilePond', gave the following error.
    Type 'Dispatch<SetStateAction<(string | Blob | FilePondInitialFile | File)[]>>' is not assignable to type '(files: FilePondFile[]) => void'.
      Types of parameters 'value' and 'files' are incompatible.
        Type 'FilePondFile[]' is not assignable to type 'SetStateAction<(string | Blob | FilePondInitialFile | File)[]>'.
          Type 'FilePondFile[]' is not assignable to type '(string | Blob | FilePondInitialFile | File)[]'.
            Type 'FilePondFile' is not assignable to type 'string | Blob | FilePondInitialFile | File'.
              Property 'options' is missing in type 'FilePondFile' but required in type 'FilePondInitialFile'.
  Overload 2 of 2, '(props: FilePondProps, context: any): FilePond', gave the following error.
    Type 'Dispatch<SetStateAction<(string | Blob | FilePondInitialFile | File)[]>>' is not assignable to type '(files: FilePondFile[]) => void'.ts(2769)

And when I switch the setFiles type to

    const [files, setFiles] = useState<Array<FilePondFile>>([]);

I get an error on the files prop:

No overload matches this call.
  Overload 1 of 2, '(props: FilePondProps): FilePond', gave the following error.
    Type 'FilePondFile[]' is not assignable to type '(string | Blob | FilePondInitialFile | ActualFileObject)[]'.
      Type 'FilePondFile' is not assignable to type 'string | Blob | FilePondInitialFile | ActualFileObject'.
        Property 'options' is missing in type 'FilePondFile' but required in type 'FilePondInitialFile'.
  Overload 2 of 2, '(props: FilePondProps, context: any): FilePond', gave the following error.
    Type 'FilePondFile[]' is not assignable to type '(string | Blob | FilePondInitialFile | ActualFileObject)[]'.ts(2769)

So I am not entirely sure what to do here since they are expecting two different types but they handle the same objects

Environment

- Device: MacOs M1
- OS: Sonoma 14.5
- Broser: Firefox 126.0
- React version: 18

[anthonysgro]

As a workaround I am coercing typescript into thinking the types are correct. though this works for now, idk if there are going to be unforeseen problems later with this:

                        <FilePond
                            ref={filepondRef}
                            files={files}
                            onupdatefiles={(fileItems: FilePondFile[]) => {
                                setFiles(
                                    fileItems.map(
                                        (fileItem) => fileItem.file as File,
                                    ),
                                )
                            }}
                            allowMultiple={false}
                        />

[rikschennink]

@anthonysgro Hey, I'm unfortunately not proficient enough in TypeScript to solve this based on the descriptions above. I guess coercing will work for now and I don't see that causing any issues.

[OscarGodson]

I ran into this also and it took me awhile to figure out how to get the sample above working since the FilePondFile wasn't exportable by react-filepond. Finally got it working with

import { FilePondFile, FilePondInitialFile } from 'filepond'

Thanks @anthonysgro for the fix!

@rikschennink Maybe a sample/help on the docs could be a fix in the meantime. I just copied the example from the site for react but hit type errors and this ticket helped me solve it! So like even just a If using react, you'll need to do this... sort of thing.

[rikschennink]

@OscarGodson Thanks for the suggestion, I've updated the docs with a short annotation.

[arantebw]

This is what I did in my case.

import { FilePondFile } from 'filepond';
...
const [files, setFiles] = useState<File[]>([]);
...
 <FilePond
  files={files}
  onupdatefiles={(fileItems: FilePondFile[]) => {
    setFiles(fileItems.map((f: FilePondFile) => f.file as File));
  }}
  allowMultiple={true}
  maxFiles={3}
  server="/api"
  name="files"
  labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
/>
...