{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "direct-multi-file-upload-demo",
  "registryDependencies": [
    "https://reusables.vercel.app/r/multi-file-upload"
  ],
  "files": [
    {
      "path": "registry/example/direct-multi-file-upload-demo.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\n\nimport { useMultipleFileUpload } from \"@/hooks/use-multiple-file-upload\"\n\nimport { MultiFileUpload } from \"@/components/multi-file-upload\"\n\nexport default function DirectMultiFileUploadDemo() {\n  const [files, setFiles] = useState<\n    {\n      file: File | string\n      key: string\n      progress: \"PENDING\" | \"COMPLETE\" | \"ERROR\" | number\n    }[]\n  >([])\n\n  const { uploadMultipleFiles, uploadProgress, isUploading } =\n    useMultipleFileUpload({\n      onSuccess: (urls) => {\n        // Update file states with uploaded URLs\n        setFiles((prev) =>\n          prev.map((file, index) => ({\n            ...file,\n            file: urls[index] || file.file,\n            progress: \"COMPLETE\",\n          }))\n        )\n      },\n    })\n\n  // Update the onUpload handler\n  const handleUpload = async (files: File[]) => {\n    // Create file states first to show immediate preview\n    const newFiles = files.map((file) => ({\n      file,\n      key: Math.random().toString(36).slice(2),\n      progress: 0, // Start with 0 progress instead of PENDING\n    }))\n\n    // Update state to show previews immediately\n    setFiles((prev) => [...prev, ...newFiles])\n\n    // Start upload\n    const filesToUpload = newFiles.map(({ key, file }) => ({\n      key,\n      file: file as File,\n    }))\n\n    await uploadMultipleFiles(filesToUpload)\n  }\n\n  // Update progress from uploadProgress\n  React.useEffect(() => {\n    if (uploadProgress.length > 0) {\n      setFiles((prev) =>\n        prev.map((file) => {\n          const progress = uploadProgress.find((p) => p.key === file.key)\n          return progress ? { ...file, progress: progress.progress } : file\n        })\n      )\n    }\n  }, [uploadProgress])\n\n  return (\n    <div className=\"mx-auto w-full max-w-3xl md:px-10\">\n      <MultiFileUpload\n        value={files}\n        onChange={setFiles}\n        onUpload={handleUpload}\n        isDirectUpload\n        displayMode=\"list\"\n        disabled={isUploading}\n        dropzoneOptions={{\n          maxFiles: 4,\n          maxSize: 1024 * 1024 * 2, // 2MB\n        }}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/direct-multi-file-upload-demo.tsx"
    }
  ],
  "type": "registry:example"
}