api.video React upload button

!npm !ts

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

- Table of contents
- Project description
- Getting started
- Retrieve your upload token
- Installation
- Basic usage
- Documentation
- Props
- children
- uploadToken
- style
- onUploadProgress
- onUploadSuccess
- onUploadError

Project description

Customizable React button to upload to your api.video account.

Getting started

Retrieve your upload token

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.

Installation

``sh
npm install @api.video/react-upload-button


or


yarn add @api.video/react-upload-button
`

Basic usage

`typescript
import { UploadButton } from "@api.video/react-upload-button"

export default function MyComponent() {
return Click Me
}
`

Documentation

Props

| 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 |

$3

A ReactNode children.

Example:

`typescript
import { UploadButton } from "@api.video/react-upload-button"

export default function MyComponent() {
return Click Me
}
`

$3

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

)
}
`

$3

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

)
}
`

$3

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

)
}
`

$3

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

)
}
`

$3

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

)
}
``