CODEWITHSUNDEEP
reactjsreact-final-formfilepond
yaserso
yaserso

Reputation: 2868

React FilePond (functional component) plugins not working even though I'm not getting errors?

I've got FilePond running as a child of Final Form React. I'm trying to register plugins into it, but it doesn't seem to be working.

import React from 'react';
import { Form, Field } from 'react-final-form';
import { FilePond, registerPlugin } from 'react-filepond';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
registerPlugin(FilePondPluginFileValidateType);

const FileAdapter = ({ input: {value, onChange}, meta: { touched, submitError }, handleInvalidFileServerResponse, parent }) => (
  <>
  <FilePond
    name="file"
    allowFileTypeValidation={true}
    fileValidateTypeDetectType={ (source, type) => new Promise((resolve, reject) => {

      // Do custom type detection here and return with promise
      console.log('type');
      return resolve(type);
    })}
  />
  </>
)

class ContactForm extends React.Component {
  render() {
      return (
          <>
          <Form
            onSubmit={this.onSubmit}
            initialValues={{ files: [] }}
            render={({ submitError, handleSubmit, submitting, pristine }) => (
              <form className="form-contact text-justify" onSubmit={handleSubmit}>
                  <Field name="files" component={FileAdapter} />
                  <input tabIndex="5" type="submit" disabled={submitting || pristine} value={submitting ? 'Submitting...' : 'Submit'}/>
              </form>
            )}
          />
          </>
      );
  }
}

I tried to console.log, and it doesn't seem to return anything. I also tried to reject the promise, but there was no effect.

Upvotes: 2

Views: 1091

Answers (1)

Rik
Rik

Reputation: 3596

You need to define a list of accepted file types. If the list is empty, all files are accepted.

<FilePond
    acceptedFileTypes={['image/png']}
    fileValidateTypeDetectType={
      (source, type) => new Promise((resolve, reject) => {

        // Do custom type detection here and return with promise

        resolve(type);
      })
    }
/>

Upvotes: 1

Related Questions