DOMException Error When Attempting to Upload Files

Uppy
1

Question
I am encountering a DOMException: Failed to execute ‘open’ on ‘XMLHttpRequest’: Invalid URL error when attempting to upload files using Uppy and tus. This error occurs when I try to upload a file. I have confirmed that my server is running correctly and that the URL ‘http://localhost:3000/uploads’ is valid and well-formed. How can I resolve this issue?

Setup details

  • Runtime environment: Browser (for Uppy client), Node.js (for tus server)
  • Used tus-js-client version: tus-js-client@3.1.0
  • Used tus server software: tus-node-server

Here is the code for my server:

const express = require('express');
const tus = require('tus-node-server');
const EVENTS = require('tus-node-server').EVENTS;
const cors = require('cors');

const app = express();

const server = new tus.Server({
    path: '/uploads'
});

server.datastore = new tus.FileStore({
    directory: './files'
});

server.on(EVENTS.EVENT_UPLOAD_COMPLETE, (event) => {
    console.log(`Upload complete for file ${event.file.id}`);
});

app.use(cors());
app.use(express.static('public'));

app.all('/uploads/', (req, res) => {
    server.handle(req, res);
});

const port = 3000;

app.listen(port, () => {
    console.log(`[${new Date().toLocaleTimeString()}] tus server listening at http://localhost:${port}`);
});

And here is the code for my client:

import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import Tus from '@uppy/tus';

import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';

const uppy = new Uppy({
    debug: true
});

uppy.use(Dashboard, ({
    showLinkToFileUploadResult: true,
    showProgressDetails: true,
    showSelectedFiles: true
}));

uppy.use(Tus, {
    endpoint: 'http://localhost:3000/uploads',
});

// ... (rest of Uppy code)

Any help would be greatly appreciated. Thank you.

2

Also reported in DOMException Error When Attempting to Upload Files · Issue #591 · tus/tus-js-client · GitHub.