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