FileUpload component

How to use

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

OR

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: () => {} }, ]} |