Can't get import url working

Hello!

I’m trying to use Uppy to upload remote urls. It properly import url details (file name, size, etc.), but when I am clicking on the upload button I see the message “Upload failed” and the error message “Could not post companion/url/get. Error: Failed request with status: 404. Not found message: Not found”.

I configured the latest version of the companion using the official example from https://github.com/transloadit/uppy/blob/master/examples/uppy-with-companion/server/index.js
My server code looks exactly the same as index.js

I see that the example code has only the route definition:

// Routes
app.get(’/’, (req, res) => {
res.setHeader(‘Content-Type’, ‘text/plain’)
res.send(‘Welcome to Companion’)
})

Should I add the code to process POST requests to the route ‘companion/url/get’? I’ve checked all documentation related to the companion and can’t find anything related to this issue.

My client code (index.html):

uppy = Uppy.Core({
        debug: false,
        autoProceed: false,
        restrictions: {
          maxNumberOfFiles: 5,
          minNumberOfFiles: 1
        }
}).use(Uppy.Dashboard, {
      inline: true,
      showProgressDetails: true,
      showLinkToFileUploadResult: false,
      proudlyDisplayPoweredByUppy: false,
      target: '#drag-drop-area'
    })
  .use(Uppy.Url, { target: Uppy.Dashboard, companionUrl: 'http://localhost:3000/' })
  .use(Uppy.Tus, {endpoint: 'http://localhost:3000/files/'});

Please help me in this issue.

This is a strange issue. I’ve tested companion in the past and not had any problems, but come to think of it, I haven’t tested it with importing from URLs. I’m now going to test this out and see if it works for me. Just thought I’d update you beforehand.

I should be able to help with this, after I see how it works for me

- Andrew

Okay so after some quick testing, the URL upload was working perfectly fine.

I think that it may be an incorrect port or a port conflict. From the code you are posting, it appears that you are trying to run Companion and Tus on the same port, or you have the incorrect port set for Companion.

Based on the example server code you are using, Companion should be on port 3020, rather than 3000. I normally wouldn’t question this except for the fact that you have Tus and Companion on the same port

If this is the error, you can probably fix the issue by replacing

  .use(Uppy.Url, { target: Uppy.Dashboard, companionUrl: 'http://localhost:3000/' })

With

  .use(Uppy.Url, { target: Uppy.Dashboard, companionUrl: 'http://localhost:3020/' })

Let me know if this worked. Best wishes

- Andrew

Dear Andrew,
Thank’s a lot for your help.
I’ve tried to change the port, but the error is the same.
It seems I have diffuculties with Tus and Uppy Companion.
Could you please explain how to use Tus and Companion together on the server side? I’m not familiar with Node JS.
Because now I’m trying to combine it with my Django app written in Python.
What I have:

  1. for Tus I use Python library pypi.org/project/tus/ And it works OK for file uploads (Tus + Uppy). The Tus endpoint is http:// my_server_ip /files (port 80)
  2. I’ve installed and configured Node.JS and created the companion file companion.js. Please see the full code of companion file below. It’s listening the port 3020.
  3. In my Apache2 configuration I have
    ProxyPass /companion http://localhost:3020
    so I simply redirect all companion requests from http:// my_server_ip /companion to the companion server running under NodeJS (http:// localhost:3020).

and I see it works for url fetching. Companion can get details about urls that should be downloaded. And the endpoint http:// my_server_ip /companion works. But when I try to download files uppy checks the url http:// my_server_ip /companion/companion/url/get and failed (it doesn’t exists).

What I don’t understand:

  1. What is ‘/companion/url/get’ route? I don’t see the implementation of this in companion example. It
    only has:

app.get(’/’, (req, res) => {
res.setHeader(‘Content-Type’, ‘text/plain’)
res.send(‘Welcome to Companion’)
})

and of course when my app checks ‘/companion/url/get’ it doesn’t exist. It returns

// handle 404
app.use((req, res, next) => {
return res.status(404).json({ message: ‘Not Found’ })
})

  1. How to run Tus and Companion both on NodeJS backend? Where I can find full example or tutorial? Maybe if I delete Tus implementation on Python and run all things (Tus, Companion) on NodeJS it will work.

Here is the full code of companion.js

const express = require(‘express’)
const companion = require(’…/…/node_modules/@uppy/companion’)
const bodyParser = require(‘body-parser’)
const session = require(‘express-session’)

const app = express()

app.use(bodyParser.json())
app.use(session({
secret: ‘some-secret’,
resave: true,
saveUninitialized: true
}))

app.use((req, res, next) => {
res.setHeader(‘Access-Control-Allow-Origin’, req.headers.origin || ‘*’)
res.setHeader(
‘Access-Control-Allow-Methods’,
‘GET, POST, OPTIONS, PUT, PATCH, DELETE’
)
res.setHeader(
‘Access-Control-Allow-Headers’,
‘Authorization, Origin, Content-Type, Accept’
)
next()
})

