tus/tus-js-client

Either a Bug or i'm doing something wrong

john1234brown opened this issue · 3 comments

Describe the bug
I'm having on file uploads specifically greater then 1.4gb something goes wrong with anything such as 700mb i have no issues
image

    async function startUpload() {
      const fileInput = document.getElementById('fileInput');
      const file = fileInput.files[0];
      let newId;

      if (!file) {
        alert('Please select a file');
        return;
      }
      const customId = new URLSearchParams(window.location.search).get('customId');
      fetch('/uploadStart/'+'?fileSize='+file.size+'&customId='+customId, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
        }
      }).then(async (results)=>{
        try{
        const json = await results.json();
        console.log(json);
        const customId = json.newId
        newId = customId;
        const endpoint = json.server; // Replace with your server address

        // Include hash in metadata
        const metadata = {
          filename: file.name
        };
        //We can now append our custom headers using the custom Upload Class constructor!
        const customHeaders = {
          'Authorization': json.token
        };

        const upload = new tus.Upload(file, {
          endpoint: endpoint,
          retryDelays: [0, 1000, 3000, 5000],
          chunkSize: Infinity,
          headers: customHeaders,
          metadata: metadata,
          timeout: (30*60*1000),
          onUploadUrlAvailable: function (){
            console.log(upload.url);
            upload.url = upload.url.replace("http://", "https://");
          },
          onError: function (error) {
            console.log('Failed because:', error);
            console.log('Prevous', error.originalRequest.offset, error.originalRequest.uploadLength);
          },
          onShouldRetry: function (err, retryAttempts, options){
            console.log("Error", err);
            console.log("Request", err.originalRequest);
            console.log("Response", err.originalResponse);
              upload.findPreviousUploads().then((previousUploads) => {
                console.log(previousUploads);
                previousUploads.forEach((previous) =>{
                  if (upload.url === previous.uploadUrl){
                    console.log('Its the same upload');
                    upload.resumeFromPreviousUpload(previous);
                    upload.start();
                    return false;
                  }
                });
              });
          },
          onProgress: function (bytesUploaded, bytesTotal) {
            const 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.url = upload.url.replace("http://", "https://");
          },
        });
        upload.start();
        globalUpload = upload;

        // Update the URL without reloading the page
        history.pushState(null, null, '/static/?customId=' + newId);
        }catch(e){
          console.log(e);

          console.log(results);
        }        
      });
    }

my browser script code

To Reproduce
You can find my repo here
https://github.com/john1234brown/TusIssue
contains all my gateway setup code which is the public website endpoint responsible for a token auth system
make sure to already have storage provider node running first and set the second tuslocation in the gateway to the cloudflare url of this storage provider server
before spinning up the gateway
you can spin this up access the endpoint localhost:3000/
it will redirect to static displayed site with a id auth system
choose file upload
and see if you have the same issues!
`
Expected behavior
I expected the file upload to go through just fine like before with the 400mb and 700mb video files i tried with 5 different mp4 files such as up to 1.2 gb and 1.4gb and 1.3gb and a 1.2gb file and 1.6gb file each of the.

Setup details
Please provide following details, if applicable to your situation:

  • Runtime environment: [e.g. Browser, Node.js]
  • Used tus-js-client version: [can be obtained by going to the cdn release latest]
  • Used tus server software: [e.g. tusd, tus-node-server etc]

This does not seem like a bug to me. CloudFlare requires a specific chunkSize. Please read their documentation for more details and set it accordingly: https://developers.cloudflare.com/stream/uploading-videos/upload-video-file/

Thank you for this I will try this out and let you know I was using 50mb chunks originally changed it sometime last night this must of been what cause the issue just weird cause the lower size files would make it threw without issue on chunk being infinite I was feeling it maybe tus server timeout or something of that sorts.
But I'm a test this out again with 50mb and get back with you.

This worked also i had https on the tus server needed to take this off and it seems i no longer have issues with it starting over from 0% anymore so that's a good sign upon upload interruptions it successfully picked up about 2% behind where it errored out and was able to solve this issue thank you very much