Skip to content

Allt om WordPress, webbutveckling — och mer därtill

📤 Filuppladdning med dra och släpp med Dropzone.js och PHP
Webbutveckling
9 min1,775 ord

📤 Filuppladdning med dra och släpp med Dropzone.js och PHP

Användare förväntar sig att kunna ladda upp filer till en webbplats genom att helt enkelt dra dem till webbläsarfönstret. "Välj fil"-knappen och filutforskaren upplevs redan som onödiga steg. Men att skriva dra-och-släpp från grunden i JavaScript innebär flera hundra rader kod, förloppsindikatorer, förhandsvisningar och felhantering. Som tur är finns ett färdigt bibliotek som täcker allt detta direkt.

Dropzone.js är ett JavaScript-bibliotek med öppen källkod för filuppladdning via dra-och-släpp. Det visar bildförhandsvisningar, en förloppsindikator och kräver inte jQuery. Det fungerar med vilket serverspråk som helst: PHP, Node.js, Python. I den här guiden får du hela cykeln från installation till produktionsklart upplägg i sex steg.

💡 Snabb översikt:

  • Vad det gör: Dropzone.js-biblioteket gör vilket HTML-element som helst till en droppzon för filer med AJAX-överföring till servern.
  • Så installerar du: en CDN-länk (unpkg eller jsDelivr) eller ett npm-paket; båda alternativen tas upp i första steget.
  • Så hanterar du på servern: ett PHP-skript tar emot filen via $_FILES, precis som ett vanligt formulär; det tredje steget innehåller färdig kod.
  • Var det används: kontaktformulär med bilagor, avataruppladdningar, massimport av bilder till ett WordPress-galleri.

Steg 1: Installera Dropzone.js

Det snabbaste sättet är att inkludera biblioteket via CDN. Lägg till denna tagg i sidans <head>:

1<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

CSS-filen inkluderas separat:

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

Om du använder en bundler, installera via npm:

1npm install dropzone

Och importera det i din JS-fil:

1import Dropzone from "dropzone";

Observera att version 5.9 är den senaste stabila utgåvan i början av 2026. Version sex är i betastatus och rekommenderas ännu inte för produktion. Projektets repository finns nu på github.com/dropzone/dropzone (tidigare enyo/dropzone).

Steg 2: Grundläggande HTML-uppmärkning och initiering

Skapa ett formulär med klassen dropzone. Dropzone hittar det automatiskt och gör om det till en droppzon:

1<form action="/upload.php"
2      class="dropzone"
3      id="my-dropzone"></form>

Det är allt. När en användare drar en fil till detta formulär skickar biblioteket den via en AJAX-förfrågan till URL:en i action-attributet. På serversidan kommer filen i $_FILES['file'], precis som vid en vanlig inskickning via <input type="file">.

Utvecklare som skriver kod för filuppladdning

Om du behöver en reservlösning för webbläsare utan JavaScript, lägg till ett vanligt fält i formuläret:

1<form action="/upload.php" class="dropzone">
2  <input name="file" type="file" multiple />
3</form>

Knappen "Välj fil" visas bara när JavaScript inte är tillgängligt. Med JS aktiverat döljer Dropzone den och visar sin egen dropzon.

Steg 3: Hantera filer på servern

Ett PHP-skript tar emot uppladdningar på samma sätt som ett vanligt formulär. Här är den minimala versionen som fungerar:

1<?php
2if (!empty($_FILES)) {
3    $uploadDir = __DIR__ . '/uploads/';
4 
5    if (!is_dir($uploadDir)) {
6        mkdir($uploadDir, 0755, true);
7    }
8 
9    $originalName = basename($_FILES['file']['name']);
10    $targetPath   = $uploadDir . time() . '_' . $originalName;
11 
12    if (move_uploaded_file($_FILES['file']['tmp_name'], $targetPath)) {
13        http_response_code(200);
14        echo json_encode(['status' => 'ok', 'file' => $targetPath]);
15    } else {
16        http_response_code(500);
17        echo json_encode(['status' => 'error', 'message' => 'Failed to save file']);
18    }
19}

Vad som händer här:

  • Skriptet skapar en uploads/-mapp om den inte finns.
  • time() läggs till originalfilnamnet, vilket förhindrar namnkonflikter.
  • basename() tar bort eventuella path traversal-attacker (försök att ta sig ur mappen via ../).
  • Dropzone förväntar sig HTTP 200 från servern; annars betraktas uppladdningen som misslyckad och ett fel visas.

