# File Upload

Select a file and upload it to RestGO Storage.

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

WebFileUpload · Nonvisual · Nonvisual · 5 events

## Quick start

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

```ts
// Run from a user click.
const selection = await FileUpload1.OpenFile();
if (!selection) return;
try {
  const uploaded = await FileUpload1.SendToRestGO({ isPublic: false });
  Message(uploaded.id);
} catch (error) {
  Message(error instanceof Error ? error.message : String(error));
}
```

OpenFile() selects; SendToRestGO() uploads. The browser does not provide an absolute path and selection.path may be null.

- Configure accept and isPublic in the Inspector.
- Call OpenFile() from a click; cancellation returns null. selectedFile provides the chosen File.
- SendToRestGO() requires configured integration and a user session. Clear() clears the selection.
- OnChange receives the selection; OnProgress receives progress; OnSuccess, OnError, and OnComplete track the upload.
- Private files require authenticated downloads; generating a URL does not change isPublic.

## 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 file types · Behavior — Native file chooser filter, such as image/* or .pdf,.txt. Empty accepts all file types. | `string` | `""` | accept |
| `enabled` — Enabled · Behavior | `boolean` | `true` | enabled |
| `isPublic` — Public file · Storage — Default visibility when uploading. Private files require authorized access; upload options can override this value. | `boolean` | `false` | isPublic |

## API in code

| Member | Signature | Access |
| --- | --- | --- |
| `accept` | `accept: string;` | Read and write |
| `isPublic` | `isPublic: boolean;` | Read and write |
| `enabled` | `enabled: boolean;` | Read and write |
| `selectedFile` | `readonly selectedFile: File \| null;` | Read-only |
| `selection` | `readonly selection: WebFileUploadSelection \| null;` | Read-only |
| `fileName` | `readonly fileName: string;` | Read-only |
| `uploading` | `readonly uploading: boolean;` | Read-only |
| `progress` | `readonly progress: number \| null;` | Read-only |
| `result` | `readonly result: WebFileUploadResult \| null;` | Read-only |
| `lastError` | `readonly lastError: Error \| null;` | Read-only |
| `onChange` | `set onChange(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onSuccess` | `set onSuccess(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 |
| `onProgress` | `set onProgress(handler: WebComponentEventHandler<this> \| null);` | Read and write |

### `OpenFile`

method

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

Example

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

### `SendToRestGO`

method

```ts
SendToRestGO(options?: WebFileUploadOptions): Promise<WebFileUploadResult>;
```

Example

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

### `Clear`

method

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

Example

```ts
FileUpload1.Clear();
```

Inherited members (5)

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

### `dispose`

method

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

## Events

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

### OnChange

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

Signature and example

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

### OnSuccess

[WebFileUploadResult](https://webrad.atentor.com/docs/types#webfileuploadresult) in `event.detail` · `id`, `downloadUrl`, `url`, `isPublic`

Signature and example

```ts
import type { WebFileUpload, WebFileUploadResult } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async FileUpload1Success(
    sender: WebFileUpload,
    event: CustomEvent<WebFileUploadResult>,
  ): Promise<void> {
    console.log(event.detail);
    const { id, downloadUrl, url, isPublic } = event.detail;
    console.log(id, downloadUrl, url, isPublic);
  }
}
```

### OnProgress

[WebFileUploadProgressEventDetail](https://webrad.atentor.com/docs/types#webfileuploadprogresseventdetail) in `event.detail` · `percentage`, `loaded`, `total`, `lengthComputable`

Signature and example

```ts
import type { WebFileUpload, WebFileUploadProgressEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async FileUpload1Progress(
    sender: WebFileUpload,
    event: CustomEvent<WebFileUploadProgressEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { percentage, loaded, total, lengthComputable } = event.detail;
    console.log(percentage, loaded, total, lengthComputable);
  }
}
```

### OnError

`Error` in `event.detail`

Signature and example

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

### OnComplete

[WebFileUploadCompleteEventDetail](https://webrad.atentor.com/docs/types#webfileuploadcompleteeventdetail) in `event.detail` · `result`, `error`

Signature and example

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