Pass Uppy object metadata to transloadit `/meta/write` robot

Uppy
1

I’m using Uppy dashboard and transloadit to upload files to Amazon S3. I want to have users, before clicking upload in the dashboard, hit “edit” on their dragged files, set the metadata, and have that be present in both the files themselves (such as in IPTC metadata, is this possible?) and the assembly result JSON.

In terms of code, I can set metaFields, grabbing what the user sets:

.use(Uppy.Dashboard, {
      inline: true,
      target: '.DashboardContainer',
      replaceTargetContent: true,
      showProgressDetails: true,
      showLinkToFileUploadResult: false,
      height: 300,
      width: 900,
      note: 'Uploaded images will be renamed and resized',
      metaFields: [
        { id: 'name', name: 'Name', placeholder: 'Enter the file name.' },
        { id: 'caption', name: 'Caption', placeholder: 'Describe what the image is about.' }
      ],
      proudlyDisplayPoweredByUppy: true,
      disableThumbnailGenerator: false,
      browserBackButtonClose: true
})

… and I can set generic metadata on Uppy.Core:

  const uppy = Uppy.Core({
    debug: true,
    autoProceed: false,
    allowMultipleUploads: true,
    restrictions: {
      maxFileSize: null,
      maxNumberOfFiles: null,
      minNumberOfFiles: null,
      allowedFileTypes: null
    },
    meta: {
       username: 'Bill Stewart'
    }
  })

I understand that I need to add the /meta/write robot to my Transloadit template, and fill out the data_to_write object there. My question is, how do I change my Uppy.Transloadit plugin code, to access the above values? What I have now:

.use(Uppy.Transloadit, {
      params: {
        auth: {
          // To avoid tampering use signatures:
          // https://transloadit.com/docs/api/#authentication
          key: '123456789abcdefg12345d9a4689d142'
        },
        template_id: 'zyx32190eb1234569d1215876543aff5',
        fields: {
          year: (new Date()).getFullYear()
        }
      },
      waitForEncoding: true
})

In my template, I’m accessing the above “year” field as ${fields.year}, but I got stuck when trying to access the values from the uppy.dashboard and uppy.core.

I really appreciate any help, thank you.

2

As an aside, I set up /meta/write in my transloadit template with a simple copyright string from the docs, and I can see the string in both the assembly results json and when examining the file with exiftool.

Just wondering, what metadata can /meta/write write? Is it just EXIF? Or can it also do IPTC? I could not find mention of this in the docs…

3

In this situation, the easiest approach is likely to use the fields: ['fieldname'] syntax, documented here. It configures a whitelist of metadata values to send. If you put the year and username values in the global metadata in the Uppy constructor:

Uppy.Core({
  meta: { username: '', year: (new Date()).getFullYear() },
  // ...
})

And configure the Transloadit plugin to send both those fields, and the fields from the Dashboard:

uppy.use(Transloadit, {
  fields: ['username', 'year', 'name', 'caption'],
  // ...
})

Then all of those fields will be available as ${fields.year}, ${fields.caption} etc. Hope that makes sense!

I’m not sure about the /meta/write question, I’ll ask someone who’s more familiar with it to answer that one.

4

Much appreciated @goto-bus-stop! I’ll try it out in the next couple of days.

5

Any luck Rick? Happy to follow up with you!

6

@goto-bus-stop If I’m using your suggestion, then I get one separate assembly per each file; is there another way to send meta fields and have a single assembly for all uploaded files?