React Dashboard Modal & Dropbox Issue

Transloadit
1

I’m on the free plan with Transloadit as I want to use their companion server to allow me to upload from Dropbox and Google Drive to my S3 Bucket.

Everything works fine when I upload from a local file, however when I try to launch the Dropbox (or Google Drive) plugin from the Dashboard modal (after logging in) I get a 401 unauthorised error from https://api2.transloadit.com/companion/dropbox/list/ and the Dropbox file browser window doesnt appear. Am I missing something? …sadly the documentation for these projects is amongst the worst of any project I’ve ever seen.

My code is listed below:

    const params = JSON.stringify({
        auth: { key: authKey, expires: expires },
        steps: {
            ":original": { robot: "/upload/handle" },
            export: {
                use: [":original"],
                robot: "/s3/store",
                credentials: "MediaS3",
                path: "uppy/${file.url_name}"
            }
        }
    })
    const signature = crypto.createHmac('sha1', authSecret).update(Buffer.from(params, 'utf-8')).digest('hex')
    uppy = new Uppy({
        debug: true,
        autoProceed: false,
    });
    uppy.use(Transloadit, {
        service: 'https://api2.transloadit.com', params: params, signature: signature
    });
    uppy.use(Dropbox, { companionUrl: Transloadit.COMPANION })
    uppy.use(GoogleDrive, { companionUrl: Transloadit.COMPANION })

    ------

    <DashboardModal
        uppy={uppy}
        plugins={['Dropbox', 'GoogleDrive']}
        open={uppyOpen}
        target={document.body}
        onRequestClose={() => setUppyOpen(false)} />
2

Hi there, sorry to hear that you are facing issues. Looking at your code, I can see you need to set the companionAllowedHosts option when instantiating Dropbox, or GoogleDrive with Transloadit like so:

uppy.use(Dropbox, {
   companionUrl: Transloadit.COMPANION,
   companionAllowedHosts: Transloadit.COMPANION_PATTERN
})
uppy.use(GoogleDrive, {
   companionUrl: Transloadit.COMPANION,
   companionAllowedHosts: Transloadit.COMPANION_PATTERN
})

Please see the Transloadit plugin documentation for more details

3

I also see that you are doing signing in the browser, this requires the auth secret in the browser, which is unsafe. Best let signing happen on the server, or, if it’s acceptable for your use case, don’t use signing at all.

Have you considered the Robodog plugin? It offers a more convenient Transloadit experience for the majority usecase, versus the more lowerlevel Transloadit Plugin.

And do you have suggestions on how to make the docs better? Very sorry to hear your onboarding experience was so unsatisfactory and I’d like to fix what we can