Custom HTML file upload button with drag-and-drop

Kevin van Zonneveld

Co-founder · Amsterdam, The Netherlands ·

File uploads are essential for many web applications, yet the default HTML file input often lacks a modern user experience. In this guide, we show you how to build a custom HTML file upload button with drag-and-drop functionality to enhance your web application's interface and streamline user interactions.

Let's explore how to create a custom file upload button in HTML that supports drag-and-drop capabilities.

Introduction to HTML file upload buttons

The standard HTML <input type="file"> element lets users select files, but it offers little room for customization. By creating your own file upload button and integrating drag-and-drop functionality, you can deliver a more engaging and intuitive upload experience.

Basic HTML file upload setup

Begin with a simple HTML form for file uploads:

<form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" id="file-input" name="file" />
  <button type="submit">Upload</button>
</form>

This form is functional but lacks visual appeal and modern interaction elements.

Creating a custom file upload button in HTML

Enhance the form by hiding the default file input and using a label element to trigger the file selection dialog:

<form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
  <label for="file-input" id="file-input-label">
    <input type="file" id="file-input" name="file" />
    Choose a file
  </label>
  <button type="submit">Upload</button>
</form>

In this snippet:

The input element is visually hidden using CSS.
The label is linked to the input via the for attribute, so clicking it opens the file dialog.

Styling the custom file upload button with CSS

Apply the following CSS to style the label as a button:

#file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
}

#file-input-label:focus-within {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

#file-input-label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
}

#file-input-label:hover {
  background-color: #0056b3;
}

This CSS hides the default file input, styles the label, and adds a hover effect for better user interaction.

Adding drag-and-drop file upload functionality

A drag-and-drop interface further improves usability. First, add a drop area to your HTML:

<div id="drop-area">
  <p>Drag &amp; drop files here</p>
  <p>or</p>
  <label for="file-input" id="file-input-label">
    <input type="file" id="file-input" name="file" form="upload-form" />
    Choose a file
  </label>
  <div id="progress-bar" class="progress-bar"></div>
</div>
<form id="upload-form" action="/upload" method="post" enctype="multipart/form-data">
  <button type="submit">Upload</button>
</form>

Styling the drop area with CSS

#drop-area {
  border: 2px dashed #007bff;
  border-radius: 4px;
  padding: 20px;
  text-align: center;
}

#drop-area.highlight {
  background-color: #e9ecef;
}

.progress-bar {
  width: 100%;
  height: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  margin-top: 10px;
}

.progress-bar-fill {
  height: 100%;
  background-color: #007bff;
  border-radius: 5px;
  width: 0;
  transition: width 0.3s ease-in-out;
}

This CSS defines the appearance of the drop area, provides visual feedback during drag events, and styles the progress bar for upload tracking.

Implementing drag-and-drop with JavaScript

The following JavaScript code handles drag-and-drop events, updates the progress bar, and sends the files to the server:

const dropArea = document.getElementById('drop-area')
const fileInput = document.getElementById('file-input')
const progressBar = document.getElementById('progress-bar')

// Prevent default behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
  dropArea.addEventListener(eventName, preventDefaults, false)
})

function preventDefaults(e) {
  e.preventDefault()
  e.stopPropagation()
}

