Om het uploaden van meerdere bestanden snel en gemakkelijk te maken maken veel websites gebruik van zogenaamde dropzones. Je sleept je bestanden die wilt uploaden naar de “dropzone” en vervolgens worden ze 1 voor 1 geupload. Wil je deze functionaliteit implementeren, maak dan gebruik van de javascript library “Dropzone.js“. Deze library is makkelijk te implementeren en is makkelijk aanpasbaar. In dit artikel zal ik een aantal tips hoe je deze library kunt gebruiken en hoe je hem kunt configureren.

Installatie

1. Include de volgende Javascript library in je pagina: https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js
2. Voeg de volgende html toe aan je pagina:

   <form action="/file-upload"
         class="dropzone"
         id="my-awesome-dropzone"></form>

   en je hebt een werkende dropzone.

Basis voorbeeld

Voor een basis voorbeeld heb ik de volgende fiddle gemaakt. Bij deze fiddle is alles standaard gelaten zodat je met minimale inspanning een dropzone kunt maken.

Configuratie

Op de configuratie pagina van dropzone kun je een overzicht vinden van alle mogelijke opties die je kunt gebruiken om de dropzone naar jouw hand te zetten. Om de dropzone een beetje te stylen kun je gebruik maken van 2 voorbeeld stylesheets: dropzone.css (uitgebreid) of de basic.css (minimaal).

Tips en tricks

Er zijn vele configuratie opties die je kunt instellen. Hieronder zie je een aantal opties die ik het vaakst gebruik bij het configuren van Dropzone.

Url en paramName

Als je een form-element gebruikt en daar de dropzone klasse inzet dan zal dropzone het action attribuut van dit formulier gebruiken.  Gebruik je bijvoorbeeld een div-element (met een id attribuut !!), dan zul je in de javascript een url attribuut moeten toevoegen waar de file POST naartoe dient te gaan.

Dropzone.options.DropZoneID = {
  url: this.location,
  paramName: "file", //the parameter name containing the uploaded file
}

Autodiscover

Dropzone heeft autodiscover standaard aanstaan. Dat betekent dat elke object met de klassenaam “dropzone” als dropzone object wordt aangezien. Wil je dit echter niet of wil je meer controle over de dropzone, dan dien je de autodiscover optie uit te zetten  met

Dropzone.autoDiscover = false;

Hierna kun je de opties zelf toevoegen (zie script hieronder). Belangrijk is wel dat je autodiscover uitzet voordat je de nieuwe dropzone aanmaakt anders krijg je de javascript fout “Dropzone is already attached”.

Dropzone.autoDiscover = false;
//create new dropzone.
$("#myawesomedropzone").dropzone({
	paramName: 'form_file',
	acceptedFiles: '.pdf,.doc,.docx,.xls,.xlsx,.csv,.eml,.msg,.txt',
	url: this.location,
	dictDefaultMessage: 'upload here'
});

Uploaden van verschillende bestandstypes

Met de optie acceptedFiles kun je ervoor zorgen dat je alleen bepaalde bestandstypen kunt uploaden. Dit kan door zowel de bestandsextensies te gebruiken (bijv. .png, .jpg) of door het mimetype van het bestand (bijv. image/*).

Extra form elementen meesturen

Onder de optie “init” kun je een functie aanmaken met verschillende events.  Een overzicht van de events vind je hier. Bij het event “sending” kun je vervolgens extra form elementen toevoegen die je variabel kunt invullen. De waardes van deze variabelen kunnen dan in de POST worden uitgelezen.

Standaard tekst veranderen

Standaard staat er in de Dropzone de tekst “Drop files here to upload”. Dit wil je bijna altijd aanpassen. Dit kan door in de options settings de waarde van de parameter “dictDefaultMessage” aan te passen.

Verdwijnen van de button na upload

Als je een bestand upload, dan zie je een kleine preview van het bestand tijdens het uploaden. Is de upload gelukt, dan kun je ervoor kiezen om de button te laten verdwijnen. Dit kan in het event “succes”. Voor de voorbeeldcode zie deze jsfiddle.