How can I make the selected file type acceptable only as docx, using FilePond?

Question

How can I make the selected file type acceptable only as docx? I want the selected file to have a docx extension only. What kind of filtering should I apply? How can I do that?

React code sample

return (
    <>
        <Form className='orange-color ml-2'>
            <FilePond
                ref={ref => (ref)}
                allowFileEncode={true}
                allowMultiple={false}
                oninit={() =>
                    console.log("FilePond "+formKey.toString()+" has initialised")
                }

                onupdatefiles={(fileItems) => {
                    const file = fileItems.map(fileItem => fileItem.file)

                    if (file[0]) {
                        const reader = new FileReader();
                        reader.readAsDataURL(file[0]);

                        reader.onload = (event) => {
                            const convertedResult = event.target.result

                            if (convertedResult) {
                                const regex = '(.*)(base64,)(.*)';
                                const matches = convertedResult.match(regex);
                                const val = matches[3];

                                changeSelected(val)
                            }
                        };
                    }
                }

                }
            />
            <Form.Check>
                <Form.Check.Input required
                                  checked={input.value !== null}
                                  style={{display:'none' }}
                />
                <Form.Control.Feedback type="invalid" >Required</Form.Control.Feedback>
            </Form.Check>
        </Form>
    </>
)

score 1 · Accepted Answer · answered May 04 '20 at 15:27

1

The File Type Validation plugin handles blocking of files that are of the wrong type. When creating a FilePond instance based on a input type file, this plugin will automatically interpret the accept attribute value.

https://github.com/pqina/filepond-plugin-file-validate-type

answered May 04 '20 at 15:27

Logan Poynter

110
8

i didn't understand how to add the file extension i want – meren May 04 '20 at 15:28
I haven't used FilePond before but from the docs it looks like it just reads the standard input accept attribute. So it should just need to be ```acceptedFileTypes: ['.docx'],``` See: https://pqina.nl/filepond/docs/patterns/plugins/file-validate-type/#custom-type-detection – Logan Poynter May 04 '20 at 15:39
@MystikDeveloped validation by extension is currently not supported. See https://github.com/pqina/filepond-plugin-file-validate-type/issues/4 for how to validate based on mimetype. – Rik May 05 '20 at 07:59

score 0 · Answer 2 · answered May 04 '20 at 15:23

0

Filepond has a plugin for file types: https://pqina.nl/filepond/docs/patterns/plugins/file-validate-type/

answered May 04 '20 at 15:23

Ed Lucas

5,955
4
30
42

Is it used as 'acceptedFileTypes = {' docx '}'? I couldn't see an example. – meren May 04 '20 at 15:31

score 0 · Answer 3 · answered May 05 '20 at 05:29

acceptedFileTypes={'application/vnd.openxmlformats-officedocument.wordprocessingml.document'}

Code example

<Form className='orange-color ml-2'>
                    <FilePond
                        ref={ref => (ref)}
                        allowFileEncode={true}
                        allowMultiple={false}
                        acceptedFileTypes={'application/vnd.openxmlformats-officedocument.wordprocessingml.document'}

......

How can I make the selected file type acceptable only as docx, using FilePond?

3 Answers3