# FileUpload

File selection and transfers with progress.

## 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


```tsx
import { FileUpload, FileUploadStatus } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
function Example() {
 const [controller] = useState(() => new UploadController({
   endpoint: "/api/uploads",
   autoStart: false
 }));
 useEffect(() => () => { void controller.dispose(); }, [controller]);
 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>;
}
```


## API: FileUpload


```typescript
declare function FileUpload(props: FileUploadProps): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| controller | UploadController | Yes | Stable instance managing the session and its resources. |
| accept | string | No | Accepted file types. |
| camera | boolean | No | Enable supported camera sources. |
| dashboard | UploadDashboardOptions | No | Configure advanced dashboard sources and options. |
| locale | string | No | 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; }> | No | Localized messages replacing the defaults. |
| showStatus | boolean | No | Show built-in upload status. |
| sources | FileUploadSource[] | No | See the published type. |
| variant | "simple" \| "advanced" | No | Visual variant. Use a value supported by this component. |

## API: FileUploadStatus


```typescript
declare function FileUploadStatus({ controller, locale, messages }: {
    controller: UploadController;
} & UploadLocaleOptions): null;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| controller | UploadController | Yes | Stable instance managing the session and its resources. |
| locale | string | No | 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; }> | No | Localized messages replacing the defaults. |

Source: https://kivora.pro/docs/componentes/file-upload