@highlight-ui/file-management v4.2.7
@highlight-ui/file-management
Installation
Using npm:
npm install @highlight-ui/file-management
Using yarn:
yarn add @highlight-ui/file-management
Using pnpm:
pnpm install @highlight-ui/file-management
In your (S)CSS file:
@import url('@highlight-ui/file-management');
Once the package is installed, you can import the library:
import { FileUploader, FileList } from '@highlight-ui/file-management';
Usage
import React, { useState } from 'react';
import { FileUploader, FileList } from '@highlight-ui/file-management';
export default function FileManagementExample() {
return (
<>
<FileUploader
disabled={false}
description="Drag and drop files here or click to upload"
maxFileSize={20840}
onDrop={handleDrop}
onDragOverText="Drop here!"
showIcon
title="Primary text"
image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAoCAYAAABXRRJPAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVSSURBVHgB7VhbTCNVGP6nF6il7EyRW7HQ4Q4LhVm5hIuRJsSoUeM2PK36sNEnTXzkwRgN2RfxQdf4SEwkPviwWSOo8XGtGldEIGVBlO4uHYgWdrO47bZAodMZzz+2TYfOwCoYJxu+ZDLn/Gdy5nznP//tAJxAH6AOGuzp6WEFQWC1xmdmZnygA5i0Brq6urhV7+sXhYfL+aTZwtVbBfKxGLYKuzyOLy/dmHeXu5iFrz6bgGOEx+OBeDzOJhIJrr+/31VWVsYlk0lucnJyXJKkiCiKYfKZz+/3hw8lceuJl863P9bpGXOswPr6umKs0GaFWwP98MKnpX74FySyF0q6DEVRXG1trctisXBut5utqKgAm80GhYWF8veNjY3Q2to64vV6wysrK8GhoSGeiP2HkpDyLEyVRYRYdAfWNzaVg+UAtEMESkywnZ2dHq05yK6xZIF0srCouvl0Ez3Q1sLSNM0WFxczdrud2b/Yg4DfI+GamhqXwWDg7osE4us7+VDlbABoagDaJEE0tgP5G0HgN7ZgLbgILqOBKT/36seO2zdgJbTBOu00WEvKobnKCbTZAA6HQ95FfB8nent7mbm5OTiUBLUXD4cFCt7lC+S+Ib4Ftl8X4dkyK7hPMfDcI3byAESjUbbz3NP3vaNaCAQC0NDQoDmOc5N/4Zuqrq52ZY9pkjDsbmcM5/n5L+CtoafA1vMk4BE4KtQWjJtwEBGUo20imZKSEjZ7zAAaMN8O8en2K71t8iT/lMDs7KyqPBQK5chwbjV5Grj49DixK4UmNElkY21HOHDc5/OpylH9/wUKCgrY7L58nDo6Os4SH8xkD1BLV7ndn5r4ZJ6VvbK3DnZhR3NSPAZqCz6KHDVD1gVa4DiOSccKE+mwJJjwNy9cZsFo/Fzl+/B8gSncWGFj04LV7b81gxqKCCJEHj2T+VihtWa3+gqa3fhzfFjy8CkpQ512++usZgbTiLrQH/wwzJ5VI0LcLLpXJjUHmAgbXtYERXk0chDm5pbAvHM9DMcIJvVAiogMSQLP9a2E3A4YSzl28WeFNlA7qKmioiLGZDK1Q2oDMjYhGQzjoDMs3Eso+hhv8MgxDBMhxz+z5zIJElXD9W96eUipRy/Iq3crUp50rCDI9U4kU/UbjUaPBPAB6AizRlrTTRM7zrRlEmjl6J2IflZBR4gkRNg0WBSyWCyGL4UnVcSJ6DPV46AjkJMBP/wZV8gwshMw9fX1GSIZEiTjnEhlpDzoCOYGt+JIoYdCOyktLc0lkQ4ckihOgo7wZYRSGDd6qOXlZaqvr8+FAQ9liuMk24Vk8IGOgHYRlPIy/XSmTIokdLEsthUk0NU6Lr0XBB0B7WJ+z5yTprS1tbEk4MmuVkECC3/b0tUzJHL6QUcInHLKQW4fHofURUdOFovaIIbxLegIPOTD73cj+8X2wcHBAWzkkCD1K58fCvpARwgTu7gW2ZPbxG4zBVJ3dzeNspzKjtxA8DUfvQG/jVwCPeG7bSOMjY1l+sTVStPT0yy2VRNXzGoDFy5fhKwM8/9GlcUIeW+/SGr9bRgdHf2mqalpwul0foLHX7WyQ1ert3ixFk/CNtuCTWl4ePjlysrKD2X7BY3ylERv36mF712gM+xUt6jKVUlgocTMXZkHnSHW3KUq17woeCj4C8YKXdUXCboURIs1R65JAs+b+d4dXdUXxA1JW3XtORureXmG0bvr/dfaV8+PjAgFtJcit9GkhGUUbwz7ohghwYWGo0PKtFJzUoIg1zeUJN6lxGTYFNu8Vrj4o5iE/dwOAGaJ5KaaAZ1hamqKhxOc4AQPNv4CL98fSS/xcLcAAAAASUVORK5CYII="
/>
<FileList files={files} />
</>
);
}
Props 📜
FileUploader
Prop | Type | Required | Default | Description |
---|---|---|---|---|
description | string | Yes | Allows providing the description message which is shown on the uploader | |
onDragOverText | string | Yes | Allows providing a text to be shown when dragging over the uploader | |
onDrop | (acceptedFiles: File[], rejectedFiles: FileRejection[]) => void | Yes | Allows providing a callback for when drop event occurs | |
accept | string | No | Allows providing a list of supported file extensions | |
multiple | boolean | No | true | Allows user to select multiple files or restrict it to only single file |
className | string | No | Allows providing a custom class name | |
disabled | boolean | No | false | Allows disabling the uploader |
image | string | No | Allows providing an image for the uploader, this value will be passed to src attribute of the image tag | |
maxFileSize | number | No | Allows providing the maximum file size supported by the uploader | |
showIcon | boolean | No | true | Allows showing or hiding the image |
title | string | No | Allows providing a title to be shown for the uploader | |
onDragEnter | () => void | No | Allows providing a callback for when dragenter event occurs | |
onDragLeave | () => void | No | Allows providing a callback for when dragleave event occurs | |
onDragOver | () => void | No | Allows providing a callback for when dragover event occurs |
FileList
Prop | Type | Required | Default | Description |
---|---|---|---|---|
files | FileListItem[] | Yes | A list of files. See FileListItem definition below. | |
className | string | No | Allows providing a custom class name | |
onDelete | (id) => void | No | Allows providing a callback for when deleting a file | |
variant | 'default', 'selectable' | No | default | The FileList variant. When selectable , users can provide addition props selectedItems and onSelect |
FileListItem
Prop | Type | Required | Default | Description |
---|---|---|---|---|
id | string | Yes | List item unique id | |
filename | string | Yes | List item file name | |
canDelete | boolean | No | false | Can this item be deleted |
downloadUrl | string | No | The download url of the list item | |
previewUrl | string | No | The preview url of the list item | |
validationStatus | "valid", "validating", "invalid", "warning" | No | The validation status of the list item | |
validationMessage | string | No | The validation message of the list item |
Contributing 🖌️
Please visit personio.design for usage guidelines and visual examples.
If you're interested in contributing, please visit our contribution page.
2 months ago
3 months ago
5 months ago
5 months ago
5 months ago
9 months ago
9 months ago
9 months ago
7 months ago
7 months ago
10 months ago
7 months ago
10 months ago
10 months ago
10 months ago
7 months ago
10 months ago
7 months ago
7 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
7 months ago
9 months ago
9 months ago
8 months ago
8 months ago
10 months ago
10 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
8 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago