React FilePond FileStatus Enum

Question

I am using the FilePond library to handle my pictures uploads in a React app.

I have a multiupload instance of FilePond, with a maximum of 10 files inside a component which uploads the files to a temporary location and returns the temp ID for each file onUpload.

The problem that I am trying to solve is that I want to disable the submit form button from the component until all images are uploaded.

As I read the documentation there is a FileStatusEnum which has some stats about the number of files in que PROCESSING_QUEUED and other relevant information

I want to know how can I access this in order to create a logic based on it

Below is the FilePond Instance

<FilePond
  allowMultiple
  maxFiles={maxFiles}
  acceptedFileTypes={["image/*"]}
  imageTransformOutputMimeType="image/png"
  imageTransformOutputQuality={100}
  server={{
    process: handleProcess,
    revert: handleRevert
  }}
  required={required}
  onupdatefiles={fileItems => {
    setFiles(fileItems.map(fileItem => fileItem.file));
  }}
>
  {files.map(file => (
    <File key={file} src={file} origin="local" />
  ))}
</FilePond>

Answer 1

I think you can use the onprocessfiles callback, it's run when all files inside FilePond have been processed. https://pqina.nl/filepond/docs/patterns/api/filepond-instance/#callbacks