Notes sur la programmation: Comment utiliser dropzone.js

vendredi 8 septembre 2017

Comment utiliser dropzone.js

1. Télécharger dropzone.js d'ici: http://www.dropzonejs.com/
ou ici: https://github.com/enyo/dropzone

2. Ce dont on a besoin est dropzone.min.js et dropzone.min.css. Déplacer leur dans ton répertoire.
Par exemple, un répertoire comme "./script".

3. Télécharger jQuery ou utiliser CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Ou écrire le fichier extérieur de jQuery téléchargé:
<script src="./le/fichier/extérieur/de/jQuery.js"></script>

4. Et écrire comme ça et enregistrer l'enregistrer comme .html:

<head>
<link rel="stylesheet" type="text/css" href="./script/dropzone.min.css">
</head>
<form>
<div id="dZUpload" class="dropzone">
<div class="dz-default dz-message"></div>
</div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./script/dropzone.min.js"></script>
<script>
Dropzone.autoDiscover = false;
$(document).ready(function () {
$("#dZUpload").dropzone({
url: "http://192.168.1.1/upload.php", //Ton URL
addRemoveLinks: true,
//Si tu utilises cakaphp 3, on a besoin de écrire information de csrf
/*headers: {
'X-CSRFToken': $('meta[name="token"]').attr('content')
},*/
success: function (file, response) {
var imgName = response;
//Pour l'animation
file.previewElement.classList.add("dz-success");
//Pour ajouter id à les prévisualisations
//file.previewElement.id = response.id;
console.log("Successfully uploaded :" + imgName);
}
});
});
</script>

5. Ouvrir le avec le navigateur. On peut utiliser le dropzone.