Dropzone (File Upload)

1'use client'
2 
3import { CheckCircle, File, Loader2, Upload, X } from 'lucide-react'
4import { createContext, useCallback, useContext, type PropsWithChildren } from 'react'
5 
6import { cn } from '@/lib/utils'
7import { type UseSupabaseUploadReturn } from '@/registry/default/blocks/dropzone/hooks/use-supabase-upload'
8import { Button } from '@/registry/default/components/ui/button'
9 
10export const formatBytes = (
11  bytes: number,
12  decimals = 2,
13  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'
14) => {
15  const k = 1000
16  const dm = decimals < 0 ? 0 : decimals
17  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
18 
19  if (bytes === 0 || bytes === undefined) return size !== undefined ? `0 ${size}` : '0 bytes'
20  const i = size !== undefined ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k))
21  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
22}
23 
24type DropzoneContextType = Omit<UseSupabaseUploadReturn, 'getRootProps' | 'getInputProps'>
25 
26const DropzoneContext = createContext<DropzoneContextType | undefined>(undefined)
27 
28type DropzoneProps = UseSupabaseUploadReturn & {
29  className?: string
30}
31 
32const Dropzone = ({
33  className,
34  children,
35  getRootProps,
36  getInputProps,
37  ...restProps
38}: PropsWithChildren<DropzoneProps>) => {
39  const isSuccess = restProps.isSuccess
40  const isActive = restProps.isDragActive
41  const isInvalid =
42    (restProps.isDragActive && restProps.isDragReject) ||
43    (restProps.errors.length > 0 && !restProps.isSuccess) ||
44    restProps.files.some((file) => file.errors.length !== 0)
45 
46  return (
47    <DropzoneContext.Provider value={{ ...restProps }}>
48      <div
49        {...getRootProps({
50          className: cn(
51            'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground',
52            className,
53            isSuccess ? 'border-solid' : 'border-dashed',
54            isActive && 'border-primary bg-primary/10',
55            isInvalid && 'border-destructive bg-destructive/10'
56          ),
57        })}
58      >
59        <input {...getInputProps()} />
60        {children}
61      </div>
62    </DropzoneContext.Provider>
63  )
64}
65const DropzoneContent = ({ className }: { className?: string }) => {
66  const {
67    files,
68    setFiles,
69    onUpload,
70    loading,
71    successes,
72    errors,
73    maxFileSize,
74    maxFiles,
75    isSuccess,
76  } = useDropzoneContext()
77 
78  const exceedMaxFiles = files.length > maxFiles
79 
80// … truncated