uploading to vimeo using the resumable approach

Question

I'm trying to get the uploaded bytes of the total video size while uploading, to be able to implement upload bar and to resume the upload in case of interruption from the place it stopped, I'm using vimeo upload with the resumable approach; the upload works fine but I'm stuck with onUploadProgress function.

            let vimeoAccessTokens = process.env.MIX_VIEMO_ACCESS_TOKEN
            let videoCreate = Axios.create()

            delete videoCreate.defaults.headers.common['X-CSRF-TOKEN']
            delete videoCreate.defaults.headers.common['X-Requested-With']

            videoCreate({
                method: 'POST',
                url: 'https://api.vimeo.com/me/videos',
                headers: {
                    'Authorization': 'bearer ' + vimeoAccessTokens,
                    'Accept': 'application/vnd.vimeo.*+json;version=3.4',
                    'Content-Type': 'application/json'
                },
                data: {
                    "upload": {
                        "approach": "tus",
                        "size": this.videoFile.size
                    }
                }
            }).then(response => {
                let videoUri = response.data.uri
                let uploadLink = response.data.upload.upload_link
                let videoUpload = Axios.create()

                videoUpload({
                    method: 'PATCH',
                    url: uploadLink,
                    headers: {
                        'Tus-Resumable': '1.0.0',
                        'Upload-Offset': 0,
                        'Content-Type': 'application/offset+octet-stream',
                        'Accept': 'application/vnd.vimeo.*+json;version=3.4'
                    },
                    data: this.videoFile,
                    onUploadProgress(){
                        Axios.head(uploadLink, {
                            headers: {
                                'Tus-Resumable': '1.0.0',
                                'Accept': 'application/vnd.vimeo.*+json;version=3.4'
                            }
                        }).then(uploadResp => {
                            let uploaded = uploadResp.headers['upload-offset']
                            let total = uploadResp.headers['upload-length']
                            console.info(uploaded +'of'+ total)
                        })
                    }
                }).then(resp => {
                    console.log(resp.status)
                }).catch(err => {
                    window.handleErrors(err)
                })
            }).catch(error => {
                window.handleErrors(error)
            })

            event.preventDefault()
        }

Answer 1

i might be late but let me leave my thoughts here. I recently faced this issue but solved it with uppy-tus. It comes with a nice UI which to me is very cool and makes your work super easy This is a sample code using Vue

<script>
import Axios from 'axios'

const Uppy = require('@uppy/core')
const XHRUpload = require('@uppy/xhr-upload')
const Dashboard = require('@uppy/dashboard')
const tus = require("@uppy/tus")
require('@uppy/core/dist/style.css')
require('@uppy/dashboard/dist/style.css')
export default {
    data() {
        return {
            //store Vimeo access token in .env
            token: process.env.VUE_APP_VIMEO_ACCESS_TOKEN,
            url: '',
            video: '',
            video_file: {
                name: '',
                size: '',
                upload_link: ''
            },

            uppy: null

        }
    },
    methods: {
        //load uppy on mounted
        loadUppy() {
            this.uppy = Uppy({
                restrictions: {
                    maxNumberOfFiles: 1,
                    minNumberOfFiles: 1,
                    allowedFileTypes: ['video/*']
                },
                //
                onBeforeFileAdded: (currentFile, files) => {
                if (currentFile.name) {
                    console.log(currentFile)
                    this.video_file.name =currentFile.name
                    this.video_file.size = currentFile.data.size
                    this.video_file.type = currentFile.type
                    //console.log(this.video_file)
                    return true
                }
                return false
                },
            })
            .use(Dashboard, {
                trigger: '.UppyModalOpenerBtn',
                inline: true,
                target: '.DashboardContainer',
                replaceTargetContent: true,
                showProgressDetails: true,
                hideUploadButton: true,
                height: 250,
                allowMultipleUploads: false

            })



        },


        uploadVideo() {

            const body = {
            "upload" : {
                "approach" : "tus",
                "size" : this.video_file.size
            },
            "name" : this.video_file.name
            };
            // get vimeo upload link
            Axios.post('https://api.vimeo.com/me/videos/',body,{
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/vnd.vimeo.*+json;version=3.4',
                    'Authorization': 'bearer ' + this.token
                }
            }).then((response) => {
                console.log(response)
                let videoUri = response.data.uri
                this.video_file.upload_link = response.data.upload.upload_link
                this.uppy.use(tus, { 
                    uploadUrl: this.video_file.upload_link,
                    metadata: {
                        filename: this.video_file.name,
                        filetype: this.video_file.type,
                    },
                    resume: true,
                    autoRetry: true,
                    retryDelays: [0, 1000, 3000, 5000]
                })
                this.uppy.upload().then((result) => {
                console.info('Successful uploads:', result.successful)

                if (result.failed.length > 0) {
                    console.error('Errors:')
                    result.failed.forEach((file) => {
                    console.error(file.error)
                    })
                }
                })



            }).catch((errors) => {
                console.log(errors)
            })
        },


    },

    mounted() {
        this.loadUppy()

    },

}

Answer 2

Vimeo uses Tus protocol when uploading using resumable approach, and there is already a pure JavaScript client for the tus resumable upload protocol. So no need to reinvent the wheel..

here: https://github.com/tus/tus-js-client