The purpose of the uploader element is to offer users of your web application the ability to upload videos to api.video.
It comes in the form of a customizable button that opens a file selector when clicked. Once the file to upload is selected, the progression of the upload is exposed as a state of the element.
To add an uploader element on a page, click on the "api.video uploader" item of the Input form elements list.
Then, draw the uploader on your page using your mouse, like you do we any other Visual component. Once done, double-click on the player to open the window for editing its properties. You can change the style of the element like you do usually.
There is one element property that you have to define to be able to use the uploader: the "upload token". Upload tokens are also know as "Delegated Upload Tokens". They work like public keys to your api.video account, allowing secure uploads without exposing your API key client side.
There are several ways to proceed with the upload token:
- Generate a token once and use it for all uploads. To generate a token, you'll have to make a call to the api.video API as described in this article: Delegated uploads: Make video uploads with a token you create
- Let Bubble make the call to the token generation API thanks to the API calls predefined in the plugin. This particular topic is covered here: Bubble.io API calls. You can generate a new token:
- When a new user sign-in in your application, and save the token in this user's database entry
- When an upload is going to be made (in this case the token may be created with a short lifetime).
Two events are triggered by the uploader element:
startwhen the upload starts (right after the user has selected a file)
endwhen the upload has just finished
You can rely on these events to make change in the interface (for instance to hide the uploader and show a progress bar instead when the start event is received).
To perform a such action when an event occurs, go to the workflow tab, create a new workflow, and as a trigger condition, select "Elements -> A api.video uploader ...".
Two states are exposed by the component:
percentit is a percentage representing the upload progress
videoidonce the video has been uploaded, this state will contain the api.video unique identifier of the new video. This is an important value that in most cases you will want to store in your database.
Updated 12 days ago