oauthdropboxuppytransloadit

Missing `client_id` when trying to use Dropbox integration with Uppy


I'm trying to use the Dropbox integration of enter link description here. The normal upload of files using their XHR uploader works fine. I then added their Dropbox integration and set up a Dropbox account as described in their docs ( https://uppy.io/docs/dropbox/ ) but it seems I'm missing something

Here's my 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.)

enter image description here

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.


Solution

  • 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. :)