php - FilePond send a blank request to server

one text

Solution:

According to the author, you are sending the metadata instead of the file itself. I solved this using the advanced custom process function that you can found in documentation. There you can find the comments about what almost every part of the code does.

data() {
    return {
        server: {
            url: 'http://base-url.test',
            process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {

                const formData = new FormData();

                formData.append(fieldName, file, file.name);

                const request = new XMLHttpRequest();

                request.open('POST', 'url-to-post-to');

                request.setRequestHeader('X-CSRF-TOKEN', 'your-csrf-token');

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

                request.onload = function () {
                    if (request.status >= 200 && request.status < 300) {
                        load(request.responseText);
                    } else {
                        error('Error');
                    }
                };

                request.send(formData);

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

                        abort();
                    },
                };
            },
        },
    }
},

Then you only need to bind it:

<template>
    <div class="container">
        <file-pond
            name="Profile"
            ref="pond"
            label-idle="drag & drop"
            v-bind:allow-multiple="false"
            accepted-file-types="image/jpeg, image/png"
            v-bind:files="userFile"
            v-bind:server="server"
            v-on:init="handleFilePondInit" />
    </div>
</template>

responseText is the unique Id from the server. Maybe you want to emit it to parent component:

data() {
    return {
        server: {
            url: 'http://base-url.test',
            process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {

                const thisReference = this;

                // Other code

                request.onload = function () {
                    if (request.status >= 200 && request.status < 300) {
                    thisReference.
                        thisReference.$emit('my-event', request.responseText);
                        load(request.responseText);
                    } else {
                        error('Error');
                    }
                };

                // Other code
            },
        },
    }
},

Pretty similar if you want to know what file has been reverted (in this case, you need to response from server with the same id you sent):

data() {
    return {
        server: {
            // Process, url, etc.
            revert: {
                url: '/url-to-delete',
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': 'your-csrf-token'
                },
                onload: (idDeleted) => this.$emit('my-event', idDeleted)
            },
        },
    }
},