Upload Video

End-to-end upload flow: create temp user, verify email, upload video. Both React and Web Component implementations share the same core.

Configuration

React Component <UploadButton />

Import from @veelapp/core. Renders a trigger button that opens the full upload dialog with email verification, OTP, file selection, and upload progress.

import { UploadButton, VeelProvider } from "@veelapp/core";

<VeelProvider endpoint="https://gateway.veelapp.com/graphql">
  <UploadButton
    endpoint="https://gateway.veelapp.com/graphql"
    shortCode="YOUR_SHORT_CODE"
    apiKey="YOUR_API_KEY"
    uploadPath="/products/my-product"
    onSuccess={(videoId) => console.log("Uploaded:", videoId)}
    onError={(message) => console.error("Failed:", message)}
  />
</VeelProvider>

Web Component <veel-upload>

Uses the sdk.js bundle. No React required on the host page. Attributes use kebab-case: short-code, api-key, path.

Loading sdk.js...
<script src="https://cdn.veelapp.com/sdk.js" async></script>

<veel-upload
  endpoint="https://gateway.veelapp.com/graphql"
  short-code="YOUR_SHORT_CODE"
  api-key="YOUR_API_KEY"
  path="/products/my-product"
  label="Upload Video"
></veel-upload>

Props / Attributes Reference

endpointshort-codestringGraphQL API endpoint
shortCodeshort-codestring?Workspace short code
apiKeyapi-keystring?API key for auth header
uploadPathpathstring?Upload path (defaults to window.location.pathname)
labellabelstring?Button label (default: "Upload Video")
onSuccess—(videoId: string) => voidCalled after successful upload
onError—(message: string) => voidCalled on upload failure

React props (camelCase) | Web Component attrs (kebab-case) | Type | Description