FilePond only pdf accepted files

Question

I am using FilePond (React) in order to upload files. I want only pdf files. I've installed the File Type Validation plugin with npm command : npm i filepond-plugin-file-validate-type --save and then npm run-script build command. I've tested and it's uploading all kinds of files.

This is my code :

import {registerPlugin} from 'react-filepond'
// Import the plugin code
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
// Register the plugin
registerPlugin(FilePondPluginFileValidateType);


 <FilePond
                        accepted-file-types={"application/pdf"}
                        server={{
                            process: async (fieldName, file, metadata, load, error, progress, abort) => {
                                await processFile(fieldName, file, metadata, load, error, progress, abort, setFileName);
                            }
                        }}
                        //server={{process: Config.pdfServer}}
                        //ref={ref => this.pond=ref} // To call instance methods
                        oninit={() => handleInit()}
                        // nom du fichier c'est file.name
                        // callback onupdatefiles- a file has been added or removed, receives a list of file items
                        onupdatefiles={(fileItems) => {
                            // Set current file objects to this.state
                            // boucler sur un tableau
                            setFile(fileItems.map(fileItem => fileItem.file));
                            //     console.log(fileItem.getFileEncodeBase64String());
                        }}
                        allowFileEncode={true}
                        allowMultiple={false}
                        instantUpload={true}
                        onprocessfile={(error, file) => {
                            console.log('PROCESSED', file, 'SERVER_ID', file.serverId);
                            //    console.log('ERROR PROCESSED', error);
                        }}
                        // callback tiré de la documentation FilePond - if no error, file has been succesfully loaded
                        onaddfile={(error, file) => {
                            console.log('PROCESSED', file, 'SERVER_ID', file.serverId);
                            //   console.log('ERROR PROCESSED', error);
                        }}
                    />

Thank you very much.

Edit: with accepted-file-types={['application/pdf']} it's not working ...

manoi · Answer 1 · 2020-06-17T12:03:56.147

5

You can try accepted-file-types={['application/pdf']}, the documentation describes that for the property "accepted-file-types" an array must be specified.

https://pqina.nl/filepond/docs/patterns/plugins/file-validate-type/

edit:

you have to use CamelCase for the Property. So the right setting might be acceptedFileTypes={["application/pdf"]}

edited Jun 17 '20 at 12:03

answered Jun 08 '20 at 07:12

manoi

758
4
11

Thank you very much for your answer. I've seen the documentation I firstly did the accepted-file-types={['application/pdf']} ran npm run-script build command I have the same result it accepts all kinds of files. I don't understand why it's so strange... – ana maria Jun 08 '20 at 07:36
please the edited comment. I think if you set the property as CamelCase it should work – manoi Jun 17 '20 at 12:04

FilePond only pdf accepted files

1 Answers1