{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "manual-multi-file-upload-demo",
  "registryDependencies": [
    "https://reusables.vercel.app/r/multi-file-upload",
    "button"
  ],
  "files": [
    {
      "path": "registry/example/manual-multi-file-upload-demo.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMultipleFileUpload } from \"@/hooks/use-multiple-file-upload\"\nimport { Button } from \"@/components/ui/button\"\n\nimport { MultiFileUpload, type FileState } from \"@/components/multi-file-upload\"\n\nexport default function ManualMultiFileUploadDemo() {\n  const [fileStates, setFileStates] = React.useState<FileState[]>([])\n  const {\n    uploadMultipleFiles,\n    uploadProgress,\n    isUploading,\n    error,\n    uploadResults,\n  } = useMultipleFileUpload({\n    onSuccess: (urls) => {\n      console.log(\"Successfully uploaded files:\", urls)\n    },\n    onError: (error) => {\n      console.error(\"Upload error:\", error)\n    },\n  })\n\n  console.log(\"uploadResults\", uploadResults)\n\n  // Update file progress based on upload progress\n  React.useEffect(() => {\n    if (uploadProgress.length) {\n      setFileStates((fileStates) => {\n        const newFileStates = structuredClone(fileStates)\n        uploadProgress.forEach(({ key, progress }) => {\n          const fileState = newFileStates.find(\n            (fileState) => fileState.key === key\n          )\n          if (fileState) {\n            fileState.progress = progress\n          }\n        })\n        return newFileStates\n      })\n    }\n  }, [uploadProgress])\n\n  return (\n    <div className=\"mx-auto w-full max-w-3xl space-y-4 md:px-10\">\n      <MultiFileUpload\n        value={fileStates}\n        onChange={setFileStates}\n        displayMode=\"list\"\n        disabled={isUploading}\n        dropzoneOptions={{\n          maxFiles: 4,\n          maxSize: 1024 * 1024 * 2, // 2MB\n        }}\n        onFilesAdded={async (addedFiles) => {\n          setFileStates([...fileStates, ...addedFiles])\n        }}\n      />\n\n      <Button\n        onClick={() => {\n          const pendingFiles = fileStates\n            .filter(\n              (fileState) =>\n                fileState.progress === \"PENDING\" &&\n                typeof fileState.file !== \"string\"\n            )\n            .map((fileState) => ({\n              key: fileState.key,\n              file: fileState.file as File,\n            }))\n\n          uploadMultipleFiles(pendingFiles)\n        }}\n        disabled={\n          isUploading ||\n          !fileStates.filter((fileState) => fileState.progress === \"PENDING\")\n            .length\n        }\n      >\n        {isUploading ? \"Uploading...\" : \"Upload Files\"}\n      </Button>\n      {error && <div className=\"mt-2 text-sm text-red-500\">{error}</div>}\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/manual-multi-file-upload-demo.tsx"
    }
  ],
  "type": "registry:example"
}