The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Create a “quick send” file uploader

Here’s a simple “Quick Send” file uploader web app using HTML, JavaScript, and a backend with Node.js and Express. This uploader allows users to quickly upload a file and get a temporary link for download.


🛠 Frontend (HTML + JS)

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Quick Send File Uploader</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; } #uploadBox { border: 2px dashed #ccc; padding: 30px; cursor: pointer; width: 300px; margin: 0 auto; } #uploadBox:hover { background-color: #f9f9f9; } input[type="file"] { display: none; } .link { margin-top: 20px; } </style> </head> <body> <h1>Quick Send</h1> <div id="uploadBox" onclick="document.getElementById('fileInput').click()"> Click to upload a file <input type="file" id="fileInput" /> </div> <div class="link" id="downloadLink"></div> <script> document.getElementById('fileInput').addEventListener('change', async (event) => { const file = event.target.files[0]; if (!file) return; const formData = new FormData(); formData.append('file', file); const response = await fetch('/upload', { method: 'POST', body: formData }); const result = await response.json(); if (result.link) { document.getElementById('downloadLink').innerHTML = `<a href="${result.link}" target="_blank">Download File</a>`; } else { document.getElementById('downloadLink').innerText = 'Upload failed.'; } }); </script> </body> </html>

⚙️ Backend (Node.js + Express + Multer)

javascript
const express = require('express'); const multer = require('multer'); const path = require('path'); const fs = require('fs'); const { v4: uuidv4 } = require('uuid'); const app = express(); const PORT = 3000; // Directory for uploaded files const UPLOAD_DIR = path.join(__dirname, 'uploads'); if (!fs.existsSync(UPLOAD_DIR)) fs.mkdirSync(UPLOAD_DIR); // Multer config const storage = multer.diskStorage({ destination: (req, file, cb) => cb(null, UPLOAD_DIR), filename: (req, file, cb) => cb(null, uuidv4() + path.extname(file.originalname)) }); const upload = multer({ storage }); // Serve frontend app.use(express.static(path.join(__dirname, 'public'))); // Upload route app.post('/upload', upload.single('file'), (req, res) => { const fileUrl = `/download/${req.file.filename}`; res.json({ link: fileUrl }); }); // File download route app.get('/download/:filename', (req, res) => { const filePath = path.join(UPLOAD_DIR, req.params.filename); if (fs.existsSync(filePath)) { res.download(filePath); } else { res.status(404).send('File not found'); } }); app.listen(PORT, () => { console.log(`Quick Send running at http://localhost:${PORT}`); });

📁 Directory Structure

pgsql
quick-send/ ├── public/ │ └── index.html ← HTML/JS frontend ├── uploads/ ← Automatically created ├── server.js ← Backend Node.js file ├── package.json

📦 Install Dependencies

bash
npm init -y npm install express multer uuid

▶️ Run the App

bash
node server.js

Access it in your browser at: http://localhost:3000

Let me know if you want it password-protected or with expiration for links.

Share this Page your favorite way: Click any app below to share.

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Categories We Write About