{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "single-image-upload",
  "dependencies": [
    "lucide-react",
    "react-dropzone",
    "class-variance-authority",
    "axios"
  ],
  "registryDependencies": [
    "https://reusables.vercel.app/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/reusables/single-image-upload.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { UploadCloud, X } from \"lucide-react\"\nimport { useDropzone, type DropzoneOptions } from \"react-dropzone\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport const formatFileSize = (bytes: number) => {\n  if (typeof bytes !== \"number\") return \"0 B\"\n  if (bytes === 0) return \"0 B\"\n  const units = [\"B\", \"KB\", \"MB\", \"GB\"] as const\n  const exponent = Math.min(\n    Math.floor(Math.log(bytes) / Math.log(1024)),\n    units.length - 1\n  )\n  const size = Number((bytes / Math.pow(1024, exponent)).toFixed(2))\n  return `${size} ${units[exponent]}`\n}\n\nconst dropzoneVariants = cva(\n  \"relative mx-auto flex max-w-3xl cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed transition-all duration-300 ease-in-out disabled:cursor-not-allowed\",\n  {\n    variants: {\n      variant: {\n        base: \"border-gray-300 bg-white hover:border-gray-400 dark:border-gray-600 dark:bg-transparent dark:hover:border-gray-500 dark:hover:bg-gray-800\",\n        image: \"border-transparent bg-transparent\",\n        active: \"border-gray-400 dark:border-gray-500\",\n        disabled:\n          \"cursor-not-allowed border-gray-300 bg-gray-100 dark:border-gray-600 dark:bg-gray-700\",\n        accept:\n          \"border-green-500 bg-green-50 dark:border-green-400 dark:bg-green-900/20\",\n        reject:\n          \"border-red-500 bg-red-50 dark:border-red-400 dark:bg-red-900/20\",\n      },\n    },\n    defaultVariants: {\n      variant: \"base\",\n    },\n  }\n)\n\ntype ProgressType = \"linear\" | \"circular\"\n\ntype InputProps = {\n  width?: string\n  height?: string\n  className?: string\n  value?: File | string\n  onChange?: (file?: File) => void | Promise<void>\n  disabled?: boolean\n  dropzoneOptions?: Omit<DropzoneOptions, \"disabled\">\n  directUpload?: boolean\n  progress?: number\n  progressType?: ProgressType\n}\n\nconst ERROR_MESSAGES = {\n  fileTooLarge: (maxSize: number) =>\n    `File too large. Max size: ${formatFileSize(maxSize)}.`,\n  fileInvalidType: () => \"Invalid file type.\",\n  tooManyFiles: (maxFiles: number) => `Max ${maxFiles} file(s) allowed.`,\n  fileNotSupported: () => \"File type not supported.\",\n}\n\nexport const SingleImageDropzone = React.forwardRef<\n  HTMLInputElement,\n  InputProps\n>(\n  (\n    {\n      dropzoneOptions,\n      width = \"100%\",\n      height = \"300px\",\n      value,\n      className,\n      disabled,\n      onChange,\n      directUpload = true,\n      progress,\n      progressType = \"linear\",\n    },\n    ref\n  ) => {\n    const [localValue, setLocalValue] = React.useState<File | undefined>(\n      undefined\n    )\n\n    // Sync localValue with form value\n    React.useEffect(() => {\n      if (!value) {\n        setLocalValue(undefined)\n      }\n    }, [value])\n\n    const imageUrl = React.useMemo(() => {\n      const fileToUse = directUpload ? localValue : value\n      if (typeof fileToUse === \"string\") return fileToUse\n      if (fileToUse instanceof File) return URL.createObjectURL(fileToUse)\n      return null\n    }, [value, localValue, directUpload])\n\n    const onDrop = React.useCallback(\n      (acceptedFiles: File[]) => {\n        const file = acceptedFiles[0]\n        if (!file) return\n\n        setLocalValue(file)\n        void onChange?.(file)\n      },\n      [onChange]\n    )\n\n    const {\n      getRootProps,\n      getInputProps,\n      acceptedFiles,\n      fileRejections,\n      isFocused,\n      isDragAccept,\n      isDragReject,\n    } = useDropzone({\n      accept: { \"image/*\": [] },\n      multiple: false,\n      disabled,\n      onDrop,\n      ...dropzoneOptions,\n    })\n\n    const variant = React.useMemo(() => {\n      if (imageUrl) return \"image\"\n      if (disabled) return \"disabled\"\n      if (isDragReject || fileRejections.length) return \"reject\"\n      if (isDragAccept) return \"accept\"\n      if (isFocused) return \"active\"\n      return \"base\"\n    }, [\n      isFocused,\n      imageUrl,\n      fileRejections,\n      isDragAccept,\n      isDragReject,\n      disabled,\n    ])\n\n    const errorMessage = React.useMemo(() => {\n      if (fileRejections[0]) {\n        const { errors } = fileRejections[0]\n        if (errors[0]?.code === \"file-too-large\") {\n          return ERROR_MESSAGES.fileTooLarge(dropzoneOptions?.maxSize ?? 0)\n        } else if (errors[0]?.code === \"file-invalid-type\") {\n          return ERROR_MESSAGES.fileInvalidType()\n        } else if (errors[0]?.code === \"too-many-files\") {\n          return ERROR_MESSAGES.tooManyFiles(dropzoneOptions?.maxFiles ?? 0)\n        } else {\n          return ERROR_MESSAGES.fileNotSupported()\n        }\n      }\n      return undefined\n    }, [fileRejections, dropzoneOptions])\n\n    const handleClear = (e: React.MouseEvent) => {\n      e.stopPropagation()\n      setLocalValue(undefined)\n      void onChange?.(undefined)\n    }\n\n    return (\n      <div className=\"w-full\">\n        <div\n          {...getRootProps({\n            className: cn(dropzoneVariants({ variant }), className),\n            style: { width, height },\n          })}\n        >\n          <input ref={ref} {...getInputProps()} />\n\n          {imageUrl ?\n            <div className=\"group relative h-full w-full overflow-hidden rounded-lg\">\n              <img\n                className=\"my-0 h-full w-full object-cover transition-transform duration-300 group-hover:scale-105\"\n                src={imageUrl}\n                alt={acceptedFiles[0]?.name}\n              />\n\n              <div\n                className={cn(\n                  \"absolute inset-0 flex items-center justify-center\",\n                  progress ? \"bg-black/90\" : (\n                    \"bg-black/20 group-hover:bg-black/90\"\n                  )\n                )}\n              >\n                {progress ?\n                  <>\n                    {progressType === \"linear\" && (\n                      <span className=\"animate-pulse text-lg font-medium text-white transition-opacity duration-[3000ms]\">\n                        Uploading...\n                      </span>\n                    )}\n                    <ProgressIndicator\n                      progress={progress}\n                      type={progressType}\n                    />\n                  </>\n                : <span className=\"text-lg font-medium text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100\">\n                    Replace image\n                  </span>\n                }\n              </div>\n            </div>\n          : <div className=\"flex flex-col items-center justify-center space-y-4 text-center\">\n              <div className=\"rounded-full bg-gray-100 p-3 dark:bg-gray-700\">\n                <UploadCloud className=\"h-8 w-8 text-gray-600 dark:text-gray-400\" />\n              </div>\n              <div className=\"text-sm font-medium text-gray-700 dark:text-gray-300\">\n                Drag & drop your image here\n              </div>\n              <div className=\"text-xs text-gray-500 dark:text-gray-400\">or</div>\n              <button\n                type=\"button\"\n                disabled={disabled}\n                className=\"rounded-full bg-gray-800 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-hidden disabled:bg-gray-400 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300 dark:disabled:bg-gray-600\"\n              >\n                Browse files\n              </button>\n              <div className=\"text-xs text-gray-500 dark:text-gray-400\">\n                {dropzoneOptions?.maxSize &&\n                  `Up to ${formatFileSize(dropzoneOptions.maxSize)}`}\n              </div>\n            </div>\n          }\n\n          {imageUrl && !disabled && (\n            <button\n              type=\"button\"\n              onClick={handleClear}\n              className=\"absolute top-2 right-2 rounded-full bg-white p-1 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-hidden dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200\"\n            >\n              <X className=\"h-5 w-5\" />\n            </button>\n          )}\n        </div>\n\n        {errorMessage && (\n          <div className=\"mt-2 text-sm text-red-600 dark:text-red-400\">\n            {errorMessage}\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nSingleImageDropzone.displayName = \"SingleImageDropzone\"\n\nconst ProgressIndicator = ({\n  progress = 0,\n  type = \"linear\",\n}: {\n  progress: number\n  type?: ProgressType\n}) => {\n  if (type === \"circular\") {\n    return (\n      <div className=\"relative h-16 w-16\">\n        <svg className=\"h-full w-full\" viewBox=\"0 0 100 100\">\n          <circle\n            className=\"stroke-gray-300 dark:stroke-gray-600\"\n            fill=\"none\"\n            cx=\"50\"\n            cy=\"50\"\n            r=\"45\"\n            strokeWidth=\"8\"\n          />\n          <circle\n            className=\"stroke-green-600 transition-all duration-300 ease-out\"\n            fill=\"none\"\n            cx=\"50\"\n            cy=\"50\"\n            r=\"45\"\n            strokeWidth=\"8\"\n            strokeLinecap=\"round\"\n            strokeDasharray={`${progress * 2.82743}, 282.743`}\n            transform=\"rotate(-90 50 50)\"\n          />\n        </svg>\n        <div className=\"absolute inset-0 flex items-center justify-center\">\n          <span className=\"text-sm font-medium text-white\">\n            {Math.round(progress)}%\n          </span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"absolute bottom-0 left-0 h-1 w-full bg-gray-200 dark:bg-gray-700\">\n      <div\n        className=\"h-full bg-green-600 transition-all duration-300 ease-out\"\n        style={{ width: `${progress}%` }}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/single-image-upload.tsx"
    },
    {
      "path": "registry/hooks/use-file-upload.tsx",
      "content": "\"use client\"\n\nimport { useRef, useState } from \"react\"\nimport axios from \"axios\"\n\ninterface UseFileUploadParams {\n  onSuccess?: (url: string) => void\n  onError?: (error: string) => void\n}\n\nconst useFileUpload = ({ onSuccess, onError }: UseFileUploadParams = {}) => {\n  const [selectedFile, setSelectedFile] = useState<File | null>(null)\n  const [isUploading, setIsUploading] = useState(false)\n  const [progress, setProgress] = useState(0)\n  const [error, setError] = useState<string | null>(null)\n  const abortControllerRef = useRef<AbortController | null>(null)\n  const [data, setData] = useState(null)\n\n  const handleFileUpload = async (file: File | null) => {\n    if (!file) {\n      throw new Error(\"No file selected\")\n    }\n\n    setSelectedFile(file)\n    setIsUploading(true)\n    setError(null)\n\n    abortControllerRef.current = new AbortController()\n\n    try {\n      const formData = new FormData()\n      formData.append(\"file\", file)\n\n      // TODO: Replace with your own API endpoint\n      const response = await axios.post(\n        `https://your-api-endpoint.com`,\n        formData,\n        {\n          signal: abortControllerRef.current.signal,\n          onUploadProgress: (progressEvent) => {\n            const percentCompleted = Math.round(\n              (progressEvent.loaded * 100) / progressEvent.total!\n            )\n            setProgress(percentCompleted)\n          },\n        }\n      )\n      // TODO: Replace with your own API response\n      const uploadedUrl = response?.data?.secure_url\n\n      setData(uploadedUrl)\n      onSuccess?.(uploadedUrl)\n      setIsUploading(false)\n      setProgress(0)\n      abortControllerRef.current = null\n    } catch (error: any) {\n      if (axios.isCancel(error)) {\n        const cancelMessage = \"Upload cancelled\"\n        console.log(cancelMessage)\n      } else {\n        const errorMessage = error.response?.data?.message || \"Upload failed\"\n        setError(errorMessage)\n        onError?.(errorMessage)\n      }\n      setIsUploading(false)\n      setSelectedFile(null)\n      setProgress(0)\n      setData(null)\n      abortControllerRef.current = null\n    }\n  }\n\n  const cancelUpload = () => {\n    if (abortControllerRef.current) {\n      abortControllerRef.current.abort()\n    }\n    setSelectedFile(null)\n    setIsUploading(false)\n    setProgress(0)\n    setError(null)\n    setData(null)\n  }\n\n  return {\n    selectedFile,\n    isUploading,\n    progress,\n    error,\n    handleFileUpload,\n    cancelUpload,\n    data,\n  }\n}\n\nexport default useFileUpload\n",
      "type": "registry:hook",
      "target": "hooks/use-file-upload.tsx"
    }
  ],
  "type": "registry:component"
}