How to Integrate Vimeo into React application

A quick guide to integrating Vimeo video upload into your React application

Media content is a major part of any application. Here we discuss an approach using Vimeo as storage for video content dynamically uploaded by users. Here we also try to reduce the number of hits on our server, which means completing as many actions as possible via the Vimeo server or client-side (client browser).

Since we need to have some endpoints on our server, let’s create an application with NextJS applying typescript:

In the terminal, CLI offers you to choose a project name (let’s say its name is vimeo-integration) and it will create a project boilerplate in a project with the same name.

As soon as we created a Vimeo Account to get access to Vimeo API we need to create an Application. In the main navigation go to Resources -> Developer Tools. On this page find the button “New App” on the right bottom corner and fill in all necessary fields and click the “Create Application” button.

On the page of new created Application, let’s scroll down to the Authentication section and generate Access Token. Click the “Authenticated” radio and check the following options: “Private”, “Create”, “Edit”, “Upload”, and “Delete”. Click the “Generate” button. Copy generated token, we will use it soon and keep it secret. It allows a user to upload video on our account's behalf.

Here I would like to highlight some crucial points which were important for us. Getting a presign link is required to fetch metadata from the Vimeo service and this request should be associated with the access token which we generated in the 2.2 chapter. We need to implement this part on our server since we could not expose a secret token on the client-side. A presign link is just some metadata that generates a link that we will use afterward to upload video, and it does not require us to attach any tokens anymore and we may complete the upload on the client-side only. This process is depicted in picture 4.

We covered all details which are necessary and let’s start to implement them.

As we discussed in the previous section we need to get a presign upload link and this request should be delivered to Vimeo Server with an access token. We don’t like to expose this token on the client-side, therefore we need to develop an endpoint on our server which attaches our token and it will be like a proxy server.

Since we initialized our application with NextJS, it’s easy to implement just by creating a file with the name vimeo.tsunder the folder /pages/api. This handler will be available by this endpoint then /api/vimeo . Let’s implement this one. Our server should send a request to this endpoint

Including these headers:

The shape of the request body will be the following:

Ok, without any further ado let’s implement this handler:

At first, let’s extract a common interface that may be used not only for the Vimeo provider but for others as well. Let’s create the file media-uploader.types.ts in the folder utils :

We developed an interface Uploader where we need to implement one required method upload . Well, let’s implement it for our Vimeo provider and create media-uploader-vimeo.ts file under the folder utils. But before going further, let’s recall that we are going to upload a video file via tus protocol, and luckily for us, we may include a library that helps us to do it. Let’s include the tus-js-client library:

Well, our implementation will look like that:

Here we just invoke the recently developed URL (section 4.1) to get presign uploading link (lines 21–24). After that, we need to use this link to upload a file via the ts-js-client library (lines 31–48). This library allows us to poll progress via onProgress callback. As soon as a file is uploaded we return a data with this shape:

id will be used when you need to show a video in an iframe.

It will be a pretty easy implementation which includes a simple input with the file type and the Upload button. You will adopt this functionality to your needs afterward, but for now, I won’t distract us from the main topic. As soon as we click the Upload button we should see the progress. Let’s start it and incorporate in this component our media-uploader-vimeo utils developed in section 4.2.

Let’s create MediaUploader component:

Here we have input with file type (lines 11–19), when the user picks content to upload — we save it in react state. Also, we allow users to upload only video files via attribute accept with value video/*.

On the screen, we added Upload button (lines 20–39), as soon as the file is picked it’s getting available and in onClick handler we invoke our recently implemented MediaUploaderVimeo.

During the uploading, we show the progress of this process (line 40).

That is it. Let’s test this functionality.

After that when we go to the Vimeo dashboard, you will see this video:

Thanks for reading!

Related posts:

Throughout the time I’ve been on Medium, I’ve been delighted to see outstanding photographs of places all around the world. These pics have shown the essence of locations from all types of climates…

We are excited to announce that MOVEZ will be available on CoinTiger. MOVEZ/USDT trading pair will be available at the same time. MoveZ is Move-To-Earn project based on a common every day activity…

A stable place to call home is one of the best predictors of success. Yet, each year more than 2.4 million Americans, most of them low-income renters, face eviction. While it used to be rare even in…