@dev-codergautam/drag-and-drop-uploader 1.0.0

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@dev-codergautam/drag-and-drop-uploader",
+  "version": "1.0.0",
+  "description": "A lightweight drag-and-drop file uploader with previews.",
+  "main": "src/index.js",
+  "type": "module",
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "upload",
+    "drag-drop",
+    "preview",
+    "vanilla-js"
+  ],
+  "author": "Your Name",
+  "license": "MIT"
+}

package/readme.md

@@ -0,0 +1,123 @@
+A good `README.md` is the "front door" of your project. It needs to tell developers exactly what the package does, how to install it, and—most importantly—how to get it running in 60 seconds.
+
+Here is a professional, well-structured `README.md` tailored for your **@dev-codergautam/drag-dropuploader** package.
+
+---
+
+# @dev-codergautam/drag-dropuploader
+
+A lightweight, zero-dependency Vanilla JavaScript library for creating beautiful drag-and-drop file upload zones with real-time image previews.
+
+## 🚀 Features
+
+* **Drag & Drop Support**: Seamlessly handle file drops.
+* **Clipboard Integration**: Supports pasting images directly from the clipboard.
+* **Live Previews**: Automatically generates and displays thumbnails for images.
+* **State Management**: Easily retrieve the current list of files for form submission.
+* **Customizable**: Filter by file types and hook into update events.
+
+---
+
+## 📦 Installation
+
+Install the package via NPM:
+
+```bash
+npm install @dev-codergautam/drag-dropuploader
+
+```
+
+---
+
+## 🛠 Usage
+
+### 1. Vanilla JavaScript
+
+First, create a container in your HTML:
+
+```html
+<div id="my-uploader"></div>
+
+```
+
+Then, initialize the uploader in your JavaScript file:
+
+```javascript
+import SimpleUploader from '@dev-codergautam/drag-dropuploader';
+import '@dev-codergautam/drag-dropuploader/src/styles.css';
+
+const uploader = new SimpleUploader('#my-uploader', {
+  allowedTypes: ['image/jpeg', 'image/png'],
+  onFilesUpdate: (files) => {
+    console.log("Files updated:", files);
+  }
+});
+
+// To get the files when submitting a form:
+const files = uploader.getFiles();
+
+```
+
+### 2. React (Vite) Implementation
+
+Since this is a DOM-based library, use the `useEffect` hook to initialize it.
+
+```jsx
+import { useEffect } from 'react';
+import SimpleUploader from '@dev-codergautam/drag-dropuploader';
+import '@dev-codergautam/drag-dropuploader/src/styles.css';
+
+export default function UploaderComponent() {
+  useEffect(() => {
+    const uploader = new SimpleUploader('#uploader-container', {
+      onFilesUpdate: (files) => console.log(files)
+    });
+  }, []);
+
+  return <div id="uploader-container"></div>;
+}
+
+```
+
+---
+
+## ⚙️ Configuration Options
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `allowedTypes` | `Array` | `['image/']` | Array of MIME types or prefixes to allow. |
+| `onFilesUpdate` | `Function` | `null` | Callback function triggered whenever files are added or removed. |
+
+---
+
+## 📖 API Methods
+
+| Method | Description |
+| --- | --- |
+| `.getFiles()` | Returns an `Array` of the currently selected `File` objects. |
+| `.removeFile(file)` | Removes a specific file object from the internal state and updates the UI. |
+
+---
+
+## 🎨 Custom Styling
+
+The package comes with default styles, but you can override them in your own CSS. Key classes include:
+
+* `.upload-container`: The main dropzone area.
+* `.drag-over`: Applied to the container when a file is being hovered over it.
+* `.image-preview-wrapper`: The wrapper for each individual image thumbnail.
+* `.remove-icon`: The "X" button used to delete a preview.
+
+---
+
+## 📄 License
+
+MIT © [dev-codergautam](https://www.google.com/search?q=https://github.com/dev-codergautam)
+
+---
+
+### Pro-Tip for your GitHub:
+
+Include a **GIF** or a **screenshot** at the top of the README! Developers love seeing the UI in action before they install a package.
+
+**Would you like me to help you write a `.gitignore` file so you don't accidentally upload your `node_modules` to GitHub?**

package/src/index.js

@@ -0,0 +1,110 @@
+export default class SimpleUploader {
+  constructor(containerSelector, options = {}) {
+    this.container = document.querySelector(containerSelector);
+    this.options = {
+      allowedTypes: options.allowedTypes || ["image/"],
+      onFilesUpdate: options.onFilesUpdate || null,
+      ...options,
+    };
+
+    this.selectedFiles = [];
+    this.init();
+  }
+
+  init() {
+    this.renderBaseHTML();
+    this.setupEventListeners();
+  }
+
+  renderBaseHTML() {
+    this.container.classList.add("upload-container");
+    this.container.innerHTML = `
+      <p id="prompt-text">Drag & drop files, paste, or <b>click to browse</b></p>
+      <input type="file" id="file-input" multiple hidden />
+      <div id="preview-container"></div>
+    `;
+
+    this.promptText = this.container.querySelector("#prompt-text");
+    this.fileInput = this.container.querySelector("#file-input");
+    this.previewContainer = this.container.querySelector("#preview-container");
+  }
+
+  setupEventListeners() {
+    // Click to browse
+    this.promptText.addEventListener("click", () => this.fileInput.click());
+
+    this.fileInput.addEventListener("change", (e) => {
+      this.handleFiles(e.target.files);
+      e.target.value = "";
+    });
+
+    // Drag and Drop
+    ["dragenter", "dragover", "dragleave", "drop"].forEach((name) => {
+      this.container.addEventListener(name, (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      });
+    });
+
+    this.container.addEventListener("dragover", () => this.container.classList.add("drag-over"));
+    this.container.addEventListener("dragleave", () => this.container.classList.remove("drag-over"));
+    this.container.addEventListener("drop", (e) => {
+      this.container.classList.remove("drag-over");
+      this.handleFiles(e.dataTransfer.files);
+    });
+
+    // Paste
+    window.addEventListener("paste", (e) => {
+      const items = e.clipboardData.items;
+      const files = [];
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].kind === "file") files.push(items[i].getAsFile());
+      }
+      if (files.length > 0) this.handleFiles(files);
+    });
+  }
+
+  handleFiles(files) {
+    const fileArray = Array.from(files).filter(file => 
+      this.options.allowedTypes.some(type => file.type.startsWith(type))
+    );
+    
+    this.selectedFiles.push(...fileArray);
+    this.renderPreviews();
+    
+    if (this.options.onFilesUpdate) {
+      this.options.onFilesUpdate(this.selectedFiles);
+    }
+  }
+
+  removeFile(fileToRemove) {
+    this.selectedFiles = this.selectedFiles.filter(f => f !== fileToRemove);
+    this.renderPreviews();
+    if (this.options.onFilesUpdate) {
+      this.options.onFilesUpdate(this.selectedFiles);
+    }
+  }
+
+  renderPreviews() {
+    this.previewContainer.innerHTML = "";
+    this.selectedFiles.forEach((file) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onloadend = () => {
+        const wrapper = document.createElement("div");
+        wrapper.className = "image-preview-wrapper";
+        wrapper.innerHTML = `
+          <img src="${reader.result}" alt="${file.name}">
+          <span class="remove-icon">&times;</span>
+        `;
+        wrapper.querySelector(".remove-icon").onclick = () => this.removeFile(file);
+        this.previewContainer.appendChild(wrapper);
+      };
+    });
+  }
+
+  // Helper to get current files from outside
+  getFiles() {
+    return this.selectedFiles;
+  }
+}

