File
A file component that displays a single file with its name, size, and type.
example.txt
TXT • 12.06 KB
example.mp4
MP4 • 12.06 KB
example.pdf
PDF • 12.06 KB
example.png
PNG • 12.06 KB
The File component displays a single file, rendering its filename, size and an icon based on the file type.
The FileDrop component uses this component to display the files that have been uploaded.
Usage
javascript
1import File from "@/components/atoms/File"; 2 3<File 4 file={{ 5 name: "example.txt", 6 size: 12345, 7 type: "text/plain", 8 }} 9/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| file | object | - | The file to display. |
| name | string | - | The name of the file. |
| onRemove | function | - | The function to call when the remove button is clicked. |
| showRemoveButton | boolean | false | If true, the remove button is displayed. |
| color | string | "bg" | The base color (use tailwind.config). |
| variant | "soft" | "solid" | "solid" | The variant of the component. |
| iconColor | string | "primary" | The color of the file icon (use tailwind.config). |
| borderRadius | string | "lg" | The border radius of the component. |
| border | boolean | true | If true, a border is displayed around the component. |
| borderColor | string | "gray" | The base color (use tailwind.config). |
| showFileType | boolean | true | If true, the file type is displayed. |
| showFileSize | boolean | true | If true, the file size is displayed. |
| className | string | "" | Additional Tailwind utility classes. |
| ...props | object | - | Any other valid HTML attributes. |
Examples
Basic File
example.txt
TXT • 12.06 KB
Customized Files
example.txt
TXT • 12.06 KB
image.png
PNG • 96.45 KB
Different File Types
text.txt
TXT • 12.06 KB
image.png
PNG • 96.45 KB
video.mp4
MP4 • 1205.63 KB
audio.mp3
MP3 • 120.56 KB
document.pdf
PDF • 1205.63 KB
archive.zip
ZIP • 1205.63 KB
spreadsheet.xlsx
XLSX • 1205.63 KB