app/components/admin/media-drop-anywhere.tsx

Functions

Imports

It imports no other module of this repo. Imported by app/components/admin/media-upload-actions.tsx.

Source

1import { useEffect, useState } from "react";
2
3// Never auto-submits: a drop is easy to do by accident and an upload writes to R2.
4export function DropAnywhere({ inputRef }: { inputRef: React.RefObject<HTMLInputElement | null> }) {
5  const [over, setOver] = useState(false);
6  const [note, setNote] = useState<string | null>(null);
7  /* The file input is clipped out of sight, so the name it holds is said here or nowhere. */
8  const [chosen, setChosen] = useState("");
9
10  useEffect(() => {
11    // A counter, not a boolean: dragenter and dragleave fire for every nested element the pointer crosses.
12    let depth = 0;
13    const stop = (event: DragEvent) => {
14      event.preventDefault();
15    };
16    const enter = (event: DragEvent) => {
17      if (!event.dataTransfer?.types.includes("Files")) return;
18      depth += 1;
19      setOver(true);
20    };
21    const leave = () => {
22      depth = Math.max(0, depth - 1);
23      if (depth === 0) setOver(false);
24    };
25    const drop = (event: DragEvent) => {
26      depth = 0;
27      setOver(false);
28      const files = event.dataTransfer?.files;
29      if (!files || files.length === 0) {
30        // A dropped link or text would otherwise navigate away from the page; a field still takes its text.
31        const target = event.target as HTMLElement | null;
32        const editable = target?.closest("input, textarea, [contenteditable='true']");
33        if (!editable) event.preventDefault();
34        return;
35      }
36      event.preventDefault();
37      const input = inputRef.current;
38      if (!input) return;
39      const one = new DataTransfer();
40      const first = files[0];
41      if (!first) return;
42      one.items.add(first);
43      input.files = one.files;
44      input.focus();
45      setChosen(first.name);
46      setNote(
47        files.length > 1
48          ? `Only ${first.name} was loaded. The form takes one file, so the other ${files.length - 1} were left out.`
49          : null,
50      );
51    };
52
53    // Browsing sets the input directly; assigning `files` on a drop fires no change, hence both paths.
54    const input = inputRef.current;
55    const onChange = () => {
56      setChosen(input?.files?.[0]?.name ?? "");
57      setNote(null);
58    };
59    input?.addEventListener("change", onChange);
60
61    window.addEventListener("dragover", stop);
62    window.addEventListener("dragenter", enter);
63    window.addEventListener("dragleave", leave);
64    window.addEventListener("drop", drop);
65    return () => {
66      input?.removeEventListener("change", onChange);
67      window.removeEventListener("dragover", stop);
68      window.removeEventListener("dragenter", enter);
69      window.removeEventListener("dragleave", leave);
70      window.removeEventListener("drop", drop);
71    };
72  }, [inputRef]);
73
74  // One region, in the document before anything is dropped or chosen, so each change is announced.
75  return (
76    <div role="status">
77      {over ? (
78        <p className="cap-muted">
79          Drop to load it into the upload form. Nothing uploads until you press
80          Upload.
81        </p>
82      ) : (
83        <>
84          {chosen ? <p className="cap-muted">Ready to upload {chosen}.</p> : null}
85          {note ? <p className="cap-muted">{note}</p> : null}
86        </>
87      )}
88    </div>
89  );
90}