För produktion, lägg till validering av filändelse och MIME-typ:

1$allowed = ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'zip'];
2$ext = strtolower(pathinfo($originalName, PATHINFO_EXTENSION));
3 
4if (!in_array($ext, $allowed)) {
5    http_response_code(400);
6    echo json_encode(['status' => 'error', 'message' => 'Invalid file type']);
7    exit;
8}

Steg 4: Begränsa antal, storlek och typ av filer

De tre vanligaste Dropzone-inställningarna konfigureras via en JavaScript-konfiguration:

1Dropzone.options.myDropzone = {
2  maxFiles: 10,
3  maxFilesize: 5,          // In megabytes
4  acceptedFiles: 'image/*,.pdf',
5  dictDefaultMessage: 'Drag files here or click to select'
6};

Genomgång av alternativen:

  • maxFiles: hur många filer användaren kan ladda upp samtidigt. Som standard finns ingen gräns; i exemplet högst 10.
  • maxFilesize: maximal storlek för en enskild fil i megabyte. Värdet 5 betyder 5 MB. I äldre biblioteksversioner var standardvärdet 256 MB; i nuvarande 5.x är det också 256, så ange uttryckligen din egen gräns.
  • acceptedFiles: en kommaseparerad sträng med MIME-typer. Mönstret image/* tillåter alla bilder, .pdf lägger till PDF i listan. Se den fullständiga listan över MIME-typer i Dropzone-dokumentationen.
  • dictDefaultMessage: texten användaren ser i den tomma uppladdningszonen (engelska i detta exempel).

Nyckeln myDropzone i Dropzone.options.myDropzone är camelCase-versionen av HTML-attributet id="my-dropzone". Bindestreck tas bort och varje efterföljande ord får stor bokstav: my-dropzone → myDropzone, file-upload-area → fileUploadArea.

Alternativen resizeWidth och resizeHeight låter dig förminska bilder på klientsidan innan de skickas. Detta sparar användarens bandbredd och minskar serverbelastningen, särskilt när besökare laddar upp mobilbilder på 10-15 MB styck. Ange båda parametrarna tillsammans:

1Dropzone.options.myDropzone = {
2  resizeWidth: 1200,
3  resizeHeight: 1200,
4  resizeQuality: 0.8,
5  resizeMethod: 'contain'
6};

Metoden contain anpassar bilden inom de givna gränserna utan att beskära, medan crop beskär till exakta mått. En kvalitet på 0.8 är praktiskt taget omöjlig att skilja från originalet men minskar filstorleken 4-7 gånger. Viktigt: storleksändring fungerar bara med bildfiler; PDF:er och arkiv skickas igenom som de är. Webbläsaren utför storleksändringen via Canvas API, så inga extra bibliotek behövs.

Steg 5: Manuell filinlämning

Som standard skickar Dropzone en fil till servern direkt efter att den lagts till. Det är inte alltid praktiskt: ibland behöver du låta användaren fylla i formulärfält bredvid uppladdningszonen och skicka allt med en enda knapp.

Inaktivera automatisk uppladdning med flaggan autoProcessQueue: false och koppla inlämningen till en extern knapp:

1Dropzone.options.myDropzone = {
2  autoProcessQueue: false,
3  maxFilesize: 5,
4  init: function () {
5    const myDropzone = this;
6    const submitBtn = document.querySelector('#btnUpload');
7 
8    submitBtn.addEventListener('click', function () {
9      if (myDropzone.getQueuedFiles().length === 0) {
10        alert('No files to upload');
11        return;
12      }
13      myDropzone.processQueue();
14    });
15 
16    this.on('success', function (file, response) {
17      console.log('File uploaded:', file.name);
18    });
19  }
20};

Nyckelpunkten här är metoden processQueue(). Den utlöser inlämningen av alla filer som samlats i kön. Händelsen success aktiveras för varje fil individuellt, vilket gör att du kan uppdatera gränssnittet eller spara den uppladdade filens ID i ett dolt formulärfält.

Steg 6: Skicka extra data tillsammans med filen

Ibland behöver du bifoga serviceparametrar till en uppladdning: användar-ID, dokumentstatus, vald kategori. Dropzone har händelsen sending för detta:

1Dropzone.options.myDropzone = {
2  init: function () {
3    this.on('sending', function (file, xhr, formData) {
4      formData.append('status', 'draft');
5      formData.append('user_id', currentUserId);
6    });
7 
8    this.on('success', function (file, responseText) {
9      console.log('Done:', responseText);
10    });
11  }
12};

Händelsen sending anropas precis innan XMLHttpRequest skickas. Det tredje argumentet formData är ett standard FormData-objekt som du kan lägga till godtyckliga nyckel-värdepar i via append(). På serversidan läses dessa parametrar från $_POST['status'] och $_POST['user_id'].

Praktiskt scenario: användaren väljer ett album från en rullgardinsmeny bredvid Dropzone-ytan, och album-ID:t skickas med varje fil. Servern sorterar omedelbart uppladdningar i rätt mappar.

Säkerhet: tre regler du inte kan ignorera

Innan du driftsätter Dropzone i produktion, kontrollera tre saker.

För det första. Validera alltid filtyp och storlek på serversidan, även om du redan har konfigurerat acceptedFiles och maxFilesize i JS. Restriktioner på klientsidan kan kringgås på en minut via webbläsarens konsol. Filtrering på serversidan är det enda verkliga skyddet.

För det andra. Lagra uppladdade filer utanför dokumentroten eller i en mapp där skriptexekvering är inaktiverad. Till exempel denna struktur:

1/public_html        ← document root ( index.php )
2/uploads            ← folder with uploaded files (outside web access)

Då fungerar inte en direkt URL till filen; webbläsaren serverar filen endast via ett PHP-mellanskript som kontrollerar åtkomsträttigheter.

Tredje. Generera unika filnamn på servern. Lita inte på namnet klienten skickar: det kan innehålla ../, nullbytes eller specialtecken. basename() + time() + en slumpsträng är miniminivån.

Fjärde. Kontrollera filens innehåll, inte bara filändelsen. En angripare kan döpa om shell.php till photo.jpg och kringgå ett pathinfo()-filter. En tillförlitlig metod: fastställ den faktiska MIME-typen via finfo_file() (den inbyggda PHP Fileinfo-modulen) och jämför mot en vitlista. För bilder, verifiera dessutom att getimagesize() returnerar giltiga dimensioner; detta filtrerar bort korrupta filer och förklädda skript. På projekt med hög trafik, överväg att lägga över uppladdningar på en separat mikrotjänst bakom en reverse proxy som tar emot strömmen, skannar med antivirus (till exempel ClamAV) och först därefter skickar den vidare till huvudapplikationen.

Demovideon ovan visar hela processen i aktion: HTML-uppmärkning, PHP-hanterare och resultatet i webbläsaren på tre minuter.

⁉️🤔 Vanliga frågor

Fungerar Dropzone.js utan jQuery?

Ja, biblioteket är helt oberoende av jQuery. Från och med version 5.x har alla beroenden tagits bort; se installationsavsnittet på dropzone.dev. Det sagt finns en separat jQuery-wrapper för de som föredrar $('.dropzone').dropzone(); den ligger i samma npm-paket under dist/min/dropzone-jquery.min.js.

Hur ändrar jag feltexten när en fil är för stor?

Använd inställningen dictFileTooBig. Exempel: dictFileTooBig: 'File is too big. Maximum size is {{maxFilesize}} MB'. Platshållaren {{maxFilesize}} fyller automatiskt i värdet från din konfiguration. Den fullständiga listan med dict-nycklar för lokalisering finns i dokumentationen.

Kan filer laddas upp i delar för stora volymer?

Ja, Dropzone v5 har inbyggt stöd för chunkad uppladdning via inställningarna chunking: true, chunkSize (i byte) och forceChunking. Servern måste kunna sätta ihop delarna: ta emot varje del med headrarna dzchunkindex och dztotalchunkcount, spara dem tillfälligt och slå ihop dem efter att den sista delen tagits emot. Ett färdigt PHP-exempel för ihopsättning av delar finns i Dropzones repository.

Hur tar jag bort en filförhandsvisning efter en lyckad uppladdning?

Anropa myDropzone.removeFile(file) i händelsehanteraren för success. Filen försvinner från gränssnittet men ligger kvar på servern. Om du också behöver radera den från servern lägger du till en AJAX-förfrågan i samma hanterare före removeFile.

Är Dropzone kompatibelt med WordPress?

Ja, biblioteket kan inkluderas via wp_enqueue_script() i ditt tema eller plugin. Ett typiskt WordPress-scenario: att ersätta standarduppladdaren för media på en anpassad adminsida eller ett frontend-formulär. Du behöver bara ange rätt hanterar-URL, vanligtvis admin_url('admin-ajax.php') med en registrerad AJAX-åtgärd.

Är Dropzone.js rätt för ditt projekt

Om du behöver dra-och-släpp-uppladdning av filer "här och nu" löser Dropzone.js uppgiften snabbare än någon egen kod. Här är fem skäl till att biblioteket fortfarande är relevant 2026:

  • Inga beroenden. Varken jQuery, Bootstrap eller React. Inkludera en JS-fil så fungerar det.
  • Stöd för flera webbläsare. Stöder webbläsare ner till IE11 och degraderar elegant utan JavaScript.
  • Färdig visualisering. Bildförhandsvisningar, förloppsindikatorer, ikoner för lyckat/misslyckat direkt ur lådan, utan CSS-layoutarbete.
  • Dokumentation. Uppdaterad GitBook och ett aktivt GitHub-repository (1 700+ stjärnor per 2026).
  • Flexibilitet. Från enkel bildstorleksändring före uppladdning till chunkad uppladdning av gigabytestora filer, allt är konfigurerbart.

När Dropzone inte är det bästa valet: om du redan använder React/Vue och vill ha en native komponent utan extern DOM-manipulation. React-ekosystemet har react-dropzone, Vue har vue-dropzone. Men för vanilla JavaScript, jQuery-projekt och WordPress-sajter är Dropzone.js ett beprövat verktyg som inte kommer att svika dig.

Praktiskt integrationsexempel. Ett typiskt WordPress-scenario: en sida för "Ladda upp dokument" i en kundportal. Användaren drar in skanningar av pass, kontrakt och fastighetsbilder. Dropzone inkluderas via wp_enqueue_script() i temats functions.php, och hanteraren är en anpassad AJAX-åtgärd registrerad via wp_ajax_nopriv_. Varje fil som laddas upp läggs till i mediebiblioteket via wp_insert_attachment() och dess ID sparas i användarmeta. Hela frontend-koden ryms på 30 rader och serversidan på 50. Som jämförelse skulle en egen drag-and-drop med samma funktionalitet kräva 400-600 rader JavaScript och 2-3 dagars utveckling.

När det gäller alternativ: Uppy (från skaparna av Transloadit) erbjuder en modulär arkitektur med plugins för React, Svelte och S3-uppladdningar, men kräver fler beroenden och mer konfiguration. Fine Uploader har inte underhållits sedan 2018; forks finns men utan säkerhetsgarantier. Dropzone.js vinner på balansen "funktioner per komplexitetsenhet": en fil, minimal konfiguration och synliga resultat fem minuter efter integration.

Några ytterligare funktioner värda att känna till innan du börjar. Dropzone erbjuder en fullständig händelsecykel: addedfile, thumbnail, uploadprogress, complete och queuecomplete. Den sista är särskilt användbar: den aktiveras när alla filer i kön har bearbetats, vilket låter dig visa användaren ett sammanfattande meddelande eller omdirigera till en annan sida. För nätverksfel finns inbyggt omförsök: vid ett uppladdningsfel visar Dropzone en "Försök igen"-knapp bredvid filförhandsvisningen, och omförsöket går genom samma hanterare utan kodduplicering. Gränssnittet är fullt lokaliserbart via dict-inställningar: dictCancelUpload, dictRemoveFile, dictMaxFilesExceeded och ungefär två dussin nycklar till. Svenskt språkstöd sätts upp på fem minuter genom att kopiera ett objekt från dokumentationen. Biblioteket väger 28 KB komprimerat (gzip), vilket lägger till mindre än 0,1 sekunder på sidans laddningstid på mobilt 4G. Alla dessa funktioner gör Dropzone.js till de facto-standarden för dra-och-släpp-uppladdningar i projekt utan ramverk: en miljon npm-nedladdningar per vecka i början av 2026, och användning i WordPress, Laravel och Symfony-adminpaneler.

Redaktionen
RedaktionenRedaktionellt team→ All publications

Ett professionellt team av skribenter och redaktörer specialiserade på att skapa kvalitetsinnehåll.