Dropzone

CSS dependencies

@import url("@uxf/ui/icon/icon.css");
@import url("@uxf/ui/dropzone/dropzone.css");

The Dropzone component is split into two parts:

  1. <Dropzone /> (DropzoneInput): This handles file input via drag-and-drop or file selection. It manages file upload and validation.
  2. <Dropzone.List />: Displays the uploaded files and allows managing them (e.g., removing files) and provides the upload status of files. It works with the same value and onChange properties as the main Dropzone component to ensure synchronization between the uploaded files and their display.

getDropzoneState

This function returns the current status of the uploaded files. It can be used to determine whether the Dropzone component should be disabled or not.

The status can be one of the following: "ERROR" | "OK" | "UPLOADING"

const { status } = getDropzoneState(files);

Component Overview

How it works:

  • value and onChange: Both components share the same value, which represents the list of uploaded files, and onChange, which updates that list. This ensures that the files selected for upload are consistent with what is displayed in the file list.
  • We can use the getDropzoneState function to determine the current status of the uploaded files. This status can be used to disable the Dropzone component while files are being uploaded.
  • We can use the onDropRejected prop to handle rejected files. This prop is called when the user tries to upload files that exceed the size limit or the maximum number of files allowed. We can use this prop to display an error message to the user.

Example of handling rejected files:

const handleDropRejectedFiles = async (fileRejections: FileRejection[]) => {
       const bigFiles = fileRejections.filter((rejection) =>
           rejection.errors.some((error) => error.code === ErrorCode.FileTooLarge),
       );
       const tooManyFiles = fileRejections.filter((rejection) =>
           rejection.errors.some((error) => error.code === ErrorCode.TooManyFiles),
       );
       if (isNotEmpty(bigFiles)) {
           alert(
               `Tyto soubory jsou příliš velké a nebyly nahrány: ${bigFiles.map((file) => file.file.name).join(", ")}`,
           );
       }
       if (isNotEmpty(tooManyFiles)) {
           alert(`Bylo nahráno příliš mnoho souborů. Maximální počet souborů je ${fileCountLimit}`);
       }
   };

Basic Example:

This example shows how to use the Dropzone component with useState to manage file uploads:

import React, {useState} from "react";
import {Dropzone} from "./path/to/dropzone";
import {DropzoneFile} from "./path/to/dropzone/types";
import {uploadFile} from "@uxf/ui/utils/mocks/upload-file.mock";

function BasicExample() {
    // Store uploaded files in state
    const [files, setFiles] = useState<DropzoneFile[]>([]);

    // Get the current status of uploaded files
    const { status } = getDropzoneState(files);

    // Confirm file removal
    const removeConfirmHandler = (): Promise<boolean> => Promise.resolve(confirm("Do you want to delete the file?"));
    
    // Handle upload errors
    const onUploadError = (error: unknown) => {
        console.error(error);
    };

    return (
        <div>
            {/* Dropzone component for uploading files */}
            <Dropzone
                isDisabled={status === "UPLOADING"}
                onChange={setFiles}
                onUploadError={onUploadError}
                onUploadFile={uploadFile}
                value={files}
            />

            {/* List of uploaded files */}
            <Dropzone.List
                onChange={setFiles}
                removeConfirmHandler={removeConfirmHandler}
                value={files}
            />
        </div>
    );
};

Advanced Example:

This example shows how to use the Dropzone component with limited file types and sizes:

Default
Open in new tab