package/src/styles.css

@@ -0,0 +1,71 @@
+.upload-container {
+  width: 100%;
+  max-width: 500px;
+  min-height: 200px;
+  border: 2px dashed #ccc;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  transition:
+    background 0.3s,
+    border-color 0.3s;
+  padding: 20px;
+  font-family: sans-serif;
+  position: relative; /* Context for children elements */
+}
+
+/* Make only the prompt text clickable, not the whole container */
+#prompt-text {
+  cursor: pointer;
+  margin: 0;
+}
+
+.upload-container.drag-over {
+  background: #f0f8ff;
+  border-color: #007bff;
+}
+
+#preview-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+/* Styling for the wrapper of each preview */
+.image-preview-wrapper {
+  position: relative; /* Context for remove-icon positioning */
+  margin: 5px;
+  width: 80px;
+  height: 80px;
+}
+
+.image-preview-wrapper img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 5px;
+}
+
+/* The style for the cross icon */
+.remove-icon {
+  position: absolute;
+  top: -8px; /* Slightly offset from the corner */
+  right: -8px;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.6);
+  color: white;
+  padding: 3px 6px;
+  border-radius: 50%;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 1;
+  z-index: 10; /* Ensure it sits on top of everything */
+  transition: background 0.2s;
+}
+
+.remove-icon:hover {
+  background: rgba(255, 0, 0, 0.8); /* Turns red on hover */
+}