dropzone

1"use client";
2 
3import { UploadIcon } from "lucide-react";
4import type { ReactNode } from "react";
5import { createContext, useContext } from "react";
6import type { DropEvent, DropzoneOptions, FileRejection } from "react-dropzone";
7import { useDropzone } from "react-dropzone";
8import { Button } from "@/components/ui/button";
9import { cn } from "@/lib/utils";
10 
11type DropzoneContextType = {
12  src?: File[];
13  accept?: DropzoneOptions["accept"];
14  maxSize?: DropzoneOptions["maxSize"];
15  minSize?: DropzoneOptions["minSize"];
16  maxFiles?: DropzoneOptions["maxFiles"];
17};
18 
19const renderBytes = (bytes: number) => {
20  const units = ["B", "KB", "MB", "GB", "TB", "PB"];
21  let size = bytes;
22  let unitIndex = 0;
23 
24  while (size >= 1024 && unitIndex < units.length - 1) {
25    size /= 1024;
26    unitIndex++;
27  }
28 
29  return `${size.toFixed(2)}${units[unitIndex]}`;
30};
31 
32const DropzoneContext = createContext<DropzoneContextType | undefined>(
33  undefined
34);
35 
36export type DropzoneProps = Omit<DropzoneOptions, "onDrop"> & {
37  src?: File[];
38  className?: string;
39  onDrop?: (
40    acceptedFiles: File[],
41    fileRejections: FileRejection[],
42    event: DropEvent
43  ) => void;
44  children?: ReactNode;
45};
46 
47export const Dropzone = ({
48  accept,
49  maxFiles = 1,
50  maxSize,
51  minSize,
52  onDrop,
53  onError,
54  disabled,
55  src,
56  className,
57  children,
58  ...props
59}: DropzoneProps) => {
60  const { getRootProps, getInputProps, isDragActive } = useDropzone({
61    accept,
62    maxFiles,
63    maxSize,
64    minSize,
65    onError,
66    disabled,
67    onDrop: (acceptedFiles, fileRejections, event) => {
68      if (fileRejections.length > 0) {
69        const message = fileRejections.at(0)?.errors.at(0)?.message;
70        onError?.(new Error(message));
71        return;
72      }
73 
74      onDrop?.(acceptedFiles, fileRejections, event);
75    },
76    ...props,
77  });
78 
79  return (
80    <DropzoneContext.Provider
81      key={JSON.stringify(src)}
82      value={{ src, accept, maxSize, minSize, maxFiles }}
83    >
84      <Button
85        className={cn(
86          "relative h-auto w-full flex-col overflow-hidden p-8",
87          isDragActive && "outline-none ring-1 ring-ring",
88          className
89        )}
90        disabled={disabled}
91        type="button"
92        variant="outline"
93        {...getRootProps()}
94      >
95        <input {...getInputProps()} disabled={disabled} />
96        {children}
97      </Button>
98    </DropzoneContext.Provider>
99  );
100};
101 
102const useDropzoneContext = () => {
103  const context = useContext(DropzoneContext);
104 
105  if (!context) {
106// … truncated