# Video Upload

Upload videos to RestGO with progress and resume support.

URL: https://webrad.atentor.com/docs/video-upload
Updated: 2026-11-07

WebVideoUpload · Nonvisual · Nonvisual · 8 events

## Quick start

Add **VideoUpload1** in the Designer. Use the example in a page method.

```ts
const selection = await VideoUpload1.OpenFile();
if (!selection) return;
VideoUpload1.title = 'Presentation';
VideoUpload1.descri = 'Product video';
VideoUpload1.isPublic = false;
try {
  const video = await VideoUpload1.SendToRestGO();
  Message(video.id);
  await VideoUpload1.WaitUntilReady({ timeoutMs: 600_000 });
} catch (error) {
  Message(error instanceof Error ? error.message : String(error));
}
// Pause(), Resume(), CancelUpload(), and Clear() control the upload.
```

WaitUntilReady() waits for server processing. If automatic conversion is disabled, start it with RestGO.videos.process(id).

- Configure accept, maxFileSizeMB, and maxDurationSeconds; null disables optional limits.
- OpenFile() selects; SendToRestGO() uploads in chunks. percentage tracks uploading and processingProgress tracks conversion.
- Pause() preserves the checkpoint. Resume() uses the same file; after reloading, select it again and pass the saved resumeToken.
- CancelUpload() cancels the remote session. Clear() clears local state.
- OnProgress, OnStateChange, OnUploadComplete, OnProcessingProgress, OnReady, OnError, and OnComplete track the stages.

## Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

| Property / source | Type and options | Default | Runtime access |
| --- | --- | --- | --- |
| `name` — Name · Identity | `string` | `—` | name |
| `accept` — Accepted video types · Behavior — Chooser filter. RestGo accepts MP4, MOV, MKV and WebM. | `string` | `".mp4,.mov,.mkv,.webm"` | accept |
| `enabled` — Enabled · Behavior | `boolean` | `true` | enabled |
| `title` — Title · Video — Empty uses the filename as the title on RestGo. | `string` | `""` | title |
| `descri` — Description · Video | `string` | `""` | descri |
| `isPublic` — Public video · Video — Public upload requires server permission. Private by default. | `boolean` | `false` | isPublic |
| `chunkSizeBytes` — Chunk size (bytes) · Upload — Positive integer. Automatically capped at the session maxChunkBytes. | `number` | `8388608` | chunkSizeBytes |
| `maxFileSizeMB` — Maximum file size (MB) · Limits — Optional local limit, 1 MB = 1024² bytes. Leave empty for no local limit; server limits still apply. | `number` | `null` | maxFileSizeMB |
| `maxDurationSeconds` — Maximum duration (seconds) · Limits — Optional positive limit. The browser must be able to read the duration; leave empty to disable. | `number` | `null` | maxDurationSeconds |

## API in code

| Member | Signature | Access |
| --- | --- | --- |
| `title` | `title: string;` | Read and write |
| `descri` | `descri: string;` | Read and write |
| `isPublic` | `isPublic: boolean;` | Read and write |
| `accept` | `get accept(): string;` | Read and write |
| `enabled` | `get enabled(): boolean;` | Read and write |
| `maxFileSizeMB` | `get maxFileSizeMB(): number \| null;` | Read and write |
| `maxDurationSeconds` | `get maxDurationSeconds(): number \| null;` | Read and write |
| `chunkSizeBytes` | `get chunkSizeBytes(): number;` | Read and write |
| `selectedFile` | `get selectedFile(): File \| null;` | Read-only |
| `selection` | `get selection(): WebVideoUploadSelection \| null;` | Read-only |
| `uploadSession` | `get uploadSession(): import("@webrad/restgo-sdk").RestGoVideoUploadSession \| null;` | Read-only |
| `resumeToken` | `get resumeToken(): import("@webrad/restgo-sdk").RestGoVideoResumeToken \| null;` | Read-only |
| `video` | `get video(): import("@webrad/restgo-sdk").RestGoVideo \| null;` | Read-only |
| `state` | `get state(): WebVideoUploadState;` | Read-only |
| `confirmedBytes` | `get confirmedBytes(): number;` | Read-only |
| `totalBytes` | `get totalBytes(): number;` | Read-only |
| `percentage` | `get percentage(): number \| null;` | Read-only |
| `processingProgress` | `get processingProgress(): number \| null;` | Read-only |
| `error` | `get error(): Error \| null;` | Read-only |
| `onChange` | `set onChange(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onProgress` | `set onProgress(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onStateChange` | `set onStateChange(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onUploadComplete` | `set onUploadComplete(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onProcessingProgress` | `set onProcessingProgress(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onReady` | `set onReady(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onError` | `set onError(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onComplete` | `set onComplete(handler: WebComponentEventHandler<this> \| null);` | Read and write |

### `OpenFile`

method

```ts
OpenFile(): Promise<WebVideoUploadSelection | null>;
```

Opens the chooser from a user gesture. It never creates or sends an upload.

Example

```ts
await VideoUpload1.OpenFile();
```

### `SendToRestGO`

method

```ts
SendToRestGO(options?: WebVideoUploadOptions): Promise<import("@webrad/restgo-sdk").RestGoVideo>;
```

Example

```ts
await VideoUpload1.SendToRestGO({ isPublic: false });
```

