Direct creator upload - Error after 100% using TUS protocol

Hi! I am trying to upload a video using the TUS methodology (js-tus-client) everything seems to be working well. I will post my code below to see if you can help me, please!

// /** Get one time link to upload video to cloudFlare */
router.post('/oneTimeLink', async (req, res) => {

   var config = {
      method: 'POST',
      url: `https://api.cloudflare.com/client/v4/accounts/${process.env.CLOUDFLARE_CLIENT_ID}/stream?direct_user=true`,
      headers: {
         'Authorization': `Bearer ${process.env.CLOUDFLARE_KEY_ID}`,
         'Tus-Resumable': '1.0.0',
         'Upload-Length': '1',
         'Upload-Metadata': 'maxdurationseconds NjAw',
      },
   };

   axios(config)
      .then(async function (response) {
         const location = await response.headers.location

         console.log(location)
         res.set({
            'Access-Control-Allow-Headers': '*',
            'Access-Control-Expose-Headers': '*',
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': '*',
            'Location': location,
         })

         res.send(true)
      })
      .catch(function (error) {
         console.log(error);
      });

})

In the Upload-Metadata I set maxdurationseconds NjAw, this means a maxDurationSeconds of 10 min (I am sending a 25 secs video)

That’s my node.js backend API.

Now on the frontend side, I am using the js-tus-client as follows.

import:

import * as tus from "tus-js-client";

Function:

const file = state.coursesData['Module 1'][0].content.video
           
            var upload = new tus.Upload(file, {
                endpoint: 'http://localhost:8080/dev/coursesLibraryPractitioner/oneTimeLink',
                chunkSize: 250 * 1024 * 1024,
                metadata: {
                    filename: file.name,
                    filetype: file.type
                },
                onError: function (error) {
                    console.log("Failed because: " + error)
                },
                onProgress: function (bytesUploaded, bytesTotal) {
                    var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
                    console.log(bytesUploaded, bytesTotal, percentage + "%")
                },
                onSuccess: function () {
                    console.log("Download %s from %s", upload.file.name, upload.url)
                }
            })

            upload.start()

The endpoint is pointing to my backend server which returns in the location header the URL.

Now, this is what happens when I trigger this function.

The backend route executes without error and the Cloudflare dashboard creates a new empty video which is great according to the docs.

  • In the frontend logs:

Independent on the chunksize sometimes the percent reaches 100%, but NEVER saves the video. I don’t know where that patch petition is coming from.

Please I need to have this process for the company I work for, they will acquire a more robust subscription than mine that is set right now at a 1000minutes per month for testing.

Thanks in advance, I appreciate your help!!

Sometimes the system do not inform well about errors.
I think you are creating one ontimeUploadUrl by each chunk.
Call your server once to obtain it and then you can try this options.

                    uploadUrl: oneTimeUploadUrl, // the function calls your server to obtain the oneTimeUpoloadUrl
					chunkSize: 50 * 1024 * 1024,
					retryDelays: [0, 3000, 5000],
					parallelUploads: 1,
					metadata: {
						filename: video.name,
						filetype: video.type
					},

@rafaechart — here’s a link to an end-to-end example that might help guide you:

Hi thanks for the quick response, I don’t think this is the case because I have a console.log() on my backend route and it triggers only one time. I added the ‘parallerUploads’ and the ‘retryDelays’ property but the outcome is the same:

Hi @irvinebroque thanks for the example! I have seen this example before and it’s not working for me, any other ideas?

I am thinking maybe the API KEY I generated was the right one?

What error do you get when trying to use the example I linked to above? The same error that you saw with your code, or something different?

I downloaded the demo so I can connect it to my localhost and get the oneTimeURL, but the outcome is the same:

I have also tried this other demo in CodePen called ‘tus-js-client demo - File Upload’ (can’t paste the link)

But it didn’t work neither.

Any thoughts? should I upload my backend API to a real server and check again?

@irvinebroque let me know if there is more information I can provide you so you can get more context :pray:

@irvinebroque I just push my backend API to a tested production sever in AWS and its not working neither, please help

@zaid Hello I saw your username in previous posts, any ideas how can I approach this error?

Have you tried setting the chunk size to one of the recommended values? See Upload a video file · Cloudflare Stream docs

Your current chunk size seems to be 262,144,000. The max supported chunk size is 209,715,200.

@zaid Yes!

I was using 25010241024 = 262,144,00.

Then I change it to 5010241024 = 52,428,800 and the outcome is the same. The Patch petition error after the 100%. Any other ideas?

Are you able to share a link to your html page? Feel free to DM it.

Otherwise, I would try to mirror your client-side implementation as closely as what I have in this codepen demo: https://codepen.io/cfzf/pen/wvGMRXe

@zaid Hi! Its a React app, I tried the app in codePen

And it doesn’t work, I passed the upload URL directly and also in other attempt the backend API URL (Located in a real server) where I generate the oneTimeLink both failed.

I downloaded your demo and it throws the same error in local:

UPDATE: I thought maybe my company server is preventing some methods in the request or that the server had some size limit, so I created a new node-express server with nothing more than open cors and the route to generate OneTimeLink. This didnt work neither, the link that is being generated is not working.

Are there any docs to see if I got the right permissions for the API KEY? I Uploaded a image in a previous reply.

Also- how can I DM you a copy of my code? there is no option
my email is [email protected]
I really need assistance on this.

@irvinebroque @zaid Any ideas on how I can approach this error?

Just dropped you an email