@highlight-ui/file-management

Installation

Using npm:

``bash
npm install @highlight-ui/file-management
`

Using yarn:

`bash
yarn add @highlight-ui/file-management
`

Using pnpm:

`bash
pnpm install @highlight-ui/file-management
`

In your (S)CSS file:

`scss
@import url('@highlight-ui/file-management');
`

Once the package is installed, you can import the library:

`ts
import { FileUploader, FileList } from '@highlight-ui/file-management';
`

Usage

`tsx
import React, { useState } from 'react';
import { FileUploader, FileList } from '@highlight-ui/file-management';

export default function FileManagementExample() {
return (
<>
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="
/>


);
}
`

Props 📜

$3

| 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 |

$3

| 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 |

$3

| 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.