Metadata plugin doesn't work

[gdinko]

Summary

Hi, i am building laravel app for image upload to products and i need to pass product_id to backend to know for witch product are the images that are uploaded.

How to reproduce

Fresh laravel app. Install filepond and plugins with npm. Create new vue component. Init FilePond and plugins.

`import vueFilePond from 'vue-filepond'; import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm.js'; import FilePondPluginImagePreview from 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.esm.js'; import 'filepond/dist/filepond.min.css'; import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'; import FilePondPluginFileMetadata from 'filepond-plugin-file-metadata/dist/filepond-plugin-file-metadata.esm.js';

const FilePond = vueFilePond( FilePondPluginFileValidateType, FilePondPluginImagePreview, FilePondPluginFileMetadata );`

in blade template insert the vue component

`<file-pond

            name="model_images"
            ref="pond"
            allow-multiple="true"
            accepted-file-types="image/jpeg, image/png"
            max-files="3" 
            :server="{
                process: {
                    url: this.uploadUrl,
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': this.csrf
                    }
                }
            }"
            :disabled="this.disableFileUpload"
            allowFileMetadata="true"
            data-file-metadata-hello="world"
        >

        </file-pond>`

Expected behaviour

Expecting metadata: hello => world missing but always getting color => null

Additional information

When sending metadata like this:

v-on:addfile="handleFilePondAddFile"

handleFilePondAddFile: function(error, file) { file.setMetadata('model_id', this.selectedModel.model_id); },

the metadata is set , but the variable is with the same name like the file , and this is problem for laravel:

print_r($request->file('model_images')); print_r($request->model_images);

Environment	Version
OS	MacOS
Browser	Chrome

[rikschennink]

Hi, by default metadata is supplied with the same name as the file field, if you want to change that you have to supply a custom server.process method.

It’s possible that the metadata plugin doesn’t pick up data properties on the Vue component, I don’t think those are passed to the internal DOM node, so that would indeed need to be fixed.

[rikschennink]

Just tested, it doesn't pick up the data attributes, best to use the oninitfile callback: https://codesandbox.io/s/vue-filepond-metadata-bpmlg?file=/src/components/FilePondDemo.vue

[productdevbook]

some problem vue3 and graphql send file empty data