reactjsnext.jsvercelvimeovimeo-api

How to enable website users to upload videos from frontend to my Vimeo account?


I'm using Next.js v13 hosted on Vercel, and I want to allow users to upload videos directly from frontend to the Vimeo servers. I understand how I can upload videos to THEIR accounts, but I need to upload them to MY account. The problem is that I can't just expose my personal access token to the client. (I'd rather not do that even if it only has an upload scope)

Right now, the only option I see is to upload the video to a temporary storage solution (like AWS S3), and then upload to Vimeo from there.

I've tried to upload a video as a formData to my backend and from there upload to Vimeo and that works, but only for small videos because there is a limit to how much a serverless function can take.


Solution

  • To implement direct video upload to a centralized account on Vimeo servers from frontend of your application you can use the resumable upload method described here: https://developer.vimeo.com/api/upload/videos#resumable-approach

    The approach is:

    1. Create an API endpoint to initialize the upload from the backend. (aka "Step 1" from the link above) This is the only step that requires authorization, so here is where you will use your app's access token. The only video-related data that you need to send to VimeoAPI at this step is the size of the video you are to upload.
    2. After Step 1 is complete, return upload.upload_link field you get from the VimeoAPI response back to frontend as a response of your API endpoint.
    3. Now you have a link that you can upload your video to directly from frontend without exposing your access token.

    From here you can do whatever you want, roll your own tus upload implementation (similar to what link above describes), or use a library tus implementation, I recommend tus-js-client, which is what I used to solve this problem. They have built-in support for "Vimeo-flavored" tus upload that I find very nice.