Allow appending directly to FormData before processing

[pryley]

At the moment you can add custom data using the "FilePond:addfile" event (#1) or the "File metadata" plugin, however this appends using the name of the file input field. The plugin does not allow you to append data directly to FormData before it is submitted with POST.

This is a problem when integrating with WordPress as admin-ajax.php (which is used for ajax requests) expects $_REQUEST['action'] to exist.

https://github.com/WordPress/WordPress/blob/91da29d9afaa664eb84e1261ebb916b18a362aa9/wp-admin/admin-ajax.php#L28

I have a WordPress plugin that uses a custom router which routes all plugin requests by the key-values in the request. I am not able to do this with filepond as I am not able to append root key-values to the FormData before it is submitted.

Of course there are ways around this:

1. Write custom handlers for the server options
2. Use a custom ajax file that essentially replicates admin-ajax.php

However, it would be much more convenient if we were able to append to FormData directly before it is submitted.

[rikschennink]

Hi! Thanks for this suggestion, I agree, it would be useful to be able to do this.

For the moment the only option would be to set up a custom handler for the server options. The server docs contain some examples you could use as a starting point.

For the future, I'm looking into making the server property entirely optional and configurable. This would make it more easy to set different server types like shown below. This makes it possible to write more elaborate server methods instead of having to extend FilePond with all kinds of ways to modify its internal actions.

FilePond.create({
    server: createRestServer({
        // options here
    })
});

FilePond.create({
    server: createWordPressServer({
        // options here
    })
});

FilePond.create({
    server: createS3Server({
        // options here
    })
});

[kodeine]

is this the reason, my formData field is empty on form submit?

[Ganjdast]

Hello, can some one explain to me how to pass custom formData on a handler? I mean which event? since I adde the onAddFile and it's not working I wanted to see an example to see if I'm making a mistake with syntax
thank you in advance

[rikschennink]

@kodeine As answered in another thread, your formData field is empty because you've not set a server property and/or registered the file encode plugin.

@Ganjdast You either add values to the file metadata object using setMetadata. If that's not an option then, you'd have to write a custom processing method (https://pqina.nl/filepond/docs/patterns/api/server/).

[Ganjdast]

@kodeine As answered in another thread, your formData field is empty because you've not set a server property and/or registered the file encode plugin.

@Ganjdast You either add values to the file metadata object using setMetadata. If that's not an option then, you'd have to write a custom processing method (https://pqina.nl/filepond/docs/patterns/api/server/).

yes thank you that worked well.

[rikschennink]

@pryley Version 3.6.0 adds the server.process.ondata endpoint which allows adding form data before the formdata object is sent to the server. I figure it might take a while before I extract the server component so this should work fine for now. Please let me know if it does the trick.

FilePond.create({
    server: {
        process: {
             ondata: (fd) => {
                  fd.append('foo', 'bar');
                  return fd;
             }
        }
    }
});

[pryley]

@rikschennink fantastic!