Struggle with formData append

[kasperkamperman]

Is there an existing issue for this?

• [X] I have searched the existing issues

Have you updated FilePond and its plugins?

• [X] I have updated FilePond and its plugins

Describe the bug

FilePond.setOptions({
server: {
                process: '/api/upload_photos.php',
                method: 'POST',
                ondata: (formData) => {
                    formData.append("dir", "5550b41d6c01323de9439b50feca8e07");
                    return formData;
                }
            }
});

In this way the data doesn't arrive at my endpoint.

I check this in PHP as:

if (isset($_POST['dir']) && !empty($_POST['dir'])) {
        $dir  = $_POST['dir'];
} else {
    $dir = 'bla';
}

I expect the $dir to have the variable passed, however it was always 'bla'.

I also struggled to get error messages back from the server, onload didn't trigger even onerror filepond events not.

I could make it work with this example: https://pqina.nl/filepond/docs/api/server/#process-1

FilePond.setOptions({
server: {
                process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {

                    const formData = new FormData();
                    formData.append(fieldName, file, file.name);
                    formData.append("dir", "5550b41d6c01323de9439b50feca8e07");

                    const request = new XMLHttpRequest();
                    request.open('POST', '/api/upload_photos.php');

                    // Should call the progress method to update the progress to 100% before calling load
                    // Setting computable to false switches the loading indicator to infinite mode
                    request.upload.onprogress = (e) => {
                        progress(e.lengthComputable, e.loaded, e.total);
                    };

                    // Should call the load method when done and pass the returned server file id
                    // this server file id is then used later on when reverting or restoring a file
                    // so your server knows which file to return without exposing that info to the client
                    request.onload = function () {
                        if (request.status >= 200 && request.status < 300) {
                            // the load method accepts either a string (id) or an object
                            console.log(request.responseText);
                            load(request.responseText);
                        } else {
                            // Can call the error method if something is wrong, should exit after
                            error('oh no');
                        }
                    };

                    request.send(formData);

                    // Should expose an abort method so the request can be cancelled
                    return {
                        abort: () => {
                            // This function is entered if the user has tapped the cancel button
                            request.abort();

                            // Let FilePond know the request has been cancelled
                            abort();
                        },
                    };
                },
            }
});

Hope this helps someone. Still figuring out why the other methods don't work.

Reproduction

FilePond 4.31.1

Environment

- Device: Mac M2
- OS: MacOS
- Browser:Chrome 125.0.6422.142

[rikschennink]

Hi, I'm not sure, the ondata callback should add to the existing formdata object, you could inspect the request in the developer console to see the package it sends and the fields that it contains.

[kasperkamperman]

I spend a morning trying, logging, but I couldn't grab what was going on. Could be also a knowledge gap from my side or something I overlook.

I'll close this, because I think I have to document this issue more in detail. I hope this issue somehow helps as archive if other people might come across this.

Thanks for making this tool available as open source. Much respect for your work and sharing your work and approach with the community.

Kasper