1

I am trying to upload video on vimeo using tus protocol, and video uploading is working fine, But the uploading start again if we pause and resume, What am I possibly doing wrong? This is the code.

$(document).on("click", "button", function (e) {
        var file = $(this).prop("files")[0];
        $.ajax({
            'url': 'https://api.vimeo.com/me/videos',
            'type': 'POST',
            'headers': {
                'Accept': 'application/vnd.vimeo.*+json;version=3.4',
                'Content-Type': 'application/json',
                'Authorization': 'bearer ' + 'token'
            },
            "data": JSON.stringify({
                "upload": {
                    "approach": "tus",
                    "size": file.size   
                }
            }),
            'success': function (result) {
                var upload = new tus.Upload(file, {
                    uploadUrl: result.upload.upload_link,
                    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)
                    }
                })

                // Add listeners for the pause and unpause button
                var pauseButton = document.querySelector("#pauseButton")
                var unpauseButton = document.querySelector("#unpauseButton")
                pauseButton.addEventListener("click", function () {
                    upload.abort()
                })
                unpauseButton.addEventListener("click", function () {
                    upload.start()
                })

        // Start the upload
        upload.start()

            },
            'error': function (result) {   
            }
        });
shalom sebastin
  • 23
  • 2

1 Answers1

2

A late response but I ran into this issue myself and thought I'd share how I fixed it for anyone else who stumbles across this page in future.

I had to set the chunkSize variable within my 'new tus.Upload()'. By default, chunkSize is infinite, and it seems Vimeo's 'upload-offset' response is only for completed chunks, and so there's no completed chunks until the upload has completed.

By setting it to 5000000 (5mb), I'm able to pause and resume the upload successfully. Upon resuming, it restarts at the last completed chunk, so for a small file (e.g. 30mb), there may be a noticeable drop of a few percentage after resuming. This would be less noticeable for a larger file where 5mb accounts for a smaller percentage, or you could set the chunkSize to 1mb, though the smaller the chunkSize, the slower the upload due to the increased number of http requests.

   var upload = new tus.Upload(file, {
            chunkSize: 5000000,
            uploadUrl: result.upload.upload_link,
            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)
            }
   })

Hope this helps someone.

Chris Delforce
  • 21
  • 2