components/drop-zone/drop-zone.react.tsx

Functions

Imports

It imports components/drop-zone/drop-zone.ts. Imported by components/media-library/media-library.react.tsx.

Source

1import { useEffect, useId, useRef, useState, type ReactNode } from "react";
2import { acceptedText, dragHasFiles, formatBytes, rejectedLead, setInputFiles, validateFiles, type Rejection } from "./drop-zone.ts";
3
4export interface DropZoneProps {
5  // The same list an input's accept attribute takes: "image/*,.pdf".
6  accept?: string;
7  // The largest file, in bytes.
8  maxBytes?: number;
9  // The most files taken at once. A zone without `multiple` takes one.
10  maxFiles?: number;
11  multiple?: boolean;
12  // The input's name, so a form posts the accepted files.
13  name?: string;
14  disabled?: boolean;
15  // "page": a drag of files anywhere over the window is taken, with a full-window panel.
16  scope?: "zone" | "page";
17  // Files pasted from the clipboard are taken too.
18  paste?: boolean;
19  // The idle title ("Drop files here, or browse" by default) and the line of rules under it.
20  title?: ReactNode;
21  hint?: ReactNode;
22  // Called with the files that passed, and again with the files that did not.
23  onAccepted?: (files: File[], rejected: Rejection[]) => void;
24  onRejected?: (rejected: Rejection[], accepted: File[]) => void;
25  id?: string;
26}
27
28const CRIT = "M5 1h6l4 4v6l-4 4H5l-4-4V5zM7.2 4h1.6v5H7.2zM7.2 10.4h1.6V12H7.2z";
29
30export function DropZone({ accept, maxBytes, maxFiles, multiple = false, name, disabled, scope = "zone", paste, title, hint, onAccepted, onRejected, id }: DropZoneProps) {
31  const own = useId();
32  const base = id ?? own;
33  const input = useRef<HTMLInputElement>(null);
34  const root = useRef<HTMLDivElement>(null);
35  const [over, setOver] = useState(false);
36  const [accepted, setAccepted] = useState<File[]>([]);
37  const [rejected, setRejected] = useState<Rejection[]>([]);
38  // The handlers read the latest props through a ref, so the listeners attach once.
39  const latest = useRef({ accept, maxBytes, maxFiles, multiple, disabled, onAccepted, onRejected });
40  latest.current = { accept, maxBytes, maxFiles, multiple, disabled, onAccepted, onRejected };
41
42  useEffect(() => {
43    const el = root.current;
44    if (!el) return;
45    const take = (files: ArrayLike<File>, fromInput = false) => {
46      const l = latest.current;
47      const rules = { accept: l.accept, maxBytes: l.maxBytes, maxFiles: l.maxFiles ?? (l.multiple ? undefined : 1) };
48      const result = validateFiles(Array.from(files), rules);
49      if (input.current && (!fromInput || result.rejected.length > 0)) setInputFiles(input.current, result.accepted);
50      setAccepted(result.accepted);
51      setRejected(result.rejected);
52      if (result.accepted.length > 0) l.onAccepted?.(result.accepted, result.rejected);
53      if (result.rejected.length > 0) l.onRejected?.(result.rejected, result.accepted);
54    };
55    const page = scope === "page";
56    const target: EventTarget = page ? window : el;
57    let depth = 0;
58    const onEnter = (e: Event) => {
59      if (!dragHasFiles(e as DragEvent) || latest.current.disabled) return;
60      depth += 1;
61      setOver(true);
62    };
63    const onOver = (e: Event) => {
64      if (!dragHasFiles(e as DragEvent) || latest.current.disabled) return;
65      e.preventDefault();
66    };
67    const onLeave = (e: Event) => {
68      if (depth === 0 || !dragHasFiles(e as DragEvent)) return;
69      depth = Math.max(0, depth - 1);
70      if (depth === 0) setOver(false);
71    };
72    const onDrop = (e: Event) => {
73      const ev = e as DragEvent;
74      depth = 0;
75      setOver(false);
76      if (ev.defaultPrevented) return;
77      const files = ev.dataTransfer?.files;
78      if (!files || files.length === 0) {
79        const editable = ev.target instanceof Element && ev.target.closest("input, textarea, [contenteditable='true']");
80        if (page && !editable) ev.preventDefault();
81        return;
82      }
83      if (latest.current.disabled) return;
84      ev.preventDefault();
85      take(files);
86      input.current?.focus({ preventScroll: true });
87    };
88    const onPaste = (e: Event) => {
89      const files = (e as ClipboardEvent).clipboardData?.files;
90      if (!files || files.length === 0 || latest.current.disabled) return;
91      e.preventDefault();
92      take(files);
93    };
94    const inputEl = input.current;
95    const onChange = () => {
96      if (inputEl?.files) take(Array.from(inputEl.files), true);
97    };
98    target.addEventListener("dragenter", onEnter);
99    target.addEventListener("dragover", onOver);
100    target.addEventListener("dragleave", onLeave);
101    target.addEventListener("drop", onDrop);
102    inputEl?.addEventListener("change", onChange);
103    const pasteTarget: EventTarget | null = paste ? (page ? document : el) : null;
104    pasteTarget?.addEventListener("paste", onPaste);
105    return () => {
106      target.removeEventListener("dragenter", onEnter);
107      target.removeEventListener("dragover", onOver);
108      target.removeEventListener("dragleave", onLeave);
109      target.removeEventListener("drop", onDrop);
110      inputEl?.removeEventListener("change", onChange);
111      pasteTarget?.removeEventListener("paste", onPaste);
112    };
113  }, [scope, paste]);
114
115  const state = over ? "over" : rejected.length > 0 ? "rejected" : "idle";
116  return (
117    <div ref={root} className="cap-drop" data-state={state} data-scope={scope === "page" ? "page" : undefined}>
118      <label className="cap-drop-label">
119        <input ref={input} className="cap-drop-input" type="file" name={name} multiple={multiple || (maxFiles ?? 1) > 1} accept={accept} disabled={disabled} aria-labelledby={`${base}-title`} aria-describedby={`${base}-hint`} />
120        <span className="cap-drop-icon" aria-hidden="true">
121          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
122            <path d="M12 16V4m0 0L7 9m5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
123          </svg>
124        </span>
125        <span className="cap-drop-title" id={`${base}-title`}>
126          <span className="cap-drop-idle">
127            {title ?? (
128              <>
129                {multiple ? "Drop files here, or " : "Drop a file here, or "}
130                <span className="cap-drop-browse">browse</span>
131              </>
132            )}
133          </span>
134          <span className="cap-drop-over">Drop to upload</span>
135        </span>
136        <span className="cap-drop-hint" id={`${base}-hint`}>
137          {hint}
138        </span>
139      </label>
140      <div className="cap-drop-status" role="status">
141        {accepted.length > 0 ? (
142          <>
143            <p className="cap-drop-lead">{acceptedText(accepted)}</p>
144            <ul className="cap-drop-files">
145              {accepted.map((f, i) => (
146                <li key={`${f.name}-${i}`}>
147                  <span className="cap-drop-file-name">{f.name}</span>
148                  <span className="cap-drop-file-size">{formatBytes(f.size)}</span>
149                </li>
150              ))}
151            </ul>
152          </>
153        ) : null}
154      </div>
155      <div className="cap-drop-rejections" role="alert">
156        {rejected.length > 0 ? (
157          <>
158            <p className="cap-drop-lead" data-tone="crit">
159              <svg className="cap-status-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
160                <path fill="currentColor" fillRule="evenodd" d={CRIT} />
161              </svg>
162              {rejectedLead(rejected.length)}
163            </p>
164            <ul className="cap-drop-files">
165              {rejected.map((r, i) => (
166                <li key={`${r.file.name}-${i}`}>{r.message}</li>
167              ))}
168            </ul>
169          </>
170        ) : null}
171      </div>
172      {scope === "page" ? (
173        <div className="cap-drop-overlay" aria-hidden="true">
174          <div>
175            <p className="cap-drop-overlay-title">Drop to upload</p>
176            <p className="cap-drop-overlay-text">Release anywhere on this page to add the files.</p>
177          </div>
178        </div>
179      ) : null}
180    </div>
181  );
182}