api.video React upload button
  

api.video is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.
- Table of contents
- Project description
- Getting started
- Retrieve your upload token
- Installation
- Basic usage
- Documentation
- Props
- children
- uploadToken
- style
- onUploadProgress
- onUploadSuccess
- onUploadError
Customizable React button to upload to your api.video account.
You'll need an upload token to use this component and upload to api.video.
To get yours, follow these steps:
1. Log into your account or create one here.
2. Copy your API key (sandbox or production if you are subscribed to one of our plan).
3. Go to the official api.video documentation.
4. Log into your account in the top right corner. If it's already done, be sure it's the account you want to use.
5. Go to API reference -> Upload Tokens -> Generate an upload token
6. On the right, be sure the "Authentication" section contains the API key you want to use.
7. Generate your upload token by clicking the "Try It!" button in the right section
8. Copy the "token" value from the response in the right section.
``sh`
npm install @api.video/react-upload-buttonor
yarn add @api.video/react-upload-button
`typescript
import { UploadButton } from "@api.video/react-upload-button"
export default function MyComponent() {
return
}
`
| Name | Type | Mandatory | Description |
| ---------------- | --------------------------------------- | --------- | ---------------------------------------------------------------- |
| children | React.ReactNode | Yes | The button's children |
| uploadToken | string | Yes | Your upload token |
| style | React.CSSProperties | No | An object of style |
| onUploadProgress | (progress: UploadProgressEvent) => void | No | Callback called during the uploading process |
| onUploadSuccess | (video: VideoUploadResponse) => void | No | Callback called after the upload process has been completed |
| onUploadError | (errorMessage: string) => void | No | Callback called in case of an error during the uploading process |
A ReactNode children.
Example:
`typescript
import { UploadButton } from "@api.video/react-upload-button"
export default function MyComponent() {
return
}
`
Your upload token, mandatory to upload a video to your api.video account.
Example:
`typescript
import { UploadButton } from "@api.video/react-upload-button"
export default function MyComponent() {
return (
uploadToken="YOUR_UPLOAD_TOKEN"
// ...
>
Click Me
)
}
`
A React.CSSProperties object, used for component styling.
Example:
`typescript
import { UploadButton } from "@api.video/react-upload-button"
export default function MyComponent() {
return (
style={{ color: 'blue', background: 'red', }}
// ...
>
Click Me
)
}
`
Callback called during the uploading process.
An UploadProgressEvent object is accessible from it:
- uploadedBytes (number): total number of bytes uploaded for this upload
- totalBytes (number): total size of the file
- chunksCount (number): number of upload chunks
- chunksBytes (number): size of a chunk
- currentChunk (number): index of the chunk being uploaded
- currentChunkUploadedBytes (number): number of bytes uploaded for the current chunk
Example:
`typescript
import { UploadButton } from "@api.video/react-upload-button"
export default function MyComponent() {
return (
onUploadProgress={(progress) => console.log(progress.uploadedBytes)}
// ...
>
Click Me
)
}
`
Callback called after the upload process has been completed.
A Video object is accessible from it.
Check the official documentation.
Example:
`typescript
import { UploadButton } from "@api.video/react-upload-button"
export default function MyComponent() {
return (
onUploadSuccess={(video) => console.log(video.videoId)}
// ...
>
Click Me
)
}
`
Callback called in case of an error during the uploading process.
A string error message is accessible from it.
Example:
`typescript
import { UploadButton } from "@api.video/react-upload-button"
export default function MyComponent() {
return (
onUploadError={(errorMessage) => console.log(errorMessage)}
// ...
>
Click Me
)
}
``