CloudFlare Direct creator video upload, TUS protocol, error after 100%

Question

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!!

Answer 1

The last chunk at the end of your upload should be a 256KiB multiple.

Try changing 250 * 1024 * 1024 to 256 * 1024 * 1024.