1import { useImagePreview } from "use-image-preview";
2import { useRef, useState, type DragEvent } from "react";
3
4export const App = () => {
5    const [isDragging, setIsDragging] = useState(false);
6    const { file, preview, change, clear, type } = useImagePreview();
7
8    const handleDragOver = (event: DragEvent<HTMLDivElement>) => {
9        event.preventDefault();
10        event.dataTransfer.dropEffect = "copy";
11
12        setIsDragging(true);
13    };
14    
15    const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {
16        if (event.currentTarget.contains(event.relatedTarget as Node | null)) {
17            return;
18        }    
19        setIsDragging(false);
20    };
21
22    useEffect(() => {
23      if (!file) return;
24      // ...send to server or something
25    }, [file])
26
27    return (
28        <input
29            type="file"
30            accept="image/*"
31            onChange={change}
32            className="hidden"
33        />
34        <div
35          onDragOver={handleDragOver}
36          onDragLeave={handleDragLeave}
37          onDrop={change}
38        >
39            {preview && (
40                type === "image" ? 
41                   <img
42                    src={preview}
43                    alt="preview"
44                   /> 
45                : 
46                   <video
47                       src={preview}
48                       controls
49                   />
50            )}
51            <button
52                onClick={clear}
53            >
54                Clear
55            </button>
56        </div>
57    )
58};