FileDropZone

ui formuploadinteraction

Wrappt beliebige Children und nimmt darauf abgelegte Dateien entgegen (MIME-Filter via accept). Beim Drag-Over erscheint ein dezenter Overlay-Hinweis. Nutzt den useFileDrop-Hook.

Dateien in den Bereich ziehen …

Abhängigkeiten

use-file-drop tokens

Barrierefreiheit

Beispiele

Bilder ablegen

<FileDropZone accept="image/*" onFiles={(files) => upload(files)} overlayLabel="Bilder ablegen">
  <Gallery />
</FileDropZone>

Genutzte Tokens · 7

--accent--elev-raised--fg--radius-md--space-3--space-5--surface

Quelldateien

components/ui/FileDropZone.tsx tsx

import type { ReactNode } from 'react';
import { useFileDrop } from '../../hooks/useFileDrop';
import styles from './FileDropZone.module.css';

interface Props {
  accept?: string;
  onFiles: (files: File[]) => void;
  disabled?: boolean;
  className?: string;
  children: ReactNode;
  /** Optionale Hinweis-Zeile, die beim Drag-Over als Overlay angezeigt wird. */
  overlayLabel?: string;
}

/** Wrappt beliebige Children und nimmt darauf abgelegte Dateien entgegen.
 *  Beim Drag-Over wird ein dezenter Overlay-Hint eingeblendet. */
export function FileDropZone({
  accept,
  onFiles,
  disabled,
  className,
  children,
  overlayLabel = 'Dateien hier ablegen',
}: Props) {
  const { dragOver, dropHandlers } = useFileDrop({ accept, onFiles, disabled });
  const cls = [styles.root, dragOver ? styles.active : '', className].filter(Boolean).join(' ');

  return (
    <div className={cls} {...dropHandlers}>
      {children}
      {dragOver && (
        <div className={styles.overlay} aria-hidden>
          <div className={styles.overlayBox}>{overlayLabel}</div>
        </div>
      )}
    </div>
  );
}

components/ui/FileDropZone.module.css css

.root {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: color-mix(in oklab, var(--accent), transparent 88%);
  border: 2px dashed var(--accent);
  border-radius: var(--radius-md);
  z-index: 10;
}

.overlayBox {
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--fg);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 500;
  box-shadow: var(--elev-raised);
}

Holen

# MCP (Claude Code / Cursor)
get_component({ name: "file-drop-zone" })

# Registry direkt
https://www.ekklesi.tools/design/registry/components/file-drop-zone.json