How to pass meta data using Uppy's Dashboard plugin

Question

I'm a beginner when it comes to using Uppy. I'm sure that this can be resolved by pros like you. But I am having trouble sending specific meta data information to my upload route.

uppy.js

// Import the plugins
const Uppy = require('@uppy/core');
const XHRUpload = require('@uppy/xhr-upload');
const Dashboard = require('@uppy/dashboard');

const request = require('request');

const uppy = Uppy({
    debug: true,
    autoProceed: false,
    restrictions: {
        maxFileSize: 1024000,
        maxNumberOfFiles: 3,
        minNumberOfFiles: 1,
        allowedFileTypes: ['image/*', 'video/*']
    }
})
    .use(Dashboard, {
        trigger: '.UppyModalOpenerBtn',
        inline: true,
        target: '#drag-drop-area',
        replaceTargetContent: true,
        showProgressDetails: true,
        proudlyDisplayPoweredByUppy: false,
        animateOpenClose: true,
        note: 'Images and video only, 1–3 files, up to 1 MB',
        height: 470,
        browserBackButtonClose: true,
        theme: 'dark',
        metaFields: [
            {id: 'caption', name: 'Caption', placeholder: 'describe what the image is about'}
        ]
    });

uppy.on('file-added', (file) =>{
    console.log(file);
    uppy.setFileMeta(file.meta.id, {
       caption: file.name
    });


});


uppy.use(XHRUpload, {
    id: 'XHRUpload',
    endpoint: 'http://localhost:8000/upload',
    method: 'POST',
    formData: true,
    fieldName: 'my_file',
    metaFields: ['caption'],
    bundle: true

});


uppy.on('upload-success', (file, response) => {
    //console.log(file.meta.caption);
    console.log("File uploaded successfully ", file);
});

module.exports = uppy;

upload.js

router.post('/',(req, res, next) => {

  console.log("Coming form uppy.js " , req.body);

});

module.exports = router;

I'm having trouble passing the 'caption' value to my route. When I look on the 'network tab' on Google Chrome's developer tools, it give me a message of 'undefined'. If you can point me at the right direction, I'd appreciate it! Thank you!

score 2 · Accepted Answer · answered Oct 07 '20 at 14:10

First of all need to change file.meta.id to file.id

uppy.on('file-added', (file) =>{
    console.log(file);
    uppy.setFileMeta(file.id, {
        test: 'hello'
    });
});

but if you use bundle you should know about that note

Note: When bundle is set to true, only global uppy metadata, the one set via meta options property, is sent to the endpoint. Individual per-file metadata is ignored.

so, if you want send meta data for each file you should change it to false, then you faced with separate request for each file, but all meta data would be present in request

How to pass meta data using Uppy's Dashboard plugin

1 Answers1