Send additional data to Companion to create a directory in S3

Hi, I’m trying to upload files to S3 with a standalone server, everything is working file, just one customization needed. I want the files to be uploaded in a directory in a bucket. So if I send username/file-name.jpg as the file Key then the S3 will create a directory-like structure in the bucket, so every time a user uploads a file, it’ll be uploaded in his/her folder. I’m using this code to send the files to the server. .use(Uppy.AwsS3, { companionUrl: 'https://uploader.domain.com' })

I want to send additional data like: .use(Uppy.AwsS3, { companionUrl: 'https://uploader.domain.com', userName: 'abc123' })

then access this userName in the Uppy.js file and append it to the filename like: providerOptions: { s3: { endpoint: 'https://{service}.{region}.amazonaws.com', conditions: [], getKey: (req, filename) => userName +'/'+ filename } }

Thanks in advance.

[goto-bus-stop]

The “best” way currently is using headers.

On the client side, you can do:

uppy.use(AwsS3, {
  ...options,
  // should be called companionHeaders in a future release but this is what it's called right now
  serverHeaders: {
    'My-Meta-Header': 'username or something'
  }
})

On the server side, make sure you allow the header:

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allowed-Headers',
    'Authorization, Origin, Content-Type, Accept, My-Meta-Header')
  next()
})
app.use(uppy.app(uppyOptions))

You can access it in the getKey option:

providerOptions: {
  s3: {
    getKey: (req, filename) => {
      if (!req.headers['My-Meta-Header']) throw new Error('missing username')
      return req.headers['My-Meta-Header'] + '/' + filename
    },
  }
}

In the future we will hopefully support accessing Uppy metadata in getKey() directly to make this less annoying!

[chetanmenaria]

@chetanmenaria

I have managed to make it work the way I want. Maybe this could be helpful for you:

    const uppy = Uppy({
      id: this.uppyId,
      autoProceed: false,
      debug: true,
      thumbnailGeneration: true,
      restrictions: {
        maxFileSize: false,
        allowedFileTypes: ['image/*', 'application/pdf']
      },
      meta: {
        modelId: this.modelId,
        collection: this.collection
      },
      onBeforeFileAdded: () => {
        Promise.resolve()
      },
      onBeforeUpload: files => {
        for (var prop in files) {
          files[prop].name = 'myfolder/' +  files[prop].name
          files[prop].meta.name = 'myfolder/' +  files[prop].meta.name
        }
        this.files = files
        Promise.resolve()
      }
    })

pay attention to onBeforeUpload.

@acrolink Kudos. It worked like a charm. Thank you very much 😃