Dropzone

Practical React example

Start with a single PNG or JPEG attachment. Show an error beside the control when selection is rejected, then let the user decide when to submit the accepted file.

A typed image selector with a visible error state

"use client";

import { useState } from "react";
import {
  Dropzone, DropzoneContent, DropzoneEmptyState,
  type DropzoneProps,
} from "@/components/kibo-ui/dropzone";

export function ImageAttachment() {
  const [files, setFiles] = useState<File[] | undefined>();
  const [error, setError] = useState<string | null>(null);
  const handleDrop: NonNullable<DropzoneProps["onDrop"]> = (acceptedFiles) => {
    setFiles(acceptedFiles);
    setError(null);
  };

  return (
    <section aria-labelledby="attachment-label">
      <h3 id="attachment-label">Choose a PNG or JPEG image, up to 5 MiB</h3>
      <Dropzone
        accept={{ "image/png": [".png"], "image/jpeg": [".jpg", ".jpeg"] }}
        maxFiles={1}
        maxSize={5 * 1024 * 1024}
        src={files}
        onDrop={handleDrop}
        onError={(reason) => setError(reason.message)}
      >
        <DropzoneEmptyState />
        <DropzoneContent />
      </Dropzone>
      <p id="attachment-error" role="status">{error}</p>
    </section>
  );
}

The exported callback type carries File[], FileRejection[] and DropEvent. This example uses the accepted files only. Start src as undefined: even an empty array counts as selected content in the imported empty-state logic.

Customization

accept / maxSize / minSize

Use a MIME-type-to-extension map and size limits in bytes. These improve client selection feedback; they cannot verify file contents or authorize uploads.

maxFiles / multiple

maxFiles defaults to one. For multiple selection, explicitly set multiple={true} and a bounded maxFiles value that matches your product.

src / onDrop / onError

Keep accepted files in application state and pass them back through src. In this source, any rejection calls onError with the first rejection message and returns before onDrop, including mixed accepted/rejected drops.

disabled

Disable selection during an upload or other busy state. The UI does not start an upload or provide upload progress by itself.

Integration notes

• Validate size, actual content type, authorization and storage destination on the server before accepting an upload. Browser MIME types and filenames are untrusted input.
• Keep the existing selection visible when a replacement is rejected. The example stores error messages as text, so React escapes them rather than rendering HTML.
• If you add an image preview with URL.createObjectURL, revoke the old URL when the selection changes and on unmount. The example above displays filenames without creating object URLs.

Component source: Kibo UI documentation ↗. These examples describe the version imported into Rendyn. Upstream APIs may have changed; retain the source licence notices when adapting the code.