How to use FilePondPluginFileValidateType in reactjs?

[hungdev]

i just want to use accept file type, so i found FilePondPluginFileValidateType, but i don't know how to use FilePondPluginFileValidateType. Please help me.

import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'

<FilePond
              ref={ref => this.pond = ref}
              allowMultiple={true}
              name="ebookFile"
              onupdatefiles={(arrFiles) => this.setState({ mailData: { ...mailData, arrFiles } })}
              // ignoredFiles={['.ds_store', 'thumbs.db', 'desktop.ini']}
              acceptedFileTypes={['image/png']}
            />

thank you

[brianpooe]

Why was this issue closed? when it was not resolved.

[hungdev]

@Brian611 yes, i resolved it. read docs: https://pqina.nl/filepond/docs/patterns/frameworks/react/ it config like end of part guide.

import { FilePond, registerPlugin } from 'react-filepond';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type'
import FilePondPluginFileValidateSize from 'filepond-plugin-file-validate-size';

registerPlugin(FilePondPluginFileValidateType, FilePondPluginFileValidateSize)

<FilePond
              ref={ref => this.pond = ref}
              allowMultiple={true}
              // acceptedFileTypes={acceptFileTypes}
              name="ebookFile"
              // onwarning={(err) => alert(JSON.stringify(err))}
              // onerror={(err) => alert(JSON.stringify(err))}
              onprocessfile={(error, file) => this.handlePondFile(error, file)}
              // server="http://localhost:3000/upload"
              // onaddfile={(error, file) => this.onAddFile(error, file)}
              onupdatefiles={(arrFiles) => this.setState({ mailData: { ...mailData, arrFiles } })}
              maxFileSize={'5MB'}
            />

i hope this help you.

[brianpooe]

Thanks this solved it. registering the plugin was crucial.

[dineshtalekar777]

@hungdev or @brianpooe - can you please share the complete working example for file size validation as this is not working in my solution I did the same thing as you shown in the above example I have installed below packages npm install react-filepond filepond --save npm i filepond-plugin-file-validate-size --save npm i filepond-plugin-file-validate-type --save

<FilePond ref={ref => this.pond = ref} labelIdle="Drag & Drop a supporting document or Browse" files={this.props.campaignFormValues.files}
                            allowMultiple={true} maxFiles={3}
                            dropValidation
                            onupdatefiles={(fileItems) => {
                                this.props.fileAttachmentsChange(fileItems);
                            }}
                            maxFileSize={'10MB'}
                            >
                        </FilePond>

[hungdev]

@dineshtalekar777 maybe you forgot: registerPlugin(FilePondPluginFileValidateType, FilePondPluginFileValidateSize)

[dineshtalekar777]

@hungdev - Yes I did that also

[dineshtalekar777]

@hungdev - Please find attached screenshots I did the same

[hungdev]

@dineshtalekar777 here is an example I made it for you

---

Rik Schennink: I've removed the link to the code snippet as with the HUGE link at the top it very much seemed like spam.

[dineshtalekar777]

@hungdev - Thanks a lot for example. I am doing the same but as I uploaded the images I am getting the compile time error for maxFileSize property

[erikkjernlie]

Same her - getting the compile error. Any updates?

[rikschennink]

@dineshtalekar777 @erikkjernlie This is a problem with the TypeScript types not loading correctly. Looking into it.

[rikschennink]

@dineshtalekar777 @erikkjernlie You can add // @ts-ignore above the property to temporary fix the issue.

See: https://codesandbox.io/s/interesting-darkness-kguj9?file=/src/App.tsx

[rikschennink]

I've done some more research and learned that TypeScript interfaces can be extended like this:

interface MyInterface {
  label: string;
}

Now add additionalLabel to our MyInterface interface.

interface MyInterface {
  additionalLabel: string;
}

Which should help with making the FilePond plugin interfaces a bit easier to set up. So will probably get to fixing this next week.

[rikschennink]

Just updated type declarations for each FilePond plugin. should fix the issue.