How to manually trigger file upload in Nuxt 3 on a separate button?

[oooredooo-bit]

Is there an existing issue for this?

• [X] I have searched the existing issues

Is your feature request related to a problem? Please describe.

Hi @rikschennink ,

With reference to this issue: #79

I am now working on my project created in Nuxt 3 and I have setup filepond like this:

In my template:

<file-pond
      ref="pond"
      :files="myFiles"
      :allow-multiple="true"
/>
<button @click="handleUploads" />

const myFiles = ref([]);

const FilePond = vueFilePond(
    FilePondPluginFileValidateType,
    FilePondPluginFileValidateSize,
    FilePondPluginImagePreview
);

FilePond.props.server = {
    process: function (fieldName, file, metadata, load, error, progress, abort) {
        // uploading files to S3 following this https://github.com/pqina/filepond/issues/55 
    },
};

And then I would like to have a separate button that will upload multiple files upon click.

How can I manually trigger the processFiles() and upload all at once?

Describe the solution you'd like

I would like to have a reference to the pond and trigger it manually something like:

const handleUploads = () => {
    // call processFiles()
}

Describe alternatives you've considered

None

[oooredooo-bit]

I found the solution now: https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs

Just create a ref variable equivalent to the name of the filepond ref. So I ended up something like this:

const pond = ref(null);
const handleUploads = () => {
    console.log('Process files upon click');
    pond.value.processFiles();

};

However, after I clicked the button, there's an error:

Uncaught TypeError: Cannot read properties of null (reading 'url')
    at filepond.esm.js:4819:56
    at Object.PROCESS_ITEM (filepond.esm.js:4054:5)
    at dispatch (filepond.esm.js:59:32)
    at filepond.esm.js:45:13
    at Array.forEach (<anonymous>)
    at Object.processDispatchQueue (filepond.esm.js:44:15)
    at Object._write (filepond.esm.js:8729:23)
    at filepond.esm.js:9584:43
    at Array.forEach (<anonymous>)
    at filepond.esm.js:9584:24

Could you please give me an example of how to use processFiles connected to S3?

By the way here is my custom process setup and it seems that it didn't reach at this point already to print my logs because of the error above:

FilePondComponent.props.server = {
    process: function (fieldName: any, file: any, metadata: any, load: any, error: any, progress: any, abort: any) {
        console.log('Create temp credentials and upload directly to S3');
        s3.upload({
                Bucket: 'your-bucket-name',
                Key: Date.now() + '_' + file.name,
                Body: file,
                ContentType: file.type,
                ACL: 'public-read'
            }, function(err, data) {
                if (err) {
                    error('Something went wrong');
                    return;
                }
                load(data.Key);
            });
    },
};

[rikschennink]

There are some S3 posts (and solutions) on https://github.com/pqina/filepond/issues