DocumentDrop 🚀

Drop it. Scan it. Share it. Fast, local file transfers with QR-powered mobile uploads. 📁➡️📱

---

---

Table of Contents

• Overview ✨
• Features 🎯
• Quick Start ⚡️
• Running Locally 🖥️
• Project Structure 📂
• API / Uploads 📤
• QR Workflow 🔗
• Supported File Types 🗂️
• Storage & Security 🔒
• License 📝

---

Overview

DocumentDrop is a lightweight, privacy-first tool for moving files around your local network. Drag and drop files anywhere on the screen, see instant previews and status updates, and scan a QR code to upload from phones — no accounts, no cloud. Perfect for quick transfers during work sessions or demos. 🎉

Features

• 🖱️ Full-screen drag-and-drop upload surface (entire foreground is the drop zone)
• 🃏 Dynamic file cards showing filename, sender, size, and upload status
• 👀 Real-time previews for images, PDFs, videos, and documents
• 📷 QR code generation for mobile uploads (phone → PC)
• 🔁 Multiple-device uploads with immediate UI updates
• 💾 Persistent disk storage via Multer (configurable path)
• ⚙️ Built with React, Vite, Tailwind CSS, Framer Motion, Express, and Multer

Quick Start

Prerequisites:

• Node.js v16+ and npm

Install once:

git clone <repo-url>
cd DocumentDrop

# frontend deps
cd client
npm install

# server deps
cd ../server
npm install

Running Locally

Start the backend:

cd server
node server.js
# server runs at http://localhost:3000

Start the frontend:

cd client
npm run dev
# dev server runs at http://localhost:5173

Open the frontend URL, then drag-and-drop files anywhere on screen. Files are saved to server/uploads by default. ✨

Project Structure

DocumentDrop/
├─ client/        # React + Vite app (UI)
│  ├─ src/
│  │  ├─ components/
│  │  │  ├─ Foreground.jsx   # drag & drop surface
│  │  │  ├─ Cards.jsx        # file cards + previews
│  │  │  └─ FileUpload.jsx   # upload helpers
│  │  └─ App.jsx
│  └─ index.html
├─ server/        # Express backend
│  ├─ server.js
│  ├─ views/
│  │  └─ index.ejs
│  └─ uploads/    # default storage location
└─ planeREADME.txt

API / Uploads

• Endpoint: POST /upload 📬
• Upload field name: dataFile
• Storage: disk via Multer (default server/uploads)

Quick curl example:

curl -F "dataFile=@/path/to/file.jpg" http://localhost:3000/upload

QR Workflow

1. Server/startup generates a QR code that points to the upload page. 📟
2. Scan the QR with your phone; it opens the upload UI. 📱
3. Upload from your phone and watch the file appear instantly in the desktop UI. 🚀

Supported File Types

• Images (jpg, png, gif) 🖼️
• PDFs 📄
• Videos 🎬
• Documents (docx, odt, etc.) 📝
• Archives (zip, tar) 📦
• Text files (txt, md) ✂️

Storage & Security

• Files remain local — no cloud services involved. 🛡️
• Default folder: server/uploads
• Recommended use: private local networks. Avoid exposing the server to the public internet without additional auth and hardening.

Production Build

Build the frontend:

cd client
npm run build
# artifacts in client/dist

Serve client/dist behind a reverse proxy or static host for production.

Developer Notes

• Drag-and-drop UI: client/src/components/Foreground.jsx
• Cards & previews: client/src/components/Cards.jsx
• Upload handling: server/server.js (Multer)

Contributing

Found a bug or want a feature? Open an issue or PR — contributions welcome! 🤝

License

MIT License

Author

DocumentDrop Project — built with ❤️ for local file sharing