Search code examples
reactjsfilepond

FilePond override server.process on React


I'm trying to use the FilePond control in a React app. I need to handle file uploads with custom code. According to the documentation, I'm supposed to use setOption to override the server.process function. Documentation Link

This doesn't appear to be an option when using a React component.

I can find multiple instances of people trying to do this, but can't find any examples of how it's done.

<FilePond 
  files={this.state.newFiles}
  allowMultiple={true}  
  server={this.someFunction}
/>

Solution

  • With React you need to use the server prop. The server prop is either a URL or a configuration object, not a function.

    <FilePond 
      files={this.state.newFiles}
      allowMultiple={true}  
      server={{
        process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
            // your processing code here
        }
      }}
    />
    

    For more information view this example processing function: https://pqina.nl/filepond/docs/patterns/api/server/#advanced