Uppy: Adding headers to the request for a multipart upload?

[ctrlplusb]

Hey! Great project.

Is the above possible? I need to add a JWT header and don't want to add it to query string as it won't be a one-time only token. Setting additional headers in general can be helpful though. :)

Thanks!

[ctrlplusb]

At the moment I am looking at doing the following:

http://stackoverflow.com/questions/24196140/adding-x-csrf-token-header-globally-to-all-instances-of-xmlhttprequest

[Erigers]

I have a common interest in adding headers. I am using multipart instead of tus server. In case you find a solution @ctrlplusb , I would be grateful if you shared 💯

Also adding additional data to the request is what I am looking for. Can't seem to find it in your documentation

[goto-bus-stop]

Hi! Thanks for creating an issue for this and sorry for the wait! :') #224 should make it into this month's release.

@Erigers

Also adding additional data to the request is what I am looking for. Can't seem to find it in your documentation

It's not documented, but the Multipart plugin adds file metadata to the request as extra form fields. You can set metadata on files using the updateMeta function:

uppy.on('core:file-added', (fileID) => {
  uppy.updateMeta({
    fieldName: 'value'
  }, fileID)
})

[benbonnet]

Hello guys, sorry to bury up that one; but I don't see here an acceptable solution to the initial question

I mean by that, what's the syntax to use ?

[goto-bus-stop]

@benbonnet A headers option was added in https://github.com/transloadit/uppy/pull/224:

uppy.use(XHRUpload, {
  headers: {
    'Authorization': `Bearer ${window.getCurrentUserToken()}`
  }
})

[jazkh]

@goto-bus-stop
Hello,
I have a similar question. If I am using Tus and DashboardModal and I want to pass JWT token to server for authorization before uploading the file. Where and how can I set the header?

[ldadams]

@jazkh - I can't imagine this is the best way but maybe the only way to pass headers to Tus just on upload. I am trying to run Uppy Client and Tus server behind an AWS ALB. Adding the headers directly to the Tus configuration fails due to missing Allow Origin on OPTIONS.

I read through the uppy Tus plugin source and found:
https://github.com/transloadit/uppy/blob/master/packages/%40uppy/tus/src/index.js#L135

Based on that I added my headers on each file using the onBeforeUpload. I am wondering if there is a better way to do this when attempting to pass headers just on upload / POST when using Tus behind a reverse proxy such as AWS ALB and are unable to manually set headers.

import * as React from 'react';
import * as Uppy from 'uppy/lib/core';
import * as Tus from 'uppy/lib/plugins/Tus';
import * as Dashboard from 'uppy/lib/react/Dashboard';

let uppy = Uppy();
export default class Upload extends React.Component {
  componentWillMount() {
    uppy = new Uppy({
      id: 'uppy',
      autoProceed: false,
      debug: true,
    }).use(Tus, {
      endpoint: 'https://...',
      onBeforeUpload: (files: any) => {
        return files.map((file: any) => {
          return (file.tus.headers = { 'X-Forward-Proto': 'https' });
        });
      }
    });
  }

  render() {
    return (
      <div>
        <Dashboard uppy={uppy} plugins={['Dropbox']} />
      </div>
    );
  }
}