Uppy connecting to port 80 instead of 3020

Uppy
#1

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.

#2

Hmm I think COMPANION_DOMAIN actually also has to include the port number if it is non-default. We’re about to release Companion v2 very soon, maybe we can use that opportunity to rename that env var / option to something like “origin”.

#3

Changing COMPANION_DOMAIN to localhost:3020 did indeed work. Thanks for the help!

1 Like