Direct creator uploads with Tus not working in the browser

I use direct creator uploads api to request a one-time tokenized URL in my backend and it works find, and also I can get the URL from “Location” in the response headers. The URL is something like “https://upload.videodelivery.net/tus/xxx?tusv2=true”. However, when I use this URL in frontend with tus-js-client, it cannot work properly.

Here is some situations and their results below,

  1. In frontend (browser), after send video with tus-js-client to cloudflare, it shows these errors in Inspect > Console

  2. In frontend (browser), in order to solve the CORS error, I turn on the chrome extension Allow CORS: Access-Control-Allow-Origin then send video with tus-js-client again. It shows these errors in Inspect > Console

    • Refused to get unsafe header “Location”
    • Error: tus: invalid or missing Location header, originated from request
      And when I check in Inspect > Network, the response’s status code is 201 with the response Direct Creator Upload accepted
  3. In codepen example which provide in the end of this section Cloudflare document. I type in the URL, filesize and select a file from my computer, it shows

  4. I create an empty node.js project use tus-js-client in the same way. The strange things happened, IT WORKS !!! here are the codes

var fs = require("fs");
var tus = require("tus-js-client");

var path = __dirname + "/test.mov";
var file = fs.createReadStream(path);
var size = fs.statSync(path).size;

var options = {
  endpoint: "https://upload.videodelivery.net/tus/xxx?tusv2=true",
  chunkSize: 5 * 1024 * 1024, // Required
  uploadSize: size,
  onError: (error) => {
    console.log(error)
    throw error;
  },
  onProgress: (bytesUploaded, bytesTotal) => {
    var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2);
    console.log(bytesUploaded, bytesTotal, percentage + "%");
  },
  onSuccess: () => {
    console.log("Upload finished");
  },
};

var upload = new tus.Upload(file, options);
upload.start();

To conclusion, I want to let user to upload videos through the one-time tokenized URL in browser with Tus, but I can’t figure out what’s going on… any suggestion?

Hi, in the example screenshot, I noticed the URL you entered points to videodelivery.net. That URL should actually point to your script that returns the tokenized URL in the Location header.

1 Like

Thanks, this solve my problem.

1 Like