Custom meta data not returned in notify_url request despite calling setFileMeta

Transloadit
1

Hey guys;

Even though I call setFileMeta when a file gets added like so:

   uppy.on('file-added', file => {
      uppy.setFileMeta(file.id, {
        myVar: myValue
      })
    })

The post body of the notify request coming from transloadit (configured via the “notify_url” parameter) does not include my custom meta data

As a side note, when I was uploading files using a self hosted TUS server, the body of the “post-finish” hook request did include my custom meta data.

Am I missing something? Any pointers appreciated.

Cheers

2

Oh I see now…the getAssemblyOptions can be used to dynamically select an assembly and also inject meta fields.

So in summary, to get custom meta data fields into the “notify_url” response one does two things:

  1. Use setFileMeta when uppy adds the file (to add custom meta data attributes to the uppy file object)

  2. Use getAssemblyOptions to extract those same custom meta data attributes from the uppy file object and pass on to transloadit using the "fields attribute

This is great!

3

Hey @ryantomaselli

I’ve been trying to figure this out myself.

Are you able to post a sample of what this looks like please?

4

Hope this helps…

So when the file gets added and uppy fires the “file-added” event, listen for it and push any custom meta data you want into the uppy file object by calling setFileMeta like below

uppy.on('file-added', file => {
  uppy.setFileMeta(file.id, {
    myCustomVarName: myCustomVarValue,
    myCustomVar2Name: myCustomVar2Value,
  })
})

Then use the getAssemblyOptions callback to push your custom meta data into the “fields” key. By doing this, these same fields will be passed back in the request transloadit makes to your “notify_url” end point (see “notify_url” key specified below) when it has completed processing.

uppy.use(Transloadit, {
  getAssemblyOptions(file) {
    const {
      meta: { myCustomVarName, myCustomVar2Name }
    } = file

    return new Promise((resolve, reject) => {
      resolve({
        fields: {
          myCustomVarName,
          myCustomVar2Name
        },
        params: {
          auth: { key: process.env.REACT_APP_TRANSLOADIT_AUTH_KEY },
          notify_url: process.env.REACT_APP_TRANSLOADIT_NOTIFY_URL,
          steps: {
            thumbnail: {
              robot: '/image/resize',
              use: ':original',
              width: '50',
              height: '50'
            },
            fullsize: {
              robot: '/image/resize',
              use: ':original',
              width: '320',
              height: '1000'
            },
            export: {
              use: [':original', 'fullsize', 'thumbnail'],
              robot: '/s3/store',
              key: process.env.REACT_APP_AWS_ACCESS_KEY,
              secret: process.env.REACT_APP_AWS_SECRET_KEY,
              bucket: 'my-bucket-name,
              // See https://transloadit.com/docs/#22-assembly-variables for available assembly variables
              path: `\$\{previous_step.name\}.\$\{file.ext\}`
            }
          }
        }
      })
    })
  },
  service: 'https://api2.transloadit.com',
  waitForEncoding: false,
  waitForMetadata: false,
  importFromUploadURLs: false,
  alwaysRunAssembly: true,
  signature: null,
  limit: 10
})
5

Hi @ryantomaselli

I’ve been using metaFields:

    .use(Uppy.Dashboard, {
  trigger: '#uppy-open-modal',
  target: 'body',
  width: 550,
	height: 350,
  closeAfterFinish: true,
  closeModalOnClickOutside: true,
  metaFields: [
{ id: 'name', name: 'Name', placeholder: 'Filename' },
{ id: 'description', name: 'Description', placeholder: 'Description' }

],

Are you saying I need to remove that and reconfigure?
When I remove metaFields the edit button disappears in the dashboard.

Rupen.

6

The metaFields key you reference is the list of fields you want the user to be able to edit in the Dashboard.

https://uppy.io/docs/dashboard/#metaFields

So that does the equivalent of uppy.setFileMeta(…) in the example above. But the sending of your meta data to the Transloadit server is achieved through the getAssemblyOptions callback so that when the assemblies have been processed and Transloadit calls your notify end point it also passes along your metadata.

Here is a snippet showing how I deconstruct the meta data in the notify end point

server.express.post('/transloadit-notify', (req, res) => {
  console.log('========== transloadit notify ==========')
  const { fields, results } = JSON.parse(req.body.transloadit)
  console.log('fields: ', fields)
  console.log('results: ', results)
  res.send('POST transloadit-notify')
})

When you’re working locally you will probably need to expose your notify end point to transloadit via the ngrok tool. See https://ngrok.com/

The command I run to expose my local running express server to Transloadit is this:
~/ngrok http -host-header=rewrite https://localhost:4000

7

Apologies @ryantomaselli , I am more lost. :grimacing:

Here is the test site I am using
https://video-gallery-rv.webflow.io

How do I ensure that the name and description appear in the JSON data?

Rupen.

8

Hey Rupen;

Let me explain what I’m doing as perhaps what you’re trying to achieve is different.

I am using uppy in conjunction with the transloadit plugin to upload my files and also process them (resize images and then push them to an s3 bucket).

I am not using the uppy Dashboard. Looking at your site, it looks like “metaFields” configuration you mention is doing its job in that it’s allowing the user to edit the file’s meta data before upload.

So where are you trying to access this meta data and you can’t?

9

Hi @ryantomaselli

I’m using the dashboard to upload and then transloadit to process videos then put them into an S3 bucket.

Im expecting the metafield data to be available at the transloadit notfy url. When looking at the JSON that gets sent, it’s not there.

10

Are you using the getAssemblyOptions callback?