Missing `client_id` when trying to use Dropbox integration

Uppy
1

Hello,

React Component:

import React, { useEffect } from 'react';
import { Uppy, debugLogger } from '@uppy/core';
import { Dashboard } from '@uppy/react';
import XHRUpload from '@uppy/xhr-upload'
import Dropbox from '@uppy/dropbox';

// Don't forget the CSS: core and the UI components + plugins you are using.
import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';
import '@uppy/webcam/dist/style.min.css';

// Don’t forget to keep the Uppy instance outside of your component.
const uppy = new Uppy({ logger: debugLogger })
    .use(XHRUpload, {
        endpoint: 'http://localhost:5000/api/fileManager/upload',
        fieldName: 'file',
        formData: true
    })
    .use(Dropbox, {
        companionUrl: 'http://localhost:3020',
    });

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

export default FileManager;

I host my own companion using docker:

services:
  companion:
    image: "transloadit/companion:latest"
    ports:
      - "3020:3020"
    environment:
      COMPANION_DATADIR: "./output"
      COMPANION_DOMAIN: "localhost:3020"
      COMPANION_PORT: "3020"
      COMPANION_ALLOW_LOCAL_URLS: "true"
      COMPANION_DROPBOX_KEY: "xxx"
      COMPANION_DROPBOX_SECRET: "xxx"
    volumes:
      - ./output:/app/output

and I have a basic flask API working unter localhost:5000


from flask import Blueprint, request
import os
import multipart

fileManager = Blueprint('fileManager', __name__)

@fileManager.route('/fileManager/upload', methods=["GET"])
def get():
    return {"message":"this is atest"}, 200


@fileManager.route('/fileManager/upload', methods=["POST"])
def post():
    file = request.files['file']
    file.save(os.path.join('./output', file.filename))

    return {"message":"this is atest"}, 200

And this is my Dropbox settings: (Note that I set it to localhost.)

image
image1533×1570 135 KB

I get the following error:

Error (400)

It seems the app you were using submitted a bad request. If you would like to report this error to the app’s developer, include the information below.

More details for developers

Missing client_id.

I have no idea what else I should do. The XHR file upload works fine, wanted to try out something that uses the companion. I read all github issues as well but I just can’t seem to solve the issue.

Any help is appreciated.

2

So today, with a fresh and clear head I came back to try and figure it out. Turns out, I somehow didn’t recreate the docker container properly and my environment variables were never set.

You can use docker exec -it <container_id> sh or something similar to connect into your running docker compose container and use env command to print all env vars. I missed the dropbox key and secret. Recreated the container and everything and now there it was and it should work now. :slight_smile: