Zuletzt aktualisiert: 11. September

Individueller HTML-Datei-Upload-Button mit Drag-and-drop

Kevin van Zonneveld

Mitgründer · Amsterdam, Niederlande ·

Datei-Uploads sind für viele Webanwendungen unverzichtbar, doch das standardmäßige HTML-Dateifeld bietet oft keine moderne Nutzererfahrung. In dieser Anleitung zeigen wir Ihnen, wie Sie einen individuellen HTML-Datei-Upload-Button mit Drag-and-drop erstellen, um die Oberfläche Ihrer Webanwendung zu verbessern und die Interaktion der Nutzer zu vereinfachen.

Sehen wir uns an, wie Sie in HTML einen individuellen Datei-Upload-Button erstellen, der Drag-and-drop unterstützt.

Einführung in HTML-Datei-Upload-Buttons

Mit dem Standard-HTML-Element <input type="file"> können Nutzer Dateien auswählen, doch es bietet wenig Spielraum für Anpassungen. Indem Sie einen eigenen Datei-Upload-Button erstellen und Drag-and-drop integrieren, bieten Sie ein ansprechenderes und intuitiveres Upload-Erlebnis.

Grundlegendes Setup für HTML-Datei-Uploads

Beginnen Sie mit einem einfachen HTML-Formular für Datei-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>

Dieses Formular ist funktional, es fehlen jedoch visuelle Attraktivität und moderne Interaktionselemente.

Einen individuellen Datei-Upload-Button in HTML erstellen

Verbessern Sie das Formular, indem Sie das standardmäßige Dateifeld ausblenden und den Dateiauswahldialog mithilfe eines Label-Elements auslösen:

<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 diesem Codebeispiel gilt:

Das Element input wird mithilfe von CSS visuell ausgeblendet.
Das Element label ist mit dem Element input über das Attribut for verknüpft, sodass ein Klick darauf den Dateidialog öffnet.

Den individuellen Datei-Upload-Button mit CSS gestalten

Wenden Sie das folgende CSS an, um das Label als Button zu gestalten:

#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;
}

Dieses CSS blendet das standardmäßige Dateifeld aus, gestaltet das Label und fügt einen Hover-Effekt für eine bessere Nutzerinteraktion hinzu.

Drag-and-drop für Datei-Uploads hinzufügen

Eine Drag-and-drop-Oberfläche verbessert die Bedienbarkeit zusätzlich. Fügen Sie Ihrem HTML zunächst einen Ablagebereich hinzu:

<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>

Den Ablagebereich mit CSS gestalten

#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;
}

Dieses CSS definiert das Erscheinungsbild des Ablagebereichs, liefert visuelles Feedback während der Drag-Events und gestaltet die Fortschrittsleiste zur Verfolgung des Uploads.

Drag-and-drop mit JavaScript umsetzen

Der folgende JavaScript-Code verarbeitet Drag-and-drop-Events, aktualisiert die Fortschrittsleiste und sendet die Dateien an den 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)
}

Dieses Skript verhindert das Standardverhalten des Browsers, hebt den Ablagebereich während der Drag-Events hervor, verarbeitet abgelegte Dateien und steuert den Upload-Fortschritt.

Datei-Uploads serverseitig verarbeiten

Für die Verarbeitung hochgeladener Dateien auf dem Server benötigen Sie eine robuste Lösung. Das folgende Beispiel verwendet Node.js und Express mit Multer für die Dateiverarbeitung. Installieren Sie gepflegte Abhängigkeiten:

npm install express@^4.21.2 multer@^2.3.0 cors

Dieses lokale Beispiel ist kein authentifizierter Dienst. Ergänzen Sie vor dem Deployment eine Autorisierung und eine Inhaltsvalidierung und halten Sie das Upload-Verzeichnis außerhalb jedes Verzeichnisses, das als statische Dateien ausgeliefert wird.

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')
})

Dieses Beispiel erzwingt Größenbeschränkungen und weist nicht unterstützte deklarierte Typen und Erweiterungen mit einem Client-Fehler zurück. MIME-Typen und Dateinamen sind clientseitig kontrollierte Metadaten und kein Nachweis für den Dateiinhalt. Validieren Sie die tatsächlichen Daten, bevor Sie sie verarbeiten oder ausliefern.

Bewährte Verfahren für die Sicherheit von Datei-Uploads

Beachten Sie beim Umgang mit Uploads diese zentralen Maßnahmen:

Validieren Sie Dateien sowohl client- als auch serverseitig, indem Sie Dateitypen und -größen prüfen.
Speichern Sie Dateien außerhalb des Web-Roots, verwenden Sie zufällig generierte Dateinamen und erzwingen Sie strenge Dateiberechtigungen.
Begrenzen Sie Dateigrößen und gleichzeitige Uploads, um Missbrauch zu verhindern.
Verwenden Sie sichere Konfigurationen wie HTTPS, korrekte CORS-Einstellungen und Content Security Policies.
Setzen Sie Virenscans ein, um schädliche Dateien zu erkennen und in Quarantäne zu verschieben.

Wenn Sie diese Verfahren befolgen, stellen Sie ein sicheres und robustes System für Datei-Uploads sicher.

Fazit

Ein individueller HTML-Datei-Upload-Button mit Drag-and-drop verbessert nicht nur die Nutzererfahrung, sondern ermöglicht Ihnen auch, wesentliche Funktionen wie die Fortschrittsanzeige und erhöhte Sicherheit zu integrieren. Für anspruchsvollere Upload-Anforderungen – darunter TypeScript-Unterstützung, umfangreiche Fortschrittsanzeigen, Dateivorschauen und Cloud-Storage-Integration – bietet sich Uppy an, ein Open-Source-Dateiuploader, der modernen Entwicklungsanforderungen gerecht wird.

Jetzt wissen Sie, wie Sie in HTML einen individuellen Datei-Upload-Button hinzufügen und ihn um Drag-and-drop erweitern. Viel Spaß beim Programmieren!