FilePond send a blank request to server

Question

i use Laravel-filepond and Vue FilePond.
but FilePond send a blank request to server.
this is my codes: *UserComponent.vue

<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="{
url: '/panel/filepond',
timeout: 7000,
process: {
url: '/process',
method: 'POST',
headers: {
'X-CSRF-TOKEN': this.get_meta('csrf-token'),
},

}
}"
            v-on:init="handleFilePondInit"/>
    </div>
</template>

<script>
    import vueFilePond, {setOptions} from 'vue-filepond';
    import 'filepond/dist/filepond.min.css';
    import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
    import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

    import FilePondPluginImageEdit from 'filepond-plugin-image-edit';
    const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);
    export default {
        data() {
            return {
                userFile: [],
            }
        },
        methods: {
            handleFilePondInit: function () {
                console.log('FilePond has initialized');
            }
        },
        components: {
            FilePond
        },
    }
</script>

FilePondController.php Original file

<?php

namespace Sopamo\LaravelFilepond\Http\Controllers;

use function dd;
use Illuminate\Http\Request;
use Illuminate\Routing\Controller as BaseController;
use Sopamo\LaravelFilepond\Filepond;

class FilepondController extends BaseController
{
    private $filepond;

    public function __construct(Filepond $filepond)
    {
        $this->filepond = $filepond;
    }
    public function upload(Request $request)
    {
        dd($request->all());
    }
}

when I upload a file on client side (in default response with 422), I can not find it on my server.
FrameWorks & Repository is on last version.

Response []

You can check if the client is correctly sending the file in the network tab. — Rik, Feb 09 '21 at 11:41
I have the same problem and didn't know how to fix it. console.log the myFiles but it just empty array and filepond didn't add anything to it. — Fahmi, Aug 22 '21 at 17:11

score 0 · Answer 1 · answered Sep 19 '21 at 03:07

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)
            },
        },
    }
},

FilePond send a blank request to server

1 Answers1