Imperative Root Control

1import { useRef, useState } from "react";
2import type { DragEvent } from "react";
3import type { UplofileRootRef } from "uplofile";
4import {
5  UplofileDropzone,
6  UplofilePreview,
7  UplofileRoot,
8} from "@/components/ui/uplofile.ts";
9import { mockUpload } from "@/lib/utils.ts";
10
11export default function RootImperativeDemo() {
12  const uplofileRef = useRef<UplofileRootRef>(null);
13  const [isDragging, setIsDragging] = useState(false);
14
15  // Handle drag events on the parent container
16  const handleDragOver = (e: DragEvent) => {
17    e.preventDefault();
18    setIsDragging(true);
19    uplofileRef.current?.onDragOver?.(e);
20  };
21
22  const handleDragLeave = () => {
23    setIsDragging(false);
24  };
25
26  const handleDrop = (e: DragEvent) => {
27    e.preventDefault();
28    setIsDragging(false);
29    uplofileRef.current?.onDrop?.(e);
30  };
31
32  const handleManualUpload = () => {
33    uplofileRef.current?.openFileDialog();
34  };
35
36  return (
37    <div
38      className={`flex flex-col items-center justify-center min-h-[400px] p-10 border-4 border-dashed transition-colors ${
39        isDragging ? "border-primary bg-primary/10" : "border-muted bg-muted/5"
40      }`}
41      onDragOver={handleDragOver}
42      onDragLeave={handleDragLeave}
43      onDrop={handleDrop}
44    >
45      <div className="text-center mb-6">
46        <h3 className="text-lg font-medium mb-2">Parent Container Dropzone</h3>
47        <p className="text-sm text-muted-foreground mb-4">
48          This entire area handles drag and drop imperatively via ref
49        </p>
50        <button
51          onClick={handleManualUpload}
52          className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium hover:bg-primary/90 transition-colors"
53        >
54          Open File Dialog via Ref
55        </button>
56      </div>
57
58      <UplofileRoot ref={uplofileRef} upload={mockUpload}>
59        <UplofilePreview />
60        {/* We can still use the internal dropzone if we want */}
61        <UplofileDropzone className="mt-4 border border-dashed p-4 rounded text-sm text-muted-foreground">
62          Or drop specifically here
63        </UplofileDropzone>
64      </UplofileRoot>
65    </div>
66  );
67}