FileUpload
File selection and transfers with progress.
Text and Markdown example
1function Example() {
2 const [controller] = useState(() => new UploadController({
3 endpoint: "/api/uploads",
4 autoStart: false
5 }));
6 useEffect(() => () => { void controller.dispose(); }, [controller]);
7 return <div><Toaster /><FileUpload variant="advanced" controller={controller} locale="en" /><p style={{fontSize:12,marginTop:16}}>Select, edit and remove files locally. To upload them, connect a Tus endpoint at /api/uploads.</p></div>;
8}How to use it
Create a stable UploadController and release its resources on unmount. Simple mode supports custom transport; advanced uses a Tus endpoint and confirms uploads from the dashboard.
Opening the modal and selecting, editing or removing files do not require a server. Advanced mode does not support createTask: it uses Tus transport and starts transfers only when Upload is pressed. /api/uploads is an example path, not a configured server. Remote sources require Companion and its server credentials.
Import
1import { FileUpload, FileUploadStatus } from "@kivora/nextjs";Interactive examples run inside a component with "use client". The playground's Copy button includes the imports needed for the current example.
API reference 0.2.0
Types from the installed published version, including component properties and common HTML attributes. “Optional” does not imply a default value; omitting a property lets the component decide.
| Property | Type | Description |
|---|---|---|
controllerRequired | UploadController | Stable instance managing the session and its resources. |
accept | string | Accepted file types. |
camera | boolean | Enable supported camera sources. |
dashboard | UploadDashboardOptions | Configure advanced dashboard sources and options. |
locale | string | Localization in the format expected by the component. |
messages | Partial<{ uploadedFiles: string; startUpload: string; remove: string; clearAll: string; reviewHint: string; grid: string; list: string; retry: string; edit: string; addMore: string; choose: string; title: string; sources: string; files: string; camera: string; hint: string; drop: string; back: string; close: string; open: string; loading: string; cancel: string; photo: string; cameraPreview: string; cameraError: string; captureError: string; selectionError: string; ready: string; uploading: string; paused: string; success: string; error: string; canceled: string; upload: string; dismiss: string; preview: string; }> | Localized messages replacing the defaults. |
showStatus | boolean | Show built-in upload status. |
sources | FileUploadSource[] | Configures sources. The type describes the supported values and structure. |
variant | "simple" | "advanced" | Visual variant. Use a value supported by this component. |
Subcomponents and composition
Review each component's properties and published declaration. Native and accessibility attributes are inherited from the element specified by its type.
FileUpload9 properties
1declare function FileUpload(props: FileUploadProps): React.JSX.Element;FileUploadStatus3 properties
| Property | Type | Description |
|---|---|---|
controllerRequired | UploadController | Stable instance managing the session and its resources. |
locale | string | Localization in the format expected by the component. |
messages | Partial<{ uploadedFiles: string; startUpload: string; remove: string; clearAll: string; reviewHint: string; grid: string; list: string; retry: string; edit: string; addMore: string; choose: string; title: string; sources: string; files: string; camera: string; hint: string; drop: string; back: string; close: string; open: string; loading: string; cancel: string; photo: string; cameraPreview: string; cameraError: string; captureError: string; selectionError: string; ready: string; uploading: string; paused: string; success: string; error: string; canceled: string; upload: string; dismiss: string; preview: string; }> | Localized messages replacing the defaults. |
1declare function FileUploadStatus({ controller, locale, messages }: {
2 controller: UploadController;
3} & UploadLocaleOptions): null;