Custom Server Option not working

[zusamarehan]

Summary

I am trying to use the process handler to configure my own server options when sending the request when the images is uploaded. But the request doesn't goes, the filepond frontend says uploading but there is actually nothing happening in the backend.

How to reproduce

<template>
    <div>
        <file-pond
                name="test"
                ref="pond"
                label-idle="Drop files here..."
                allow-multiple="true"
                accepted-file-types="image/jpeg, image/png"
                :server="this.server"
                v-bind:files="myFiles"
                v-on:init="handleFilePondInit"/>
    </div>
</template>

<script>
    import vueFilePond , { setOptions }  from 'vue-filepond';
    import 'filepond/dist/filepond.min.css';
    // Import image preview plugin styles
    import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

    // Import image preview and file type validation plugins
    import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
    const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);
    //
    export default {
        name: "fileInput",
        components: {
            FilePond
        },
        data() {
            return {
                myFiles: [],
                server:{
                    // debugger;
                    process: (fieldName, file, metadata, load, error, progress, abort) => {
                        const formData = new FormData()
                        formData.append('papers', file, file.name)
                        // const CancelToken = axios.CancelToken
                        // const source = CancelToken.source()

                        axios({
                            method: 'POST',
                            url: '/uploads/temp/'+__UNIQ_ID__,
                            data: formData,
                            // 'csrf-token': '<CSRF-TOKEN>',
                            // cancelToken: source.token,
                            onUploadProgress: (e) => {
                                progress(e.lengthComputable, e.loaded, e.total)
                            }
                        }).then(response => {
                            // passing the file id to FilePond
                            load(response.file)
                        }).catch((thrown) => {
                            if (axios.isCancel(thrown)) {
                                console.log('Request canceled', thrown.message)
                            } else {
                                // handle error
                            }
                        })
                    },
                    revert:(uniqueFileId, load, error)=>{
                        axios({method: 'DELETE',url: '/uploads/temp/'+__UNIQ_ID__}).then(res => {
                            load()
                        })
                    }
                }
            };
        },
        methods: {
            handleFilePondInit: function() {
                console.log('FilePond has initialized');
            }
        }
    }
</script>

<style scoped>

</style>

Expected behaviour

Send the request to the backend which is Laravel, with the csrf-token.

Additional information

I actually need to just send _token: randomToken with the request, I don't want to change anything to the default process functionality. Is there anything simpler?

Environment	Version
OS	Linux/Ubuntu 18.04.2 LTS
Browser	Version 75.0.3770.100 (Official Build) (64-bit)

[rikschennink]

I think this :server="this.server" should be :server="server"

[zusamarehan]

I believe that is not the issue. I have tried with the said solution. It's the same thing. There is no request on the network tab of chrome console.

Note: If there is any other solutions for sending additional request, please recommend.

[rikschennink]

I suggest adding a log statement inside the process handlering and see if it runs, if so, the issue is with the axios call.

[zusamarehan]

Yea I have done that. It logs up until axios call statement. Once it reaches the axios call it disappears.

[rikschennink]

Can you try with this function: https://pqina.nl/filepond/docs/patterns/api/server/#process-1

[zusamarehan]

I have tried the function which you said, request is going now but to the wrong endpoint. I have given like this

request.open('POST', '/documents/upload');

Request Details

Request URL: http://sbh.zrehan.com/
Request Method: POST
Status Code: 405 Method Not Allowed
Remote Address: 127.0.0.1:80
Referrer Policy: no-referrer-when-downgrade

[rikschennink]

As this problem is related to the XHR request and its implementation and not FilePond I'll close the issue.

You can find more info on XHR here: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest