vimeovimeo-apitus

Resume file uploading using Tus protocol

I am developing a website using Laravel, and I am using tus-js-client to upload files directly to Vimeo without going through my server. The uploading works perfect.

But, lets say the uploading reached 44%, and then the user refreshed the browser... as I understand It should continue uploading from 44% when the user start uploading the same file again.. but that doesn't happen and it start from the beginning.

I think this is happening because when I send an API request to Vimeo to get the upload_link ( step 1 ) It will give me a new upload_link every time the user refresh the page..

 // Upload process start 
  var self = this;

  // Send request to server to get (upload.upload_link) from Vimeo API (Step 1)
  var uploadEndPoint = self.getUploadEndPoint();

  // Start uploading ( Step 2 )
  self.uploader = new tus.Upload(file, {
    uploadUrl: uploadEndPoint,
    retryDelays: [0, 1000, 3000, 5000],
    metadata: {
      filename: file.name,
      filetype: file.type
    },
    resume: true,
    uploadSize: file.size,
    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",
        self.uploader.file.name,
        self.uploader.url
      );
    }
  });

What is the best way to handle this, so the user can resume the upload?

Solution

  • What i did:

    1. set Laravel backend endpoint to get download link
    2. for the first endpoint request make request from your backend to Vimeo and save uploadlink on backend
    3. for further requests check if client is going to download same file (by name and size, or by hash) and if yes return saved uploadlink, if not request new one

    by doing that i solve two problems: