Dropzone (File Upload)

1'use client' 2 3import { cn } from '@/lib/utils' 4import { type UseSupabaseUploadReturn } from '@/hooks/use-supabase-upload' 5import { Button } from '@/components/ui/button' 6import { CheckCircle, File, Loader2, Upload, X } from 'lucide-react' 7import { createContext, type PropsWithChildren, useCallback, useContext } from 'react' 8 9export const formatBytes = ( 10 bytes: number, 11 decimals = 2, 12 size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB' 13) => { 14 const k = 1000 15 const dm = decimals < 0 ? 0 : decimals 16 const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] 17 18 if (bytes === 0 || bytes === undefined) return size !== undefined ? `0 ${size}` : '0 bytes' 19 const i = size !== undefined ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k)) 20 return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i] 21} 22 23type DropzoneContextType = Omit<UseSupabaseUploadReturn, 'getRootProps' | 'getInputProps'> 24 25const DropzoneContext = createContext<DropzoneContextType | undefined>(undefined) 26 27type DropzoneProps = UseSupabaseUploadReturn & { 28 className?: string 29} 30 31const Dropzone = ({ 32 className, 33 children, 34 getRootProps, 35 getInputProps, 36 ...restProps 37}: PropsWithChildren<DropzoneProps>) => { 38 const isSuccess = restProps.isSuccess 39 const isActive = restProps.isDragActive 40 const isInvalid = 41 (restProps.isDragActive && restProps.isDragReject) || 42 (restProps.errors.length > 0 && !restProps.isSuccess) || 43 restProps.files.some((file) => file.errors.length !== 0) 44 45 return ( 46 <DropzoneContext.Provider value={{ ...restProps }}> 47 <div 48 {...getRootProps({ 49 className: cn( 50 'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground', 51 className, 52 isSuccess ? 'border-solid' : 'border-dashed', 53 isActive && 'border-primary bg-primary/10', 54 isInvalid && 'border-destructive bg-destructive/10' 55 ), 56 })} 57 > 58 <input {...getInputProps()} /> 59 {children} 60 </div> 61 </DropzoneContext.Provider> 62 ) 63} 64const DropzoneContent = ({ className }: { className?: string }) => { 65 const { 66 files, 67 setFiles, 68 onUpload, 69 loading, 70 successes, 71 errors, 72 maxFileSize, 73 maxFiles, 74 isSuccess, 75 } = useDropzoneContext() 76 77 const exceedMaxFiles = files.length > maxFiles 78 79 const handleRemoveFile = useCallback( 80 (fileName: string) => { 81 setFiles(files.filter((file) => file.name !== fileName)) 82 }, 83 [files, setFiles] 84 ) 85 86 if (isSuccess) { 87 return ( 88 <div className={cn('flex flex-row items-center gap-x-2 justify-center', className)}> 89 <CheckCircle size={16} className="text-primary" /> 90 <p className="text-primary text-sm"> 91 Successfully uploaded {files.length} file{files.length > 1 ? 's' : ''} 92 </p> 93 </div> 94 ) 95 } 96 97 return ( 98 <div className={cn('flex flex-col', className)}> 99 {files.map((file, idx) => { 100 const fileError = errors.find((e) => e.name === file.name) 101 const isSuccessfullyUploaded = !!successes.find((e) => e === file.name) 102 103 return ( 104 <div 105 key={`${file.name}-${idx}`} 106 className="flex items-center gap-x-4 border-b py-2 first:mt-4 last:mb-4 " 107 > 108 {file.type.startsWith('image/') ? ( 109 <div className="h-10 w-10 rounded border overflow-hidden shrink-0 bg-muted flex items-center justify-center"> 110 <img src={file.preview} alt={file.name} className="object-cover" /> 111 </div> 112 ) : ( 113 <div className="h-10 w-10 rounded border bg-muted flex items-center justify-center"> 114 <File size={18} /> 115 </div> 116 )} 117 118 <div className="shrink grow flex flex-col items-start truncate"> 119 <p title={file.name} className="text-sm truncate max-w-full"> 120 {file.name} 121 </p> 122 {file.errors.length > 0 ? ( 123 <p className="text-xs text-destructive"> 124 {file.errors 125 .map((e) => 126 e.message.startsWith('File is larger than') 127 ? `File is larger than ${formatBytes(maxFileSize, 2)} (Size: ${formatBytes(file.size, 2)})` 128 : e.message 129 ) 130 .join(', ')} 131 </p> 132 ) : loading && !isSuccessfullyUploaded ? ( 133 <p className="text-xs text-muted-foreground">Uploading file...</p> 134 ) : !!fileError ? ( 135 <p className="text-xs text-destructive">Failed to upload: {fileError.message}</p> 136 ) : isSuccessfullyUploaded ? ( 137 <p className="text-xs text-primary">Successfully uploaded file</p> 138 ) : ( 139 <p className="text-xs text-muted-foreground">{formatBytes(file.size, 2)}</p> 140 )} 141 </div> 142 143 {!loading && !isSuccessfullyUploaded && ( 144 <Button 145 size="icon" 146 variant="link" 147 className="shrink-0 justify-self-end text-muted-foreground hover:text-foreground" 148 onClick={() => handleRemoveFile(file.name)} 149 > 150 <X /> 151 </Button> 152 )} 153 </div> 154 ) 155 })} 156 {exceedMaxFiles && ( 157 <p className="text-sm text-left mt-2 text-destructive"> 158 You may upload only up to {maxFiles} files, please remove {files.length - maxFiles} file 159 {files.length - maxFiles > 1 ? 's' : ''}. 160 </p> 161 )} 162 {files.length > 0 && !exceedMaxFiles && ( 163 <div className="mt-2"> 164 <Button 165 variant="outline" 166 onClick={onUpload} 167 disabled={files.some((file) => file.errors.length !== 0) || loading} 168 > 169 {loading ? ( 170 <> 171 <Loader2 className="mr-2 h-4 w-4 animate-spin" /> 172 Uploading... 173 </> 174 ) : ( 175 <>Upload files</> 176 )} 177 </Button> 178 </div> 179 )} 180 </div> 181 ) 182} 183 184const DropzoneEmptyState = ({ className }: { className?: string }) => { 185 const { maxFiles, maxFileSize, inputRef, isSuccess } = useDropzoneContext() 186 187 if (isSuccess) { 188 return null 189 } 190 191 return ( 192 <div className={cn('flex flex-col items-center gap-y-2', className)}> 193 <Upload size={20} className="text-muted-foreground" /> 194 <p className="text-sm"> 195 Upload{!!maxFiles && maxFiles > 1 ? ` ${maxFiles}` : ''} file 196 {!maxFiles || maxFiles > 1 ? 's' : ''} 197 </p> 198 <div className="flex flex-col items-center gap-y-1"> 199 <p className="text-xs text-muted-foreground"> 200 Drag and drop or{' '} 201 <a 202 onClick={() => inputRef.current?.click()} 203 className="underline cursor-pointer transition hover:text-foreground" 204 > 205 select {maxFiles === 1 ? `file` : 'files'} 206 </a>{' '} 207 to upload 208 </p> 209 {maxFileSize !== Number.POSITIVE_INFINITY && ( 210 <p className="text-xs text-muted-foreground"> 211 Maximum file size: {formatBytes(maxFileSize, 2)} 212 </p> 213 )} 214 </div> 215 </div> 216 ) 217} 218 219const useDropzoneContext = () => { 220 const context = useContext(DropzoneContext) 221 222 if (!context) { 223 throw new Error('useDropzoneContext must be used within a Dropzone') 224 } 225 226 return context 227} 228 229export { Dropzone, DropzoneContent, DropzoneEmptyState, useDropzoneContext }