// Highlight drop area when a file is dragged over it
;['dragenter', 'dragover'].forEach((eventName) => {
  dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach((eventName) => {
  dropArea.addEventListener(eventName, unhighlight, false)
})

function highlight() {
  dropArea.classList.add('highlight')
}

function unhighlight() {
  dropArea.classList.remove('highlight')
}

// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)

function handleDrop(e) {
  const dt = e.dataTransfer
  const files = dt.files
  handleFiles(files)
}

function updateProgress(percent) {
  const progressBarFill =
    progressBar.querySelector('.progress-bar-fill') || document.createElement('div')
  progressBarFill.className = 'progress-bar-fill'
  progressBarFill.style.width = `${percent}%`
  if (!progressBar.contains(progressBarFill)) {
    progressBar.appendChild(progressBarFill)
  }
}

function handleFiles(files) {
  const formData = new FormData()
  for (let i = 0; i < files.length; i++) {
    formData.append('file', files[i])
  }
  uploadFiles(formData)
}

function uploadFiles(formData) {
  const xhr = new XMLHttpRequest()

  xhr.upload.addEventListener('progress', (e) => {
    if (e.lengthComputable) {
      const percent = (e.loaded / e.total) * 100
      updateProgress(percent)
    }
  })

  xhr.addEventListener('load', () => {
    if (xhr.status === 200) {
      console.log('Upload completed')
    } else {
      console.error('Upload failed:', xhr.statusText)
    }
  })

  xhr.addEventListener('error', () => {
    console.error('Upload failed')
  })

  xhr.open('POST', '/upload')
  xhr.send(formData)
}

This script prevents default browser behavior, highlights the drop area during drag events, processes dropped files, and manages the upload progress.

Handling file uploads on the server side

When processing uploaded files on the server, you need a robust solution. The following example uses Node.js and Express with Multer for file handling. Install maintained dependencies:

npm install express@^4.21.2 multer@^2.3.0 cors

This local example is not an authenticated service. Before deployment, add authorization and content validation, and keep the upload directory outside any directory served as static files.

const express = require('express')
const multer = require('multer')
const path = require('path')
const cors = require('cors')

const app = express()

// Configure CORS for production environments
app.use(
  cors({
    origin: process.env.ALLOWED_ORIGIN || 'http://localhost:3000',
    methods: ['GET', 'POST'],
    allowedHeaders: ['Content-Type'],
  }),
)

// Multer creates a string destination if needed; never serve this directory directly.
const storage = multer.diskStorage({
  destination: 'uploads/',
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9)
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname))
  },
})

const upload = multer({
  storage: storage,
  limits: {
    fileSize: 5 * 1024 * 1024, // 5MB limit
    files: 10,
  },
  fileFilter: (req, file, cb) => {
    // Allowed file types: jpeg, jpg, png, gif
    const mimetype = ['image/jpeg', 'image/png', 'image/gif'].includes(file.mimetype)
    const extname = ['.jpg', '.jpeg', '.png', '.gif'].includes(path.extname(file.originalname).toLowerCase())

    if (mimetype && extname) {
      return cb(null, true)
    }
    const error = new Error('Only image files are allowed')
    error.code = 'UNSUPPORTED_FILE_TYPE'
    cb(error)
  },
})

app.post('/upload', (req, res) => {
  upload.array('file')(req, res, (err) => {
    if (err instanceof multer.MulterError || err?.code === 'UNSUPPORTED_FILE_TYPE') {
      return res.status(400).json({ error: 'File type, size, or count is not allowed' })
    } else if (err) {
      return res.status(500).json({ error: 'Could not store the upload' })
    }

    if (!req.files || req.files.length === 0) {
      return res.status(400).json({ error: 'No files uploaded.' })
    }

    res.json({ message: 'Files uploaded successfully!' })
  })
})

app.listen(3000, '127.0.0.1', () => {
  console.log('Server started on http://localhost:3000')
})

This example enforces size limits and rejects unsupported declared types and extensions with a client error. MIME types and filenames are client-controlled metadata, not proof of file contents. Validate the actual data before processing or serving it.

Best practices for file upload security

When handling uploads, consider these key measures:

Validate files on both the client and server sides by checking file types and sizes.
Store files outside the web root, use randomized filenames, and enforce strict file permissions.
Set limits on file sizes and concurrent uploads to prevent abuse.
Use secure configurations, such as HTTPS, proper CORS settings, and content security policies.
Implement anti-virus scanning to detect and quarantine malicious files.

By following these practices, you ensure a secure and robust file upload system.

Conclusion

Creating a custom HTML file upload button with drag-and-drop functionality not only improves user experience but also allows you to integrate essential features like progress tracking and enhanced security. For more advanced upload requirements—including TypeScript support, rich progress indicators, file previews, and cloud storage integration—consider using Uppy, an open-source file uploader that meets modern development needs.

Now you know how to add a custom file upload button in HTML and enhance it with drag-and-drop capabilities. Happy coding!