// Routes
app.get(’/’, (req, res) => {
res.setHeader(‘Content-Type’, ‘text/plain’)
res.send(‘Welcome to Companion’)
})

// initialize uppy
const uppyOptions = {
providerOptions: {
drive: {
key: ‘your google key’,
secret: ‘your google secret’
},
instagram: {
key: ‘your instagram key’,
secret: ‘your instagram secret’
}
},
server: {
host: ‘localhost:3020’,
protocol: ‘http’
},
filePath: ‘/var/www/uploads/’,
secret: ‘some-secret’,
debug: true
}

app.use(companion.app(uppyOptions))

// handle 404
app.use((req, res, next) => {
return res.status(404).json({ message: ‘Not Found’ })
})

// handle server errors
app.use((err, req, res, next) => {
console.error(’\x1b[31m’, err.stack, ‘\x1b[0m’)
res.status(err.status || 500).json({ message: err.message, error: err })
})

companion.socket(app.listen(3020), uppyOptions)

console.log(‘Welcome to Companion!’)
console.log(Listening on 3020)

Hello. Thanks for your fast response. I haven’t tried to run this exact setup, with Apache, Tus, and Companion, but I still have some insights

  1. First of all, the /url/get is a route defined when you pass your express server instance to companion (it’s defined here in the source code).
    When you run companion.socket(app.listen(3020), uppyOptions), that modifies app, adding a bunch of routes that aren’t in the docs, because they are part of the way companion works, and usually not an issue

  2. Ideally, you’d run Tus and Companion on two seperate public ports, and this may be the cause of the issue. It’s also worth noting that the tus-node-server is deprecated, and tusd is the recommended way to use Tus

The fetching of http://server_ip/companion/companion/url/get doesn’t make any sense, as it should in this case be getting http://server_ip/companion/url/get. The normal route would be /url/get, but since there is some rerouting going on, that is not the case

I think the issue has something to do with rerouting your Companion to http://server_ip/companion and also something with your Uppy config

Can you send a code snippet of where you initialize the Url plugin?

By the way, you can send a code block by placing ``` one line above and below your code

- Andrew

Hi,again.

I’ve added the screenshot with details. I try to call the companion via curl and it worked for GET http://localhost:3020, but can’t POST/GET to http://localhost:3020/companion/url/get .

I use CDN bundle. So on the frontend I have:

< link href=“https://transloadit.edgly.net/releases/uppy/v1.19.0/uppy.min.css” rel=“stylesheet”>
< script src=“https://transloadit.edgly.net/releases/uppy/v1.19.0/uppy.min.js”>

uppy = Uppy.Core({
        debug: false,
        autoProceed: false,
        restrictions: {
          maxFileSize: parseInt($("#max-filesize").attr('name')),
          maxNumberOfFiles: 5,
          minNumberOfFiles: 1
        }
}).use(Uppy.Dashboard, {
      inline: true,
      showProgressDetails: true,
      height: 300,
      showLinkToFileUploadResult: false,
      proudlyDisplayPoweredByUppy: false,
      target: '#drag-drop-area'
    })
  .use(Uppy.Url, { target: Uppy.Dashboard, companionUrl: '/companion' })
  .use(Uppy.Tus, {endpoint: '/files/'});

It seems the issue was:

.use(Uppy.Url, { target: Uppy.Dashboard, companionUrl: ‘/companion’ })

I should use the full path

.use(Uppy.Url, { target: Uppy.Dashboard, companionUrl: ‘http://my_server_ip/companion’ }).

But now I have the error:

uppy.min.js:1 WebSocket connection to ‘ws://my_server_ip/companion/api/711afa45-051b-4099-b249-b3fc8093256d’ failed: Error during WebSocket handshake: Unexpected response code: 404

It looks like I solved one issue but ran into another. Here are messages from log on the companion side:

companion: 2020-07-26T22:22:19.909Z [debug] URL file import handler running
companion: 2020-07-26T22:22:19.944Z [debug] Instantiating uploader.
companion: 2020-07-26T22:22:19.946Z [debug] Waiting for socket connection before beginning remote download.
companion: 2020-07-26T22:22:19.946Z [debug] fda6eba0 uploader.socket.wait waiting for connection

Hello again. It appears that for some reason, Companion’s websocket is not running. The websocket is utilized for giving progress updates.

From what I can tell, within the inner workings of Companion, upon an upload, it generates a token and returns that to the client from the /url/get route. From there, the client attempts a connection at /api/<token>. This 404 error is caused by that route not existing for some reason.

What happens if you attempt this with a different provider? Does the issue persist even with a different provider?

From what I can tell, the first part of the token in the route (711afa45) should be the same as the debug output (fda6eba0). For some reason, there’s a token mismatch. What happens if you attempt the upload again?

- Andrew