Using the tus upload does not seem to store my file name

Developers Stream
1

Dear community, I need your help.

Yesterday I implemented the tus video upload in a React based dashboard I’m crafting. I am using the tus js library from GitHub - tus/tus-js-client: A pure JavaScript client for the tus resumable upload protocol and the call seems to work. The only weird thing is that upon upload, I can see my video on Cloudflare, except the name is blank.

The call I’m making, where my intended filename is in the metadata object:

uploadHighlightTus(videoName, onProgress, onSuccess) {
    var highlightVideoInputFile = document.getElementById("highlightVideo").files[0];

    var upload = new tus.Upload(highlightVideoInputFile, {
      endpoint: `https://api.cloudflare.com/client/v4/accounts/${this.accountId}/stream`,
      retryDelays: [0, 3000, 5000, 10000, 20000],
      metadata: {
        filename: `highlight_${videoName.replace(/ /g, "_")}`,
        filetype: highlightVideoInputFile.type
      },
      headers: {
        'X-Auth-Email': this.accountEmail,
        'X-Auth-Key': this.apiKey
      },
      chunkSize: 100 * 1024 * 1024,
      onError: function (error) {
        console.log("Failed because: " + error);
      },
      onProgress: function (bytesUploaded, bytesTotal) {
        var percentage = Math.floor(bytesUploaded / bytesTotal * 100);
        onProgress(percentage);
      },
      onSuccess: function () {
        onSuccess();
      }
    });

    upload.start();
}

Afterwards, the video appears on Cloudflare, with the name being empty (masked the content):

afbeelding
afbeelding1065×695 42.4 KB

Do any of you have an idea of what might be going wrong? I have logged the filename to the console and it seems fine.

2

@nintendoengineer12 did you try setting the “name” metadata field? TUS metadata fields match directly to the meta fields in Stream videos so metadata.name would be made into meta.name, which is used in the dashboard to display the name of the video.

If that doesn’t work could you post your video ID or open a quick support ticket on this? I’m happy to take a look.

3

Hi,

Just a note to say that that worked for me. Would you post the other metadata fields that are available. It would be great to set the restrictions on upload too.

Thanks,
Declan.

1 Like
4

You can set requiresignedurls and allowedorigins keys in tus metadata, which will populate their respective fields in the video.

5

Super, thanks!

I notice that there is a warning now for the ‘resume’ options property no longer accepted in the nodeJS tus client implementation. Might want to update the example here: Upload a video file · Cloudflare Stream docs

1 Like