npm package: @highlight-ui/file-management
Description: This is file management package consisting of file uploader and file list
Author: Personio GmbH & Co. KG
Latest version: 4.2.15

[![npm](https://img.shields.io/npm/v/@highlight-ui/file-management)](https://www.npmjs.com/package/@highlight-ui/file-management)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/925fd4-file-management/b/406226)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/patterns-filemanagement--file-uploader-and-file-list)

# @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 (
    <>
      <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](https://www.personio.design/40d648a47/v/0/p/925fd4-file-management/b/406226) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).