3

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.

lamont
  • 428
  • 1
  • 7
  • 16

1 Answers1

5

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.

Rik
  • 3,328
  • 1
  • 20
  • 23
  • 2
    OK that makes sense, especially considering it looked like the first item was an empty object. It's definitely not clear that this is what's happening from what I've seen in the docs, so maybe just updating those would save someone from confusion in the future? Thanks for replying. – lamont May 08 '19 at 18:41
  • Hi @Rik Is there any easier configuration for this issue? – Bishan Dec 09 '19 at 06:49
  • 1
    @Rik is there any update on this? Depending on the server side technology one is using, you might have to jump through hoops in order to get the second file (especially as they are using the same name in the transfer). – big data nerd Mar 11 '20 at 14:34
  • @bigdatanerd it's still the same, but you can use the process example in the server docs and all will work fine. – Rik Mar 12 '20 at 08:19