Docs
Attachments
Attachments
Display the collection of attachment information.
Installation
pnpm dlx shadcn@latest add https://ui.aoian.chat/r/attachments
Usage
import {
Attachments,
} from "@/components/aoian-ui/attachments/attachments" <Attachments />Examples
Drag anywhere on screen
Enable the full-screen drag-and-drop upload function, using the fullScreenDrop property.
Full screen drop:
File Card
A single file card, used in some display scenarios.
excel-file.xlsx
109 KB
word-file.docx
106 MB
image-file.png
1 KB
pdf-file.pdf
Upload failed
ppt-file.pptx
video-file.mp4
audio-file.mp3
zip-file.zip
markdown-file.md
python-file.py
Image mode
Add a Mode property to the FileCard component to control the display mode.
You need to set the url property.
File card with sender
The file cards can be used in conjunction with the sending box.
excel-file.xlsx
109 KB
word-file.docx
106 MB
image-file.png
1 KB
pdf-file.pdf
Upload failed
ppt-file.pptx
video-file.mp4
audio-file.mp3
zip-file.zip
markdown-file.md
python-file.py
UploadThing
Use it together with UploadThing.
Props
Attachments
| Prop | Type | Default | Description |
|---|---|---|---|
accept | DropzoneProps["accept"] | image/* | File types that can be accepted. See input accept Attribute |
maxSize | DropzoneProps["maxSize"] | 1024 * 1024 * 2 | The maximum size of each file |
maxFileCount | DropzoneProps["maxFiles"] | 1 | Limit the number of uploaded files. Will replace current one when maxFileCount is 1 |
multiple | boolean | false | Whether to support selected multiple files |
disabled | boolean | false | Disable upload button |
fullScreenDrop | boolean | false | enable full - screen drag |
onFileChange | (acceptedFiles: File[], rejectedFiles: FileRejection[]) => void | - | A callback function, can be executed when uploading state is changing. |
FileListBox
| Prop | Type | Default | Description |
|---|---|---|---|
items | FileCardItem[] | - | File list. Check the FileCardItem for details. |
mode | "image" | "file" | file | Which display mode should be adopted |
onDelete | (uid?: string) => void | - | Deletion callback function |
FileCard
| Prop | Type | Default | Description |
|---|---|---|---|
item | FileCardItem | - | File list. Check the FileCardItem for details. |
mode | "image" | "file" | file | Which display mode should be adopted |
onDelete | (uid?: string) => void | - | Deletion callback function |
FileCardItem
type FileCardItem = {
uid?: string
name: string
size: number
percent: number
url?: string
message?: string
contentType?: string
status: "error" | "done" | "uploading" | "removed"
}