CODEWITHSUNDEEP
node.jsfile-uploadvimeo-api
Aaron Chamberlain
Aaron Chamberlain

Reputation: 671

Vimeo API: Upload from a File Using a Form

I followed the docs for the vimeo node.js api to upload a file. It's quite simple and I have it working by running it directly in node, with the exception that it requires me to pass the full path of the file I want to upload. Code is here:

function uploadFile() {
    let file = '/Users/full/path/to/file/bulls.mp4';
    let video_id; //the eventual end URI of the uploaded video

    lib.streamingUpload(file, function(error, body, status_code, headers) {
       if (error) {
       throw error;
    }

    lib.request(headers.location, function (error, body, status_code, headers) {
      console.log(body);
      video_id = body.uri;
      //after it's done uploading, and the result is returned, update info
      updateVideoInfo(video_id);
    });
    }, function(upload_size, file_size) {
       console.log("You have uploaded " + 
       Math.round((upload_size/file_size) * 100) + "% of the video");
  });
}

Now I want to integrate into a form generated in my react app, except that the result of evt.target.files[0] is not a full path, the result is this: 

File {name: "bulls.mp4", lastModified: 1492637558000, lastModifiedDate: Wed Apr 19 2017 14:32:38 GMT-0700 (PDT), webkitRelativePath: "", size: 1359013595…}

Just for the sake of it, I piped that into my already working upload function and it didn't work for the reasons specified. Am I missing something? If not I just want to clarify what I actually have to do then. So now I'm looking at the official Vimeo guide and wanted to make sure that was the right road to go down. See: https://developer.vimeo.com/api/upload/videos

So if I'm reading it right, you do several requests to achieve the same goal?

1) Do a GET to https://api.vimeo.com/me to find out the remaining upload data they have.

2) Do a POST to https://api.vimeo.com/me/videos to get an upload ticket. Use type: streaming if I want a resumable upload such as those provided by the vimeo streamingUpload() function

3) Do a PUT to https://1234.cloud.vimeo.com/upload?ticket_id=abcdef124567890

4) Do a PUT to https://1234.cloud.vimeo.com/upload?ticket_id=abcdef124567890 but without file data and the header Content-Range: bytes */* anytime I want to check the bytes uploaded.

Sound right? Or can you simply use a form and I got it wrong somewhere. Let me know. Thanks.

Upvotes: 2

Views: 3830

Answers (1)

Dashron
Dashron

Reputation: 3998

There's some example code in this project that might be worth checking out: https://github.com/websemantics/vimeo-upload.

Your description is mostly correct for the streaming system, but I want to clarify the last two points.

3) In this step, you should make a PUT request to that url with a Content-Length header describing the full size of the file (as described here: https://developer.vimeo.com/api/upload/videos#upload-your-video)

4) In this step, the reason you are checking bytes uploaded is if you have completed the upload, or if your connection in the PUT request dies. We save as many bytes possible, and we will respond to the request in step 4. with how many bytes we received. This lets you resume step 3 where you left off instead of at the very beginning.

For stability we highly recommend the resumable uploader, but if you are looking for simplicity we do offer a simple POST uploader that uses an HTML form. The docs for that are here: https://developer.vimeo.com/api/upload/videos#simple-upload

Upvotes: 2

Related Questions