@highlight-ui/file-management v4.2.10

@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

FileList

FileListItem

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.