WEBRAD / TECHNICAL REFERENCE

File Upload

Select a file and upload it to RestGO Storage.

WebFileUploadNonvisualNonvisual5 events

Quick start

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

// 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));
}

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 · BehaviorNative 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 · StorageDefault 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

OpenFile(): Promise<WebFileUploadSelection | null>;

Example

await FileUpload1.OpenFile();

`SendToRestGO`

method

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

Example

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

`Clear`

method

Clear(): void;

Example

FileUpload1.Clear();

Inherited members (5)

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

`bindEvent`

method

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

`emit`

method

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

`dispose`

method

dispose(): void;

Events

Link methods in Interaction. How to use events.

OnChange

WebFileUploadChangeEventDetail in event.detail

Signature and example

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 in event.detail · id, downloadUrl, url, isPublic

Signature and example

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 in event.detail · percentage, loaded, total, lengthComputable

Signature and example

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

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 in event.detail · result, error

Signature and example

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);
  }
}