This is file management package consisting of file uploader and file list
npm install @highlight-ui/file-management


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';
`tsx
import React, { useState } from 'react';
import { FileUploader, FileList } from '@highlight-ui/file-management';
export default function FileManagementExample() {
return (
<>
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="
/>
>
);
}
`
| 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 |
| 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 |
| 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 |
Please visit personio.design for usage guidelines and visual examples.
If you're interested in contributing, please visit our contribution page.