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