[Web uploaden vereenvoudigd] De ultieme Dropzone.js gids

De ultieme Dropzone.js gids

Doel - Begrijpen wat Dropzone.js is en waarom je het moet gebruiken - Stap voor stap leren van installatie tot basisgebruik en aanpassing - Praktische voorbeelden en tips met code

1. Wat is Dropzone.js?

Dropzone.js is een open‑source JavaScript‑bibliotheek die het implementeren van HTML5‑bestanden uploaden vereenvoudigt. - Drag & Drop: Sleep een bestand met de muis en het uploadt meteen. - Voorbeeld: Afbeeldingen krijgen automatisch een thumbnail. - Meerdere bestanden: Upload meerdere bestanden tegelijk. - Backend integratie: Via Ajax worden bestanden naar de server gestuurd en wordt de respons verwerkt.

Waarom Dropzone.js gebruiken? - Gebruikerservaring: Intuïtieve UI maakt uploaden makkelijk. - Ontwikkelgemak: Geen ingewikkelde uploadlogica zelf schrijven. - Uitbreidbaarheid: Opties en events voldoen aan bijna alle eisen.

2. Installatie

2.1 Via CDN

De eenvoudigste manier is een CDN te gebruiken. Voeg het volgende toe aan je index.html.

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" />
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

Tip: De nieuwste versie vind je op unpkg.

2.2 Via NPM / Yarn

Voor een project met npm kun je het installeren met:

npm install dropzone
# of
yarn add dropzone

Na installatie importeer je het:

import Dropzone from 'dropzone';

Let op: Zet Dropzone.autoDiscover = false; om automatische initialisatie te voorkomen.

3. Basisgebruik

3.1 HTML

<form action="/upload" class="dropzone" id="myDropzone"></form>

• action geeft het server‑endpoint waar het bestand naartoe gaat.
• class="dropzone" zorgt dat Dropzone het formulier automatisch herkent.

3.2 JavaScript

Dropzone.autoDiscover = false; // voorkom automatische initialisatie

const myDropzone = new Dropzone('#myDropzone', {
  paramName: 'file',          // naam van het parameter in de server
  maxFilesize: 5,             // maximale bestandsgrootte (MB)
  acceptedFiles: 'image/*',   // toegestane bestandstypes
  dictDefaultMessage: 'Sleep hier een bestand of klik om te uploaden',
  init: function () {
    this.on('success', function (file, response) {
      console.log('Upload geslaagd:', response);
    });
    this.on('error', function (file, errorMessage) {
      console.error('Upload mislukt:', errorMessage);
    });
  }
});

Belangrijkste opties - url: URL waar het bestand naartoe gaat (alternatief voor action). - maxFiles: maximaal aantal bestanden per upload. - uploadMultiple: of meerdere bestanden tegelijk. - autoProcessQueue: of bestanden automatisch worden verzonden (bij handmatige verzending processQueue() aanroepen).

4. Aanpassing

4.1 Stijl van de thumbnail

Dropzone toont standaard een thumbnail voor afbeeldingen. Met CSS kun je de stijl aanpassen.

/* Thumbnail grootte aanpassen */
.dropzone .dz-image img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

/* Bestandnaam stijl */
.dropzone .dz-details .dz-filename {
  font-weight: bold;
}

4.2 Communicatie met de server

De server moet het bestand ontvangen en een JSON‑antwoord terugsturen. Voorbeeld met Node.js + Express:

const express = require('express');
const multer  = require('multer');
const upload = multer({ dest: 'uploads/' });

const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
  // Bestandsinformatie staat in req.file
  res.json({ success: true, filename: req.file.filename });
});

app.listen(3000, () => console.log('Server draait op http://localhost:3000'));

Tip: De naam in upload.single('file') moet overeenkomen met paramName in Dropzone.

4.3 Bestand verwijderen

Dropzone kan een DELETE‑verzoek sturen wanneer een bestand wordt verwijderd.

const myDropzone = new Dropzone('#myDropzone', {
  // ...
  dictRemoveFile: 'Verwijderen',
  init: function () {
    this.on('removedfile', function (file) {
      fetch('/delete', {
        method: 'DELETE',
        body: JSON.stringify({ filename: file.upload.filename }),
        headers: { 'Content-Type': 'application/json' }
      });
    });
  }
});

5. Praktische tips

6. Afsluiting

Dropzone.js levert een krachtige upload‑UI met minimale configuratie. - Start: CDN of npm → autoDiscover = false → HTML + JS. - Aanpassen: Gebruik opties, events en CSS. - Server: Combineer met middleware zoals multer voor eenvoudige opslag.

Ga verder met het verkennen van meerdere bestanden en geavanceerde preview‑aanpassingen om de gebruikerservaring nog verder te verbeteren.

Meer informatie - Officiële documentatie - Voorbeeldcode op GitHub

Veel succes! 🚀