| 1 | "use client"; |
| 2 | |
| 3 | import { UploadIcon } from |
| 4 | import type { ReactNode |
| 5 | import { createContext, useContext |
| 6 | import type { DropEvent, |
| 7 | import { useDropzone } |
| 8 | import { Button } |
| 9 | import { cn } |
| 10 | |
| 11 | type DropzoneContextType |
| 12 | src?: File |
| 13 | accept?: DropzoneOptions |
| 14 | maxSize?: DropzoneOptions |
| 15 | minSize?: DropzoneOptions |
| 16 | maxFiles?: DropzoneOptions |
| 17 | }; |
| 18 | |
| 19 | const renderBytes = ( |
| 20 | const units = |
| 21 | let size = |
| 22 | let unitIndex = |
| 23 | |
| 24 | while (size >= |
| 25 | size /= 1024; |
| 26 | unitIndex++; |
| 27 | } |
| 28 | |
| 29 | return `${size. |
| 30 | }; |
| 31 | |
| 32 | const DropzoneContext = createContext |
| 33 | undefined, |
| 34 | ); |
| 35 | |
| 36 | export type DropzoneProps |
| 37 | src?: File |
| 38 | className?: string |
| 39 | onDrop?: ( |
| 40 | acceptedFiles: File |
| 41 | fileRejections: FileRejection |
| 42 | event: DropEvent |
| 43 | ) => |
| 44 | children?: ReactNode |
| 45 | }; |
| 46 | |
| 47 | export 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, |
| 61 | accept, |
| 62 | maxFiles, |
| 63 | maxSize, |
| 64 | minSize, |
| 65 | onError, |
| 66 | disabled, |
| 67 | onDrop: (acceptedFiles, |
| 68 | if (fileRejections.length |
| 69 | const message = |
| 70 | onError?.(new Error |
| 71 | return; |
| 72 | } |
| 73 | |
| 74 | onDrop?.(acceptedFiles, |
| 75 | }, |
| 76 | ...props, |
| 77 | }); |
| 78 | |
| 79 | return ( |
| 80 | <DropzoneContext.Provider |
| 81 | key={JSON.stringify |
| 82 | value={{ src |
| 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 |
| 96 | {children} |
| 97 | </Button> |
| 98 | </DropzoneContext.Provider> |
| 99 | ); |
| 100 | }; |
| 101 | |
| 102 | const useDropzoneContext = () |
| 103 | const context = |
| 104 | |
| 105 | if (!context) |
| 106 | throw new Error( |
| 107 | } |
| 108 | |
| 109 | return context; |
| 110 | }; |
| 111 | |
| 112 | export type DropzoneEmptyStateProps |
| 113 | children?: ReactNode |
| 114 | className?: string |
| 115 | }; |
| 116 | |
| 117 | export const DropzoneEmptyState = |
| 118 | children, |
| 119 | className, |
| 120 | }: DropzoneEmptyStateProps) |
| 121 | const { src, |
| 122 | |
| 123 | if (src) { |
| 124 | return null; |
| 125 | } |
| 126 | |
| 127 | if (children) { |
| 128 | return children; |
| 129 | } |
| 130 | |
| 131 | let caption = |
| 132 | |
| 133 | if (accept) { |
| 134 | caption += "Accepts " |
| 135 | caption += new |
| 136 | } |
| 137 | |
| 138 | if (minSize && |
| 139 | caption += ` between ${ |
| 140 | } else if (minSize |
| 141 | caption += ` at least ${ |
| 142 | } else if (maxSize |
| 143 | caption += ` less than ${ |
| 144 | } |
| 145 | |
| 146 | return ( |
| 147 | <div className={cn |
| 148 | <div className="flex size-8 items-center justify-center rounded-md bg-muted text-muted-foreground |
| 149 | <UploadIcon size={ |
| 150 | </div> |
| 151 | <p className="my-2 w-full truncate text-wrap font-medium text-sm |
| 152 | Upload {maxFiles === 1 |
| 153 | </p> |
| 154 | <p className="w-full truncate text-wrap text-muted-foreground text-xs |
| 155 | Drag and drop or click to upload |
| 156 | </p> |
| 157 | {caption && ( |
| 158 | <p className="text-wrap text-muted-foreground text-xs |
| 159 | )} |
| 160 | </div> |
| 161 | ); |
| 162 | }; |