The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing

Categories We Write About

Create a “quick send” file uploader

Written by

in

Computer Science

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.

See all the ways to share this page

Check Out Our Newest Posts we wrote about

Categories We Write About