3

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?

rook99
  • 742
  • 5
  • 24

1 Answers1

1

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:

  • keep record of the upload link until the file is not fully uploaded
  • keep my permanent Vimeo access token uncompromised on server, sending on client only upload link
Stan Fad
  • 866
  • 10
  • 21
  • I like this... where did you store "uploadlink" info? cache or database? – rook99 Jan 13 '19 at 22:17
  • @rook99 i save it in my db where i keep records of links for uploaded video, as upload link is being returned with main link to video (to watch it), and you cant get this main link to video from upload link – Stan Fad Jan 14 '19 at 12:37
  • I'm following the same approach with reusing the upload_link, but when I refresh the browser and start the tus upload again (same file, same upload_link) it uploads the complete file again. @StanFad anything else you did to solve this problem? – clic Apr 17 '20 at 12:18
  • Thanks. This solution is very clean. I have used your design to accomplish this task and I like it. – phang Dec 01 '20 at 07:34