{"_id":"@api.video/react-upload-button","_rev":"9-5485ca06eb91fb5ac9017a9c8a8cd36a","name":"@api.video/react-upload-button","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@api.video/react-upload-button","version":"0.0.1","keywords":["api.video","video","react","upload","uploader","file-upload","front-end","file-uploader","file-picker","upload-component","react-uploader","js-uploader"],"license":"MIT","_id":"@api.video/react-upload-button@0.0.1","maintainers":[{"name":"apivideo-ecosystem","email":"ecosystem@api.video"},{"name":"anthony.dantard","email":"hello@api.video"},{"name":"olivierapivideo","email":"olivier@api.video"}],"homepage":"https://github.com/apivideo/react-packages/tree/main/packages/ui/upload-button","bugs":{"url":"https://github.com/apivideo/react-packages/issues"},"dist":{"shasum":"c9f2a1257056f6560462fbe762e3e13452aa5042","tarball":"https://registry.npmjs.org/@api.video/react-upload-button/-/react-upload-button-0.0.1.tgz","fileCount":6,"integrity":"sha512-nv0mKfSMSSA3DYLP1ejSUeyhl4Pc2pSRKAHz0VU8ly+G+lANGNgkeJ+2x5QamxigP4HF93+4nDZ4vUo4PdzkRA==","signatures":[{"sig":"MEUCIAc1mJC+ItWS4wZOes5m+dDaJJrUEOOB/a1nrI0sK/o6AiEA9471rErPX/nyNz6GCk1SgKDWg6/ERdZ8qNykDOKzgsw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":16871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaPsjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjmhAAmJyxwR5XtcB4Uq12MshMssycWeAcS3Hxw/eiVVa8xmLHd3Z8\r\n5ObgjqdsjwYjHIELm2ZavhfokVtwhy2GkRBqHzHb4j2q0uksB8lds3r8HtE2\r\nvHHQJNEca7G7Sk6T8JOmqRoT6678yQgQpiBnPw6xnaHTHa6ELVGYhJj98p11\r\n5c6/q6DY4zWZhtPtdzZbxPk1foljhQNkoYcxFtAcirTFq9bX/Mj5j3GfR919\r\nW02eHt6cAI7W2Zxs21finuXEaxWm/WewdgNbxgSaoBZTKGNwZ1e3pXaNyssX\r\nsJyAN5ca1ckfBFk9gTTagsveieWWI2jNNZ9EiXwLNq22HKqMhuN+xxs5zJUl\r\nTKJHBjx7iI8yJNG/LmzA7kkjLWdQ+Tw7nvmA+3xonkDddYLUcFKGwKhsHBjZ\r\nr/TatTA3MMyXA+5rpUNi8WpGqR2F6DcxuTdN/bA8MBRUogzU6gjGrK51cZne\r\nuj64O7j7wAWqDrvf2y9e6rCGiigoEPDTnz2fV4i80B0lYNhMoWCJyc/PGvnb\r\nGpxM4f64BNITwK3gRD5LYjy0OR0sZ46x1QD0EVOSmD1Va+KhDGyLGdJEXkYz\r\njCNLtdMFONS4Z+KmlWqlrrTMx+aE4HrLjZhH67h1E8dSaqOxlPctD9K0KdCC\r\nN0hnPs78gIB1OUUFxCb+9KRPS1m26dE5cIA=\r\n=YwG1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","gitHead":"7f3c7ee1c4a669c9f112dcc3a63b01d13640d3ac","scripts":{"dev":"tsup src/index.tsx --format esm,cjs --watch --dts --external react","lint":"TIMING=1 eslint src --fix","build":"tsup src/index.tsx --format esm,cjs --dts --external react","clean":"rm -rf .turbo && rm -rf node_modules && rm -rf dist"},"_npmUser":{"name":"apivideo-ecosystem","email":"ecosystem@api.video"},"_npmVersion":"8.5.5","description":"api.video React upload button","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"@api.video/video-uploader":"^1.0.7"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^5.10.1","react":"^17.0.2","typescript":"^4.5.3","@types/react":"^17.0.13","@types/react-dom":"^17.0.8","@api.video/tsconfig":"*","eslint-preset-apivideo":"*"},"_npmOperationalInternal":{"tmp":"tmp/react-upload-button_0.0.1_1651047203053_0.7028459134635894","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@api.video/react-upload-button","version":"0.0.2","keywords":["api.video","video","react","upload","uploader","file-upload","front-end","file-uploader","file-picker","upload-component","react-uploader","js-uploader"],"license":"MIT","_id":"@api.video/react-upload-button@0.0.2","maintainers":[{"name":"apivideo-ecosystem","email":"ecosystem@api.video"},{"name":"anthony.dantard","email":"hello@api.video"},{"name":"olivierapivideo","email":"olivier@api.video"}],"homepage":"https://github.com/apivideo/react-packages/tree/main/packages/ui/upload-button","bugs":{"url":"https://github.com/apivideo/react-packages/issues"},"dist":{"shasum":"ed145cb4a1fc5c2b8b0724f63b623682807a1a06","tarball":"https://registry.npmjs.org/@api.video/react-upload-button/-/react-upload-button-0.0.2.tgz","fileCount":6,"integrity":"sha512-Qc7oHmruK+QR42W8h+RKuZ8RwSJ5iotkhrMVKoUZavQXl+mEVEZVsHjDsQ0rNsAUGn/ahSGweRfzUKy9JLAbGw==","signatures":[{"sig":"MEUCIQDPY6naCkxMesqlNyayW51RloRwds9JrKTF+yuOr59A2QIgahAo90YTjwftxVPVUDhEqkV0JXYXJ/3KFL23eT9ODTM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17643,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiakDOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLZxAAjjHYqzrPFExAXZhLYKxHX2mbR0yGtzVKEswff5lAcfkPkNU+\r\nM4Uzi5/DPX3AGnSXXEhOYDJ4XfbY/TqzFxY3jJZQYzDSOpyXtgVvT0DSfIIb\r\nqq12lt2dWDi+g5P5iDhiWC6d2wHNrTGIuc7R3KL54zQJx3VuO1OITrcV9Xc6\r\n/r7OK09r7GsuApSqOgD0OHQSmBiTC7JVzNmktSJYN5rCAwcGiaDSHvjpzOPD\r\nt0SfMvUW7ulYQZ1QvFqwaUEeMXIofgna44sNKxLa+YeYkojOE+NQBYx8MORi\r\nYec/fBZuiKG1FAKG7WeSD4a6bHh8dJBA065lCA4jHLh9wj5WPry7hbUy3V/+\r\nTUnSLN/rsWmpsh4V2ycENZfK19XriaxWCgW2yOug6ZGMjR8Ceei+U6q3n0x9\r\n7qyWuhXYvF0+Y2sab93CSQQCCLfrbns9jf3KikEkzwmaCiagopCFQyFd9SQj\r\nn0WorGer9buuKCDgdn7c7ZcxnRya8Ju4jqEzNPdmFDwTOa7n2FCmtag6Vnsb\r\nrBUzCT1kFkunMbFT+NDkTmfx715wBBAY4oP/WjcYnSWRHmgj91osq4A8PNzO\r\nKT+hedAW+qyWvmxPcWdpHEoKqvTS5DsOVrM+wCFwPeA9dzFQN2hgeGgnIksq\r\nhkId5Ke8BK/F6qO6rEcHYgfPMaYlhl9K1lg=\r\n=xbbb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","gitHead":"15a2294060d1a682150bbd931a292de11f9bdf54","scripts":{"dev":"tsup src/index.tsx --format esm,cjs --watch --dts --external react","lint":"TIMING=1 eslint src --fix","test":"jest","build":"tsup src/index.tsx --format esm,cjs --dts --external react","clean":"rm -rf .turbo && rm -rf node_modules && rm -rf dist"},"_npmUser":{"name":"apivideo-ecosystem","email":"ecosystem@api.video"},"_npmVersion":"8.5.5","description":"api.video React upload button","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"@api.video/video-uploader":"^1.0.7"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^28.0.2","tsup":"^5.10.1","react":"^17.0.2","babel-jest":"^28.0.2","typescript":"^4.5.3","@babel/core":"^7.17.9","@types/jest":"^27.4.1","@types/react":"^17.0.13","@types/react-dom":"^17.0.8","@babel/preset-env":"^7.16.11","@api.video/tsconfig":"*","@babel/preset-react":"^7.16.7","react-test-renderer":"^18.1.0","@testing-library/react":"12.1.2","eslint-preset-apivideo":"*","jest-environment-jsdom":"^28.0.2","@babel/preset-typescript":"^7.16.7"},"_npmOperationalInternal":{"tmp":"tmp/react-upload-button_0.0.2_1651130574712_0.5939132409112422","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-04-27T08:13:23.008Z","modified":"2025-05-22T12:50:42.573Z","0.0.0":"2022-04-15T14:52:52.982Z","0.0.1":"2022-04-27T08:13:23.246Z","0.0.2":"2022-04-28T07:22:54.845Z"},"bugs":{"url":"https://github.com/apivideo/react-packages/issues"},"license":"MIT","homepage":"https://github.com/apivideo/react-packages/tree/main/packages/ui/upload-button","keywords":["api.video","video","react","upload","uploader","file-upload","front-end","file-uploader","file-picker","upload-component","react-uploader","js-uploader"],"description":"api.video React upload button","maintainers":[{"email":"ecosystem@api.video","name":"apivideo-ecosystem"}],"readme":"[](https://twitter.com/intent/follow?screen_name=api_video) [](https://github.com/apivideo/api.video-react-player) [](https://community.api.video)\n\napi.video React upload button
\n\n \n\n[api.video](https://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.\n\n# Table of contents\n\n- [Table of contents](#table-of-contents)\n- [Project description](#project-description)\n- [Getting started](#getting-started)\n - [Retrieve your upload token](#retrieve-your-upload-token)\n - [Installation](#installation)\n - [Basic usage](#basic-usage)\n- [Documentation](#documentation)\n - [Props](#props)\n - [children](#children)\n - [uploadToken](#uploadtoken)\n - [style](#style)\n - [onUploadProgress](#onuploadprogress)\n - [onUploadSuccess](#onuploadsuccess)\n - [onUploadError](#onuploaderror)\n\n# Project description\n\nCustomizable React button to upload to your [api.video account](https://dashboard.api.video).\n\n# Getting started\n\n## Retrieve your upload token\n\nYou'll need an upload token to use this component and upload to api.video.\nTo get yours, follow these steps:\n\n1. [Log into your account](https://dashboard.api.video/login) or create one [here](https://dashboard.api.video/register).\n2. Copy your API key (sandbox or production if you are subscribed to one of our [plan](https://api.video/pricing)).\n3. Go to [the official api.video documentation](https://docs.api.video/docs).\n4. Log into your account in the top right corner. If it's already done, be sure it's the account you want to use.\n5. Go to API reference -> Upload Tokens -> Generate an upload token\n6. On the right, be sure the \"Authentication\" section contains the API key you want to use.\n7. Generate your upload token by clicking the \"Try It!\" button in the right section\n8. Copy the \"token\" value from the response in the right section.\n\n## Installation\n\n```sh\nnpm install @api.video/react-upload-button\n# or\nyarn add @api.video/react-upload-button\n```\n\n## Basic usage\n\n```typescript\nimport { UploadButton } from \"@api.video/react-upload-button\"\n\nexport default function MyComponent() {\n return Click Me\n}\n```\n\n# Documentation\n\n## Props\n\n| Name | Type | Mandatory | Description |\n| ---------------- | --------------------------------------- | --------- | ---------------------------------------------------------------- |\n| children | React.ReactNode | Yes | The button's children |\n| uploadToken | string | Yes | Your upload token |\n| style | React.CSSProperties | No | An object of style |\n| onUploadProgress | (progress: UploadProgressEvent) => void | No | Callback called during the uploading process |\n| onUploadSuccess | (video: VideoUploadResponse) => void | No | Callback called after the upload process has been completed |\n| onUploadError | (errorMessage: string) => void | No | Callback called in case of an error during the uploading process |\n\n### children\n\nA ReactNode children.\n\nExample:\n\n```typescript\nimport { UploadButton } from \"@api.video/react-upload-button\"\n\nexport default function MyComponent() {\n return Click Me\n}\n```\n\n### uploadToken\n\nYour upload token, mandatory to upload a video to your api.video account.\n\nExample:\n\n```typescript\nimport { UploadButton } from \"@api.video/react-upload-button\"\n\nexport default function MyComponent() {\n return (\n \n Click Me\n \n )\n}\n```\n\n### style\n\nA React.CSSProperties object, used for component styling.\n\nExample:\n\n```typescript\nimport { UploadButton } from \"@api.video/react-upload-button\"\n\nexport default function MyComponent() {\n return (\n \n Click Me\n \n )\n}\n```\n\n### onUploadProgress\n\nCallback called during the uploading process.\nAn UploadProgressEvent object is accessible from it:\n\n- uploadedBytes (number): total number of bytes uploaded for this upload\n- totalBytes (number): total size of the file\n- chunksCount (number): number of upload chunks\n- chunksBytes (number): size of a chunk\n- currentChunk (number): index of the chunk being uploaded\n- currentChunkUploadedBytes (number): number of bytes uploaded for the current chunk\n\nExample:\n\n```typescript\nimport { UploadButton } from \"@api.video/react-upload-button\"\n\nexport default function MyComponent() {\n return (\n console.log(progress.uploadedBytes)}\n // ...\n >\n Click Me\n \n )\n}\n```\n\n### onUploadSuccess\n\nCallback called after the upload process has been completed.\nA Video object is accessible from it.\nCheck the [official documentation](https://github.com/apivideo/api.video-nodejs-client/blob/main/doc/model/Video.md).\n\nExample:\n\n```typescript\nimport { UploadButton } from \"@api.video/react-upload-button\"\n\nexport default function MyComponent() {\n return (\n console.log(video.videoId)}\n // ...\n >\n Click Me\n \n )\n}\n```\n\n### onUploadError\n\nCallback called in case of an error during the uploading process.\nA string error message is accessible from it.\n\nExample:\n\n```typescript\nimport { UploadButton } from \"@api.video/react-upload-button\"\n\nexport default function MyComponent() {\n return (\n console.log(errorMessage)}\n // ...\n >\n Click Me\n \n )\n}\n```\n","readmeFilename":"README.md"}