npm package: @getfly-ui/file-upload
Description: FileUpload for getfly UI
Latest version: 0.0.3

# FileUpload component

![NPM License](https://img.shields.io/npm/l/%40getfly-ui%2Ffile-upload?style=for-the-badge)
![NPM Version](https://img.shields.io/npm/v/%40getfly-ui%2Ffile-upload?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/min/%40getfly-ui%2Ffile-upload?style=for-the-badge)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/%40getfly-ui%2Ffile-upload?style=for-the-badge)
![NPM Downloads](https://img.shields.io/npm/dm/%40getfly-ui%2Ffile-upload?style=for-the-badge)
![NPM Type Definitions](https://img.shields.io/npm/types/%40getfly-ui%2Ffile-upload?style=for-the-badge)

## How to use

```ts
import { FileUpload } from '@getfly-ui/file-upload';
```

OR

```ts
import { FileUpload } from 'getfly-ui';
```

# Props

## AttachmentUpload

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `title` | `string or undefined` | `"Attachments"` | Title displayed above the list. |
| `iconPrimary` | `enum` |  |  |
| `iconPrimaryColorTheme` | `enum` |  |  |
| `iconPrimaryColor` | `string or undefined` |  |  |
| `iconPrimarySize` | `number or undefined` |  |  |
| `titlePreset` | `enum` |  |  |
| `titleColorTheme` | `enum` |  |  |
| `titleColor` | `string or undefined` |  |  |
| `files` | `FileItem[] or undefined` | `[]` | List of attached files. |
| `fileNamePreset` | `enum` |  |  |
| `fileNameColorTheme` | `enum` |  |  |
| `textUpload` | `string or undefined` |  |  |
| `textUploadPreset` | `enum` |  |  |
| `textUploadColorTheme` | `enum` |  |  |
| `iconUpload` | `enum` |  |  |
| `iconUploadMore` | `enum` |  |  |
| `iconUploadColorTheme` | `enum` |  |  |
| `textUploadMore` | `string or undefined` |  |  |
| `textUploadMorePreset` | `enum` |  |  |
| `textUploadMoreColorTheme` | `enum` |  |  |
| `borderUploadColorTheme` | `enum` |  |  |
| `borderWidth` | `number or undefined` |  | Border width |
| `borderStyle` | `enum` |  | Border style |
| `iconUploadMoreSize` | `number or undefined` |  |  |
| `onUpload` | `(() => void) or undefined` |  | Callback fired when upload button is clicked. |
| `onDelete` | `((file: FileItem, index: number) => void) or undefined` |  | Callback fired when delete button is clicked on a file.
@param file The file object being deleted.
@param index The index of that file in the list. |


## FileFormatCard

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `files` | `FileItem[]` |  | List of files |
| `nameFilePreset` | `enum` |  |  |
| `nameFileColorTheme` | `enum` |  |  |
| `sizeFilePreset` | `enum` |  |  |
| `sizeFileColorTheme` | `enum` |  |  |
| `limit` | `number or undefined` |  | Limit number of preview files (for "+25" etc.) |
| `onDelete` | `((file: FileItem, index: number) => void) or undefined` |  | Callback when file deleted |
| `onClick` | `((file: FileItem, index: number) => void) or undefined` |  | Callback when file clicked |


## ImageUpload

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `title` | `string or undefined` | `"QR Payment"` | Title displayed at the top of the QR/image section. |
| `textUpload` | `string or undefined` |  |  |
| `textUploadPreset` | `enum` |  |  |
| `textUploadColorTheme` | `enum` |  |  |
| `titlePreset` | `enum` |  |  |
| `titleColorTheme` | `enum` |  |  |
| `iconLeft` | `enum` |  |  |
| `iconLeftColorTheme` | `enum` |  |  |
| `iconLeftColor` | `string or undefined` |  |  |
| `iconLeftSize` | `number or undefined` |  |  |
| `iconRight` | `enum` |  |  |
| `iconRightColorTheme` | `enum` |  |  |
| `iconRightColor` | `string or undefined` |  |  |
| `iconRightSize` | `number or undefined` |  |  |
| `buttonColorTheme` | `enum` |  |  |
| `buttonColor` | `string or undefined` |  |  |
| `imageUrl` | `string or undefined` |  | URL of the uploaded image.
@example "https://api.qrserver.com/v1/create-qr-code/?data=example" |
| `borderWidth` | `number or undefined` |  | Border width |
| `borderStyle` | `enum` |  | Border style |
| `onUpload` | `(() => void) or undefined` |  | Triggered when clicking the upload button. |
| `onDelete` | `(() => void) or undefined` |  | Triggered when clicking the delete (x) button. |
| `onDownload` | `((type: "image" or "pdf") => void) or undefined` |  | Triggered when downloading the image or PDF file.
@param type Determines whether downloading as image or PDF.
@example onDownload?.("pdf") |
| `onSend` | `((method: "email" or "sms") => void) or undefined` |  | Triggered when sending the image via another channel.
@param method The channel used to send (email or sms).
@example onSend?.("email") |
| `actions` | `ImageUploadAction[] or undefined` |  | Custom list of action buttons displayed next to the uploaded image.
If provided, this overrides `onDownload` and `onSend` defaults.
@example actions={[
  { label: "Lưu ảnh", icon: "download_outline", onClick: () => {} },
  { label: "Gửi SMS", icon: "chat_outline", onClick: () => {} },
]} |