Source: https://app-studio-6167b.web.app/docs/Uploader

@app-studio/components

# Upload

A versatile file upload component with support for images, videos, and files, featuring drag-and-drop, preview, progress tracking, and validation.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader.tsx)

## Import

```ts
import { Uploader } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Vertical } from 'app-studio';
import { Uploader } from '@app-studio/components';

export const DefaultUploader = () => (
  <Vertical gap={12} width="100%">
    <Uploader
      text="Tap to choose a file"
      onFileSelect={(file) => console.log('selected', file?.name)}
    />
  </Vertical>
);
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Uploader**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `accept` | `string` | `'*/*'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L6) |
| `maxSize` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L8) |
| `onFileSelect` | `((file: File) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L10) |
| `onMultipleFileSelect` | `((files: File[]) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L12) |
| `validateFile` | `((file: File) => string \| null)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L14) |
| `onError` | `((error: string) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L16) |
| `thumbnail` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L18) |
| `multiple` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L20) |
| `containerProps` | `ViewProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L40) |
| `errorMessageProps` | `TextProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L42) |
| `progressProps` | `ViewProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L44) |
| `videoProps` | `ViewProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L46) |
| `imageProps` | `ImageProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L48) |
| `iconProps` | `IconProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L50) |
| `textProps` | `TextProps` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L52) |
| `renderVideo` | `((props: any) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L54) |
| `renderText` | `((props: any) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L56) |
| `renderImage` | `((props: any) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L58) |
| `renderError` | `((props: any) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L60) |
| `renderFile` | `((props: any) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L62) |
| `renderProgress` | `((props: any) => React.ReactNode)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L64) |
| `previewUrl` | `string \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L66) |
| `thumbnailUrl` | `string \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L68) |
| `errorMessage` | `string \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L70) |
| `isLoading` | `boolean` | `false` | Displays the loading state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L72) |
| `icon` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Icon rendered alongside the content.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L74) |
| `text` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L78) |
| `progress` | `number` | `0` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L82) |
| `fileType` | `"video" \| "image" \| "file"` `"video"``"image"``"file"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L84) |
| `handleClick` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L86) |
| `views` | `{ container?: ViewProps; view?: ViewProps; image?: ImageProps; horizontal?: ViewProps; text?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Uploader/Uploader/Uploader.props.ts#L96) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.