{"_id":"@amine_rebbouh/react-drag-drop-uploader","name":"@amine_rebbouh/react-drag-drop-uploader","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@amine_rebbouh/react-drag-drop-uploader","version":"1.0.0","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsup src/DragDropComponent.tsx --format cjs,esm --dts"},"peerDependencies":{"react":">=17","react-dom":">=17","tailwindcss":">=3"},"repository":{"type":"git","url":"git+https://github.com/amineREBBOUH/react-drag-drop-uploader.git"},"bugs":{"url":"https://github.com/amineREBBOUH/react-drag-drop-uploader/issues"},"homepage":"https://github.com/amineREBBOUH/react-drag-drop-uploader#readme","_id":"@amine_rebbouh/react-drag-drop-uploader@1.0.0","gitHead":"24b590cf0410a6a017a17e8e07a5e96faf0a001f","description":"A simple and customizable React component for drag-and-drop file uploading with TypeScript support.","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-YqDgru8v5GJKwdMdq5+6Z9HPScC0iiGXAjjuLBrsiJYziswVfSjEwRDYI1Q2342/OeMVfmtILPA1KxuwByAJ/A==","shasum":"775021864ba54c7673fd34de9d796599ab5e6a7b","tarball":"https://registry.npmjs.org/@amine_rebbouh/react-drag-drop-uploader/-/react-drag-drop-uploader-1.0.0.tgz","fileCount":6,"unpackedSize":13118,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDSGv92jKk7eEXTdNTqMZHVLfXodL6Xcge+unYndvB2DAiEAp9Hh3RgE7Cq9Sg2a4XH/kXC/NYpee4RocvnvqGmWyaw="}]},"_npmUser":{"name":"amine_rebbouh","email":"aminedevelopment@gmail.com"},"directories":{},"maintainers":[{"name":"amine_rebbouh","email":"aminedevelopment@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-drag-drop-uploader_1.0.0_1759336066678_0.11660104168624774"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-01T16:27:46.617Z","1.0.0":"2025-10-01T16:27:46.888Z","modified":"2025-10-01T16:27:47.181Z"},"maintainers":[{"name":"amine_rebbouh","email":"aminedevelopment@gmail.com"}],"description":"A simple and customizable React component for drag-and-drop file uploading with TypeScript support.","homepage":"https://github.com/amineREBBOUH/react-drag-drop-uploader#readme","repository":{"type":"git","url":"git+https://github.com/amineREBBOUH/react-drag-drop-uploader.git"},"bugs":{"url":"https://github.com/amineREBBOUH/react-drag-drop-uploader/issues"},"readme":"# React Drag & Drop File Uploader\n\nA simple and customizable React component for drag-and-drop file uploading with TypeScript support.\n\n## Features\n\n- 🖱️ Click to select files\n- 🖐️ Drag and drop files\n- 🎨 Tailwind CSS styling\n- ✅ File validation support\n- 📝 TypeScript support\n- 🎯 Lightweight and easy to use\n\n## Installation\n\n```bash\nnpm install react-drag-drop-uploader\n```\n\n## Prerequisites\n\nThis component requires the following peer dependencies:\n\n- React >=17\n- React DOM >=17\n- Tailwind CSS >=3\n\nMake sure you have Tailwind CSS configured in your project.\n\n## Basic Usage\n\n```tsx\nimport React from 'react';\nimport { DragDropComponent } from 'react-drag-drop-uploader';\n\nfunction App() {\n  const handleFile = (fileData: {\n    file: File;\n    preview: string;\n    name: string;\n    type: string;\n  }) => {\n    console.log('File selected:', fileData);\n    // Handle the file here\n  };\n\n  return (\n    <div className=\"w-96 h-64\">\n      <DragDropComponent onFile={handleFile} />\n    </div>\n  );\n}\n\nexport default App;\n```\n\n## Advanced Usage with File Validation\n\n```tsx\nimport React, { useState } from 'react';\nimport { DragDropComponent } from 'react-drag-drop-uploader';\n\nfunction App() {\n  const [selectedFile, setSelectedFile] = useState<File | null>(null);\n  const [preview, setPreview] = useState<string>('');\n\n  const handleFile = (fileData: {\n    file: File;\n    preview: string;\n    name: string;\n    type: string;\n  }) => {\n    setSelectedFile(fileData.file);\n    setPreview(fileData.preview);\n    console.log('File details:', {\n      name: fileData.name,\n      type: fileData.type,\n      size: fileData.file.size\n    });\n  };\n\n  // Validate only image files under 5MB\n  const validateFile = (file: File): boolean => {\n    const isImage = file.type.startsWith('image/');\n    const isUnder5MB = file.size < 5 * 1024 * 1024; // 5MB\n    \n    if (!isImage) {\n      alert('Please select an image file');\n      return false;\n    }\n    \n    if (!isUnder5MB) {\n      alert('File size must be under 5MB');\n      return false;\n    }\n    \n    return true;\n  };\n\n  return (\n    <div className=\"max-w-md mx-auto p-6\">\n      <h2 className=\"text-xl font-bold mb-4\">Upload an Image</h2>\n      \n      <div className=\"w-full h-64 mb-4\">\n        <DragDropComponent \n          onFile={handleFile} \n          validateFile={validateFile}\n        />\n      </div>\n\n      {selectedFile && (\n        <div className=\"mt-4\">\n          <h3 className=\"font-semibold\">Selected File:</h3>\n          <p>Name: {selectedFile.name}</p>\n          <p>Size: {(selectedFile.size / 1024).toFixed(2)} KB</p>\n          <p>Type: {selectedFile.type}</p>\n          \n          {preview && (\n            <div className=\"mt-2\">\n              <img \n                src={preview} \n                alt=\"Preview\" \n                className=\"max-w-full h-32 object-contain border rounded\"\n              />\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default App;\n```\n\n## File Upload Example\n\n```tsx\nimport React, { useState } from 'react';\nimport { DragDropComponent } from 'react-drag-drop-uploader';\n\nfunction FileUploader() {\n  const [uploading, setUploading] = useState(false);\n  const [uploadStatus, setUploadStatus] = useState<string>('');\n\n  const handleFile = async (fileData: {\n    file: File;\n    preview: string;\n    name: string;\n    type: string;\n  }) => {\n    setUploading(true);\n    setUploadStatus('Uploading...');\n\n    try {\n      const formData = new FormData();\n      formData.append('file', fileData.file);\n\n      const response = await fetch('/api/upload', {\n        method: 'POST',\n        body: formData,\n      });\n\n      if (response.ok) {\n        setUploadStatus('Upload successful!');\n      } else {\n        setUploadStatus('Upload failed!');\n      }\n    } catch (error) {\n      setUploadStatus('Upload error!');\n      console.error('Upload error:', error);\n    } finally {\n      setUploading(false);\n    }\n  };\n\n  const validateFile = (file: File): boolean => {\n    // Allow common document and image formats\n    const allowedTypes = [\n      'image/jpeg', 'image/png', 'image/gif',\n      'application/pdf', 'text/plain',\n      'application/msword',\n      'application/vnd.openxmlformats-officedocument.wordprocessingml.document'\n    ];\n    \n    if (!allowedTypes.includes(file.type)) {\n      alert('File type not allowed');\n      return false;\n    }\n    \n    // Max 10MB\n    if (file.size > 10 * 1024 * 1024) {\n      alert('File too large (max 10MB)');\n      return false;\n    }\n    \n    return true;\n  };\n\n  return (\n    <div className=\"p-6\">\n      <div className=\"w-full h-48\">\n        <DragDropComponent \n          onFile={handleFile} \n          validateFile={validateFile}\n        />\n      </div>\n      \n      {uploading && (\n        <div className=\"mt-4 text-center\">\n          <div className=\"inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600\"></div>\n        </div>\n      )}\n      \n      {uploadStatus && (\n        <div className={`mt-4 p-2 rounded text-center ${\n          uploadStatus.includes('successful') \n            ? 'bg-green-100 text-green-800' \n            : uploadStatus.includes('failed') || uploadStatus.includes('error')\n            ? 'bg-red-100 text-red-800'\n            : 'bg-blue-100 text-blue-800'\n        }`}>\n          {uploadStatus}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default FileUploader;\n```\n\n## API Reference\n\n### DragDropComponent Props\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `onFile` | `(fileData: FileData) => void` | Yes | Callback function called when a file is selected |\n| `validateFile` | `(file: File) => boolean` | No | Optional validation function. Return `false` to reject the file |\n\n### FileData Interface\n\n```tsx\ninterface FileData {\n  file: File;      // The original File object\n  preview: string; // Object URL for preview (remember to revoke it)\n  name: string;    // File name\n  type: string;    // MIME type\n}\n```\n\n## Styling\n\nThe component uses Tailwind CSS classes. The default styling includes:\n\n- Dashed border that changes color on hover and drag\n- Responsive hover states\n- Green highlight when dragging files over the component\n- Blue highlight on hover\n\nYou can customize the appearance by modifying the Tailwind classes or overriding them with your own CSS.\n\n## Memory Management\n\nRemember to revoke object URLs when you're done with them to prevent memory leaks:\n\n```tsx\nconst handleFile = (fileData: FileData) => {\n  // Use the preview URL\n  setPreviewUrl(fileData.preview);\n  \n  // Later, when you're done with the preview:\n  // URL.revokeObjectURL(fileData.preview);\n};\n```\n\n## Browser Support\n\nThis component works in all modern browsers that support:\n- HTML5 File API\n- Drag and Drop API\n- React 17+\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nMIT","readmeFilename":"README.md","_rev":"1-c04bf82a49018cf40f5c6f00a0913603"}