Filepond Reusable Component

Hello! Recently i’ve been using filepond with doka editor and decided to move my filepond component into its own function so I can reuse it and call it wherever I need it and I wouldn’t have to redefine doka editor and my stickers. However I noticed that when using the custom class, filepond goes nuts after adding more than 1 file (with one file it works fine)

  const [files, setFiles] = useState([])

  useEffect(() => {
    let isMounted = true
    if(isMounted){
      props.onupdatefiles(files)
    }
    return () => {
      isMounted = false;
    };
  }, [files]);

  return (
    <FilePond
      files={props.files}
      allowImagePreview={props.settings.allowImagePreview}
      allowMultiple={props.settings.allowMultiple}
      allowReorder={props.settings.allowReorder}
      maxFiles={props.settings.maxFiles}
      allowImageEdit={props.settings.allowImageEdit}
      acceptedFileTypes={props.settings.acceptedFileTypes}
      allowFileTypeValidation={props.settings.allowFileTypeValidation}
      allowFileSizeValidation={props.settings.allowFileSizeValidation}
      maxFileSize="2MB"
      labelMaxFileSizeExceeded="Files can not be larger than 2MB"
      imageEditEditor={create({
        storageName: 'doka',
        utils: ['crop', 'filter', 'color', 'markup', 'sticker'],
        stickers: [stickers]
      })}
      onupdatefiles={fileItems => {
        setFiles(fileItems.map(fileItem => fileItem.file))
      }}
    />
  )
}

the root reusable component looks something like this. When files are added they get set to the state and then passed back out and can be dealt with an external state hence why the props.files. I do this because I end up using this in formik so I pass the values in that place.

function FormFileUpload(props) {
  const { values, errors, submitForm, setFieldTouched, setFieldValue } = useFormikContext();
  return (
    <>
      <FormError errors={errors} title={props.title} name={props.name} />
      {console.log("FUCKING VALUES", values[props.name])}
      <CipherPond
        files={values[props.name]}
        settings={{
          allowImageEdit: true,
          allowImagePreview: true,
          allowMultiple: true,
          allowReorder: true,
          acceptedFileTypes: props.acceptedFileTypes,
          allowFileTypeValidation: true,
          allowFileSizeValidation: true,
          maxFiles: props.max,
        }}
        onupdatefiles={(e) => { 
          console.log("FormFileUpload ->", e) 
          setFieldValue( props.name, e) 
        }}
      />
    </>
  )
}

Then in the form file that’s specifically for reuse in the formik file is where I see the issue with the log. After uploading one file the state is correct and the formik value is correct. However after adding a second file it logs 2 files and then removes all files.

FormFileUpload -> [File]
instrument.ts:129 FUCKING VALUES [File]
instrument.ts:129 FUCKING VALUES [File]
instrument.ts:129 FormFileUpload -> [File]
instrument.ts:129 FUCKING VALUES [File]
instrument.ts:129 FUCKING VALUES [File]
instrument.ts:129 FormFileUpload -> (2) [File, File]
instrument.ts:129 FUCKING VALUES (2) [File, File]
instrument.ts:129 FUCKING VALUES (2) [File, File]
instrument.ts:129 FormFileUpload -> (2) [File, File]
instrument.ts:129 FUCKING VALUES (2) [File, File]
instrument.ts:129 FUCKING VALUES (2) [File, File]
instrument.ts:129 FUCKING VALUES (2) [File, File]
-- This is where the image renders for a split second --
instrument.ts:129 FormFileUpload -> []
instrument.ts:129 FUCKING VALUES []
instrument.ts:129 FUCKING VALUES []
instrument.ts:129 FUCKING VALUES []
instrument.ts:129 FormFileUpload -> []
instrument.ts:129 FUCKING VALUES []
instrument.ts:129 FUCKING VALUES []
index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in CipherPond (at FormFileUpload.jsx:12)
    in FormFileUpload (at FoxhoundCreator.jsx:364)
    in div (at FoxhoundCreator.jsx:347)
    in div (at CipherForm.jsx:30)
    in StepForm (at CipherForm.jsx:109)

And then I should note, the <FormFileUpload> that performs the setField exists inside mapped children that ultimately come from another component.

Its as follows: SomeRandomFormComp --> The formik file that maps the children of SomeRandomFormComp --> the children from SRFC that hold the FormFileUpload --> FormFileUpload holds FilePond

[Rafcin]

@rikschennink I ended up solving it. The issue stemmed from a component using new Date() and a timer. However the main issue came from react-sizeme. I had the form container wrapper in <SizeMe/> and this caused the render loop. I had looked at filepond source for hours and realized it couldn’t actually belong to file pond. So I guess for anyone that uses SizeMe, don’t use filepond inside it. In my case I use to to grab the page width in a test.

[rikschennink]

Glad to year that @Rafcin , thanks for posting the solution.