### `Resume`

method

```ts
Resume(options?: WebVideoUploadResumeOptions): Promise<import("@webrad/restgo-sdk").RestGoVideo>;
```

Example

```ts
await VideoUpload1.Resume();
```

### `Pause`

method

```ts
Pause(): void;
```

Aborts only local upload I/O. The server session remains resumable.

Example

```ts
VideoUpload1.Pause();
```

### `CancelUpload`

method

```ts
CancelUpload(): Promise<void>;
```

Explicitly cancels the open upload on RestGo. It does not cancel conversion jobs.

Example

```ts
await VideoUpload1.CancelUpload();
```

### `WaitUntilReady`

method

```ts
WaitUntilReady(options?: import("@webrad/restgo-sdk").RestGoVideoWaitOptions): Promise<import("@webrad/restgo-sdk").RestGoVideo>;
```

Example

```ts
await VideoUpload1.WaitUntilReady({ timeoutMs: 600_000 });
```

### `Clear`

method

```ts
Clear(): void;
```

Clears local state and stops requests. No remote video/session is deleted.

Example

```ts
VideoUpload1.Clear();
```

### `dispose`

method

```ts
dispose(): void;
```

Example

```ts
// Call only when disposing of an instance whose lifecycle you control.
VideoUpload1.dispose();
```

Inherited members (4)

| Member | Signature | Access |
| --- | --- | --- |
| `id` | `readonly id: string;` | Read-only |
| `name` | `readonly name: string;` | Read-only |

### `bindEvent`

method

```ts
bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;
```

### `emit`

method

```ts
emit(eventName: string, detail?: unknown): boolean;
```

## Events

Link methods in **Interaction**. [How to use events](https://webrad.atentor.com/docs/interactions).

### OnChange

[WebVideoUploadChangeEventDetail](https://webrad.atentor.com/docs/types#webvideouploadchangeeventdetail) in `event.detail`

Signature and example

```ts
import type { WebVideoUpload, WebVideoUploadChangeEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoUpload1Change(
    sender: WebVideoUpload,
    event: CustomEvent<WebVideoUploadChangeEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
  }
}
```

### OnProgress

[WebVideoUploadProgressEventDetail](https://webrad.atentor.com/docs/types#webvideouploadprogresseventdetail) in `event.detail` · `confirmedBytes`, `totalBytes`, `percentage`, `chunk`

Signature and example

```ts
import type { WebVideoUpload, WebVideoUploadProgressEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoUpload1Progress(
    sender: WebVideoUpload,
    event: CustomEvent<WebVideoUploadProgressEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { confirmedBytes, totalBytes, percentage, chunk } = event.detail;
    console.log(confirmedBytes, totalBytes, percentage, chunk);
  }
}
```

### OnStateChange

[WebVideoUploadStateEventDetail](https://webrad.atentor.com/docs/types#webvideouploadstateeventdetail) in `event.detail` · `previous`, `state`

Signature and example

```ts
import type { WebVideoUpload, WebVideoUploadStateEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoUpload1StateChange(
    sender: WebVideoUpload,
    event: CustomEvent<WebVideoUploadStateEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { previous, state } = event.detail;
    console.log(previous, state);
  }
}
```

### OnUploadComplete

[WebVideoUploadResult](https://webrad.atentor.com/docs/types#webvideouploadresult) in `event.detail`

Signature and example

```ts
import type { WebVideoUpload, WebVideoUploadResult } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoUpload1UploadComplete(
    sender: WebVideoUpload,
    event: CustomEvent<WebVideoUploadResult>,
  ): Promise<void> {
    console.log(event.detail);
  }
}
```

### OnProcessingProgress

[WebVideoUploadProcessingEventDetail](https://webrad.atentor.com/docs/types#webvideouploadprocessingeventdetail) in `event.detail` · `video`, `jobs`

Signature and example

```ts
import type { WebVideoUpload, WebVideoUploadProcessingEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoUpload1ProcessingProgress(
    sender: WebVideoUpload,
    event: CustomEvent<WebVideoUploadProcessingEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { video, jobs } = event.detail;
    console.log(video, jobs);
  }
}
```

### OnReady

[WebVideoUploadResult](https://webrad.atentor.com/docs/types#webvideouploadresult) in `event.detail`

Signature and example

```ts
import type { WebVideoUpload, WebVideoUploadResult } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoUpload1Ready(
    sender: WebVideoUpload,
    event: CustomEvent<WebVideoUploadResult>,
  ): Promise<void> {
    console.log(event.detail);
  }
}
```

### OnError

`Error` in `event.detail`

Signature and example

```ts
import type { WebVideoUpload } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoUpload1Error(
    sender: WebVideoUpload,
    event: CustomEvent<Error>,
  ): Promise<void> {
    Message(event.detail.message);
  }
}
```

### OnComplete

[WebVideoUploadCompleteEventDetail](https://webrad.atentor.com/docs/types#webvideouploadcompleteeventdetail) in `event.detail` · `operation`, `video`, `error`

Signature and example

```ts
import type { WebVideoUpload, WebVideoUploadCompleteEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async VideoUpload1Complete(
    sender: WebVideoUpload,
    event: CustomEvent<WebVideoUploadCompleteEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { operation, video, error } = event.detail;
    console.log(operation, video, error);
  }
}
```