Hi,
I’m using the transloadit/companion docker image to connect to Dropbox, Google Drive, etc. The uppy part of the swarm (docker-compose.yml) is set up like:
services:
uppy:
image: transloadit/companion
restart: always
environment:
COMPANION_DROPBOX_KEY: mykey
COMPANION_DROPBOX_SECRET: mysecret
# to enable Google Drive
COMPANION_GOOGLE_KEY: mykey
COMPANION_GOOGLE_SECRET:
COMPANION_SECRET: mysecret
# corresponds to the server.host option
COMPANION_DOMAIN: localhost
COMPANION_PORT: 3020
# corresponds to the filePath option
COMPANION_DATADIR: /app
ports:
- "3020:3020"
We’re using Vue.js and quasar on the front. The relevant file upload code is:
const uppy = Uppy({
autoProceed: true,
onBeforeUpload: () => {
this.uploading = true;
},
})
.use(Dashboard, {
inline: true,
target: '.DashboardContainer',
showSelectedFiles: false,
hideUploadButton: true,
disableStatusBar: true,
hideProgressAfterFinish: true,
proudlyDisplayPoweredByUppy: false,
})
.use(GoogleDrive, {
target: Dashboard,
companionUrl: 'http://localhost:3020',
})
.use(Dropbox, { target: Dashboard, companionUrl: 'http://localhost:3020' })
.use(Url, { target: Dashboard, companionUrl: 'http://localhost:3020' })
However the behavior is a bit strange. I can see when the uppy plugin comes up, it throws a 401 for dropbox/list at port 3020, so the plugin is pointing to the correct port. However, when I click on “Connect to Dropbox” it goes to http://localhost/connect/dropbox?someparametershere instead of http://localhost:3020/connect/dropbox?someparametershere in a new window.
The companion server seems correctly set up… maybe. If I manually change the port on connect to 3020 and keep the rest of the URL, it proceeds along. However each step of the way it tries to redirect to port 80 instead of 3020 and I have to manually change the port to proceed. However, once I finish the uppy plugin in the Vue app does connect to my dropbox account and properly lists the file.
I’m unsure where to even look in the configurations or source for this type of behavior. This is a local development setup so we are not sitting behind nginx/apache yet so that takes a layer of complexity out of the troubleshooting. Any suggestions on where to look? Or ideas if it’s my companion setup or my Vue app setup?
Any help would be appreciated.