Filepond: Post additional data

[divdax]

There should be a data property to post additional data without using custom handler functions.

[rikschennink]

@divdax Can you be a bit more specific? What data do you want to post along with the image?

[divdax]

Sometimes i need to submit additional data with post requests like users-metadata. Maybe just pass the data like headers for the request.

data: {
  field: 'value',
  field2: 'value',
}

[rikschennink]

I understand, will see if I can introduce this as a tiny plugin somehow. Will keep you posted.

[rikschennink]

Version (1.0.4) enables adding data to files.

file.setMetadata('my-key', 'anything-serializable');

It's then appended to the upload. So when listening to the 'FilePond:addfile' event should allow you to add this data to a file and then retrieve it on the server.

[IsraelAdura]

how to use the above please, I wanna send auth headers with the request.

[rikschennink]

@IsraelAdura You can add custom headers to requests using the headers property on the various server endpoints.

For instance:

FilePond.setOptions({
    server: {
        url: 'http://192.168.0.100',
        process: {
            headers: {
                'Authorization': 'Basic ZWx1c3VhcmlvOnlsYWNsYXZl'
            }
        }
    }
});

[IsraelAdura]

Ok thanks, I think I just solved it, using react filepond here, I set the headers in the handleInit method, as this.pond.customHeader='headers here'

[Nierrrrrrr]

How can I retrieve metadata on the server side?

I'm using Spring for the back-end, and all I found the examples the metadata JSON has a different name, but when I using setMetadata the name is the same with the file. For example, my request payload will looks like:

Content-Disposition: form-data; name="filepond"; filename="test.zip"
Content-Type: application/octet-stream


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

{"field":"1"}
------WebKitFormBoundaryvugKZN34EqQDBxpG--

Is there any method to set a different name on the metadata?

[rikschennink]

@Nierrrrrrr I do not have any experience with Spring, with PHP the values are split over $_POST and $_FILES. There's is currently no way to set a different name for the metadata.

Maybe this post on Stack Overflow is of use?
https://stackoverflow.com/questions/13779656/spring-mvc-map-multiple-dynamic-form-elements-with-the-same-name

[teawithfruit]

I know, this thread is very old.
But I had the same problem and didn't found any good answer. So I think, that this is a good solution, to rename the metadata field.

process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
  const formData = new FormData()
  formData.append(fieldName, file, file.name)
  if(metadata) formData.append('meta', JSON.stringify(metadata))

  const request = new XMLHttpRequest()
  request.open('POST', 'url-to-api')

  request.upload.onprogress = (e) => {
    progress(e.lengthComputable, e.loaded, e.total)
  }

  request.onload = async() => {
    if(request.status >= 200 && request.status < 300) {
      load(request.responseText)
    } else {
      error()
    }
  }

  request.send(formData)

  return {
    abort: () => {
      request.abort()
      abort()
    }
  }
}