Filepond not using filename in Content-disposition

[ThomasWestrelin]

Describe the bug When the event "load" is called to restore uploaded server files, the filename is not used.

It used the source of the filepond object.

You can see that I use Content-disposition specified in documentation.

Server-side (PHP - Laravel)

// http://localhost:8080/api/filepond/load/{uniqid}
public function load(String $uniqid) {
        $file = File::where('uniqid', $uniqid)->first();
        return Storage::cloud()->response($file->path, $file->name);
}

Files Array of objects return by the server at init of the component.

[{
    "source": "cXMx7cCoR",
    "options":
        {
             "type": "local"
        }
}]

FileComponent.vue

<template>
    <file-pond :files="files" :label-idle="label" :server="server" :allow-multiple="allowMultiple" :credits="null" allowRevert="false"></file-pond>
</template>

<script>
export default {
    props: {
        label: {
            type: String,
            default: 'Déposer vos fichiers ...'
        },
        allowMultiple: {
            type: Boolean,
            default: false
        },
        model: {
            type: String,
            default: ''
        },
        element: {
            type: String,
            default: '',
        },
        modelId: {
            type: Number,
            default: '',
        },
        files: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            server: {
                url: '/api/filepond/',
                process: {
                    url: 'process',
                    method: 'POST',
                    ondata: (formData) => {
                        formData.append('model', this.model);
                        formData.append('element', this.element);
                        formData.append('modelId', this.modelId);
                        return formData;
                    }
                },
                revert: null,
                restore: null,
                fetch: null,
                load: 'load/',
                remove: (source, load, error) => {
                    axios({
                        method: 'DELETE',
                        url: `/api/filepond/remove/${source}`,
                        data: {
                            model: this.model,
                            element: this.element,
                            modelId: this.modelId,
                        }
                    }).then(response => {
                        load();
                    }).catch(error => {
                        error();
                    });
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            }
        };
    },
}
</script>

Expected behavior I expect to see "base.png".

Information about the project:

• Browser : Chrome 89.0.4389.128
• vue-filepond : 7.0.0
• filepond : 4.27.0
• Server-side : PHP 7.4.14 - Laravel 8.24.0

[rikschennink]

Can you add quotes around the filename.

[ThomasWestrelin]

I've added quotes and It works well. Thank you.

It seems to be a problem on Laravel with the function response().

public function load(String $uniqid) {
        $file = File::where('uniqid', $uniqid)->first();
        return response(Storage::cloud()->get($file->path), 200)
            ->header('Content-Type', 'image/png')
            ->header('Content-Disposition', 'inline; filename="' . $file->name . '"')
            ->header('Content-Length', $file->length);
}

[yuuzora]

Sorry to re-open this but I'm having a very similar problem.

Loading the file with the load function, calling an url that respond with the file and the content disposition inline and the filename. I can download the file and the name will be correct, but the filepond element does not show the filename. Instead of getting "dummy.pdf" it shows "undefined"

I've tried the solution provided instead of the default content disposition from Symfony, in order to add the quotes: But it's exactly the same

vue-filepond : 6.0.3 filepond : 4.30.3

Is it broken in version 6 or am I having another bug here ?

[rikschennink]

@Zack-Strife what does your FilePond server property look like?

[yuuzora]

data: function () {
    return {
      fileLoaded: false,
      myFiles: [],
      server: {
        url: '/api/upload-sf/filepond',
        process: '/post',
        load: '/get/',
        revert: './revert',
        restore: './restore/',
      }
    }
  },

Also I noticed that the file name is actually correctly get by the component somewhere since the

tag here is filled with it: But that still shows Undefined on the component

[rikschennink]

Might be relevant: https://github.com/pqina/filepond/issues/315 https://github.com/pqina/react-filepond/issues/122 https://github.com/pqina/filepond/issues/596

[yuuzora]

Thanks, managed to find out that it comes from the filepond-plugin-get-file thanks to those 👍

For anyone else with the same problem, there's already an issue over there with an open PR: https://github.com/nielsboogaard/filepond-plugin-get-file/issues/6