javascript - tus-js-client function onProgress no update after refreshing page

Question

I am uploading videos to vimeo from my frontend, using tus-js-client. The load happens without problems and everything works fine, the onProgress function receives the load data fine. I am using vue and these are the functions that I use to load.

async vimeoQueryLink () {
  try {
    const { size } = this.upload.video

    const body = {
      name: Number(new Date()).toLocaleString(),
      upload: {
        approach: 'tus',
        size
      }
    }

    const response = await fetch('https://api.vimeo.com/me/videos', {
      method: 'POST',
      mode: 'cors',
      cache: 'no-cache',
      credentials: 'same-origin',
      headers: {
        Authorization: 'bearer TOKEN',
        'Content-Type': 'application/json',
        Accept: 'application/vnd.vimeo.*+json;version=3.4'
      },
      redirect: 'follow',
      referrerPolicy: 'no-referrer',
      body: JSON.stringify(body)
    })

    return response.json()
  } catch (error) {
    console.log(error)
  }
}
    
async vimeoUploadVideo () {
  const { upload } = await this.vimeoQueryLink()

  const tusUpload = new tus.Upload(this.upload.video, {
    uploadUrl: upload.upload_link,
    onError (error) {
      console.log('vimeoUploadVideo: error =>' + error)
    },
    onProgress (bytesUploaded, bytesTotal) {
      /**
      *   After refreshing the page, it only shows when it starts and when it loads 100%
      **/
      
      const percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)
      console.log(bytesUploaded, bytesTotal, percentage + '%')
    },
    onSuccess () { 
      console.log('Download %s from %s', tusUpload.file.name, tusUpload.url)
      console.log('vimeoUploadVideo: finish')
    }
  })

  tusUpload.start()
}

question from:https://stackoverflow.com/questions/65648627/tus-js-client-function-onprogress-no-update-after-refreshing-page

Answer 1

Waitting for answers