JavaScript file upload con Dropzone

Pubblicato il 21 Marzo 2022

Una delle librerie JavaScript più conosciute e apprezzate per eseguire l’upload di file è sicuramente Dropzone. Open Source, semplice da implementare e altamente configurabile, Dropzone, è una buona opzione che possiamo utilizzare all’interno della nostra UI per realizzare un caricamento dei file funzionale e con un buon look and feel. Vediamo come utilizzarla insieme a PHP per la parte server-side. Di seguito il codice JS:


Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("#dropzone_id", { 
    url: "https://localhost/upload",
    paramName: "myfile", // Nome del campo input file
    maxFilesize: 8, // MB
    acceptedFiles: "image/*"
});


myDropzone.on("complete", function(file) {
    alert("File caricato: " + file.name);
});

Sempre utile la possibilità di poter invocare un buon numero di eventi. Per quanto riguarda il codice server-side, diamo un’occhiata al seguente codice PHP con cui possiamo effettuare l’upload e rinominare il file per questioni di sicurezza. Ecco il codice:


$uploaddir = "/folder/";
$file = pathinfo($uploaddir . $_FILES['myfile']['name']);
$uploadfile = $uploaddir .md5($file['filename'] .time()) ."_file_." .$file['extension'];

if (move_uploaded_file($_FILES['myfile']['tmp_name'], $uploadfile)) {
    echo "Upload completato.";
} else {
    echo "Upload fallito!";
}

L’esempio appena mostrato è semplice e si occupa soltanto di eseguire l’upload. Possiamo sicuramente arricchirlo con tutti i controlli consigliabili (come quello sul tipo di file) e realizzare, magari, una classe completa da poter riutilizzare in tutti i progetti.

Alla prossima. Happy coding!

jQuery Ajax: come effettuare richieste Ajax tramite jQuery

Upload sicuro: alcuni accorgimenti per la sicurezza dei form di upload

Progettazione Web Application: l'importanza della fase di analisi

Condividi il post con i tuoi amici o colleghi