auto_dropzone: un script pour les uploader tous
mercredi 29 janvier 2014 à 08:00
Dans la série "Bronco veut régler un problème une fois pour toutes" il a décidé de faire un script qu'il suffit d'inclure dans une page pour ajouter une zone de drag&drop de fichiers.
Le script en question s'occupe de tout sans dépendances: il génère la dropzone, les css par défaut, le javascript qui gère le D&D et s'occupe même de l'upload pour vous.
Il est en outre possible de le configurer pour l'adapter... elle est pô belle chouette la vie ?
Ce que ce script fait actuellement:
- génération de la dropzone
- config par défaut + css par défaut + classes par défaut
- gestion de l'upload
- possibilité d'upload dans des dossiers différents en fonction du type de fichiers
- limitation de la taille et du format des fichiers.
- gestion des erreurs de dossier inexistant/taille excessive/ type interdit/problème d'upload
- configuration simple
Ce qu'il ne fait pas:
- la gestion des fichiers une fois uploadés (effacement par exemple)
- la gestion de l'écrasement d'un fichier (pas de renommage automatique)
- un fallback pour les vieux navigateurs (zavez qu'à mettre à jour *kiddinme* ) ^^
La config se fait, comme toujours, via un array (on peut ne préciser que les valeurs qu'on veut modifier, des valeurs par défaut seront attribuées aux keys manquantes)
$auto_dd_upload=array(
'destination_filepath'=>'path/to/',
'dropzone_text'=>'D&D here !',
'dropzone_class'=>'drop_images',
'dropzone_id'=>'drop_images',
'dropzone_style'=>'',
'info_style'=>'',
'allowed_filetypes'=>'png,gif,jpg,jpeg',
'use_style'=>true, // false if you're using an css file
);
Si on veut utiliser ses propres styles, il suffit de mettre use_style à false.
En ce qui concerne le chemin d'upload, il est aisé d'en spécifier un ou plusieurs (sans oublier le "/" final):
$auto_dd_upload['destination_filepath']='upload/';
Ici, c'est une chaine, le même chemin sera utilisé pour tous les fichiers.
$auto_dd_upload['destination_filepath']=array('gif'=>'upload/giffiles/','png'=>'upload/pngfiles/');
En en faisant un array, on donne un chemin d'upload différent pour chaque type de fichier.
Le code est commenté et assez clair, je pense.
La dropzone générée possède ses propres classes et vous permet de les cibler simplement:
<div class="DD_dropzone" id="dropArea" >
<p class="DD_text">Drop files here</p>
<div class="DD_info" >
<div id="result"></div>
<div id="DD_progressbar"></div>
</div>
</div>
A noter d'une part qu'il est possible d'ajouter une classe et de changer l'id de la div DD_dropzone via la variable de config et que d'autre part, on peut fixer l'attribut style de plusieurs éléments.
Les évènements drag, drop, upload etc ajoutent des classes donnant la possibilité de styler la zone en fonction d'eux.
- .DD_hover (survol de la zone pendant le drag)
- .DD_error
- .DD_success
- .DD_uploading
Si vous êtes intéressés par un petit test, vous pouvez faire un tour du côté du dépôt GitHub ou de la démo (les fichiers ne sont pas conservés)
Dis-donc, ça va pas mieux... le v'la qui se met à parler de lui à la troisème personne...
Tu sais les médocs qu'il t'a donné le docteur: ben faut les prendre !
J'hésite un peu: vos mères en ont vraisemblablement pris pendant la grossesse, on voit le résultat...
Dans la vie, on a des moments difficiles, des épreuves, des moments de joie, des espoirs, des envies... on se sent fort et on affronte les mauvais moments en face; on les dépasse et on continue...
pour ma part, j'ai commencé à avoir des nausées violentes dès le lever. Elles duraient une demi-heure seulement mais étaient très invalidantes: c'étaient de violents haut-le-coeur dont les spasmes me retournaient l'estomac.
Dans la série papa s'amuse avec les jouets des nenfants, voici une nouvelle image prise avec le microscope usb dont j'ai parlé la semaine dernière en initiant cette suite de billets thématiques...
Tiens, voilà un jeu sympa... pour ceux qui ne connaîtraient pas blobgame (et donc TIO), il s'agit d'un jeu de plate-forme dans lequel le joueur doit bouger une espèce de quoiquecesoit morviforme à travers des niveaux dans lesquels il doit changer d'état, passant du mou au dur (merci de modérer vos commentaires *facepalm* ) afin de parvenir d'un point à l'autre...
En guise de chti cadeau du mercredi, je vous donne le pins de la programmation, le porte-clé simili plastic du javascript: un bookmarklet....