Search code examples
reactjstypescriptfilepond

When uploading a single file, Filepond submits an empty file before submitting the "real" file

I'm trying to understand what Filepond is uploading to my server method and I've run across something really confusing. I'm only using the process server method and I'm testing with a single file at a time. Here's my Filepond definition (this is react with typescript)

<FilePond
   ref={this.pond}
   allowMultiple={true}
   maxFiles={3}
   instantUpload={false}
   onupdatefiles={(files) => this.setState({files: files})}
   files={this.state.files}

   // @ts-ignore
   server={{
       process: this.getProcessUrl(),
       revert: null,
       fetch: null,
       load: null,
       restore: null,
   }}/>

files is defined on the state object as any[]. We're manually triggering the upload by calling processFiles() via the element ref the component keeps around. getProcessUrl builds a ServerUrl for FilePond based on an id that's generated elsewhere on the page and gives it an auth header to pass. So essentially server.process winds up looking like this:

{ 
  url: "http://server/api/1234/upload",
  method: "POST",
  headers: {"Authorization": "foo"}
}

When the upload is triggered with a single file added (via drag-and-drop if that matters, it occurs to me I haven't tested this with a browse) if I look at state.files there's one item in the array. However, what Filepond submits to my server looks like this:

------WebKitFormBoundary1YHKxKgBU2cvURKi
Content-Disposition: form-data; name="filepond"

{}
------WebKitFormBoundary1YHKxKgBU2cvURKi
Content-Disposition: form-data; name="filepond"; filename="test.csv"
Content-Type: text/csv


------WebKitFormBoundary1YHKxKgBU2cvURKi--

Note the extra form-data with the name "filepond" that's being sent first.

I've been looking at the documentation, and it's vague on what the actual post body is supposed to look like in this case short of telling me to expect multipart form-data, so I don't understand what I'm seeing. Is that additional piece of form data supposed to be there and my server code should just ignore it or what?

Thanks.

Solution

  • FilePond's author here. FilePond sends two items for each file. The file itself and its metadata.

    The metadata part is the first one you're seeing. It can contain custom meta data, image crop information, etc. The second one is the file.

    I can understand that this might be confusing, I'm looking into making this optional/easier to configure. If you want to work around this you can set up a custom processing method, the process example in the server docs should work out of the box.