Je suis fan des codes et programmes simples qui font ce qu’on leur demande, tout simplement, sans superflu.

Je cherchais un code pour uploader des fichiers en drag'n'drop (comme dans Drop-Center par exemple), mais ces scripts bien que fonctionnels sont souvent lourds. Oui, 500 Ko pour faire ça, c’est beaucoup trop lourd pour moi. Surtout qu’ils importent bien souvent en plus des scripts externes hébergés sur Google Code ou le plugin JQuery (90 Ko), juste pour le drag-n-drop. Nope, ça ne me va pas.

NOTE : Que les auteurs de Drop-Center ne me prennent pas mal, DropCenter, cité ici comme script d'upload de référence, est juste trop lourd pour moi, qui cherchait un script simple et léger à intégrer dans BlogoText (DC fait le même poids que BT tout entier, ce qui représente la raison pour laquelle je ne peux l'adapter dans mon projet). Si je l'ai mis là, c'est que c'était le premier auquel j'ai pensé jeter un oeil pour le greffer dans mon projet.
Autrement DropCenter n'utilise effectivement pas de fichiers externes, comme le souligne Idleman, et est une solution simple et pratique pour uploader/partager des fichiers sur son serveur : il gère les comptes avec mot de passe, notification d'envoi, gestion de dossiers, plusieurs langues et s'installe en 2 clics.


Hier c’est sur ce code que je suis tombé : un code en moins de 15 ko qui n’utilise que du JavaScript et un peu de PHP. Au diable les scripts avec quinze tonnes de jQuery et AJAX pour les choses triviales !

Je vous laisse lire la page en question, mais le principe est extrêmement simple : JS récupère la liste des fichiers qu’on glisse sur la page, et pour chaque élément il crée une variable de formulaire d’envoi de fichier et fait une requête sur un script PHP. Très simple et magnifique.

Le script d’origine ne permet pas d’uploader les fichiers (les fichiers ne sont pas conservés), mais il suffit d’ajouter ceci dans le PHP :

move_uploaded_file($_FILES['myfile']['tmp_name'], $sFileName);

Pour alléger encore plus le script, je l’ai modifié, épuré et il fait son boulot en un peu plus de 4 ko de code. Voilà ce que j’appelle quelque chose de léger pour une fonctionnalité basique.

Lien : http://lehollandaisvolant.net/files/dnd.zip

Il s’agit donc d’un code minimal qu’il convient d’améliorer pour vos projets et non pas un programme bardé de code inutile qu’il faut nettoyer avant de pouvoir travailler dessus (si vous l’utilisez, n’oubliez pas de linker vers www.script-tutorials.com, le script n’est pas de moi mais à eux).

Ce qu’il permet de faire :
  • envoyer jusqu’à 500 fichiers d’un coup par glisser-déposer (de 20 Mo chacun – défini dans le fichier JS, 20 étant la limite par défaut d’upload en PHP).
  • marche parfaitement dans Firefox, Opera (Windows seulement) et Chrome. (Sous Opera Linux : l’envoi de fichiers multiple ne marche pas (ça vient d’Opera). Par ailleurs, si le nom du fichier contient un espace, ça ne marche pas non plus.
  • ne marche pas dans IE (z’avez vu les pubs pour IE à la TV ??) mais on s’en fout.
  • pour chaque fichier envoyé, il affiche un message (succès/erreur) et un lien en cas de succès.
  • il n’y a pas de barre de progression (j’ai viré l’existant avec le <canvas>) mais un décompte en JS.
  • les fichiers sont enregistrés dans le dossier « files ».

(Remarque : si après le glisser-déposer ça ne démarre pas tout de suite, attendez un peu.)

Ce code sera intégré dans le futur Blogotext avec l’autorisation des auteurs, conformément à leur licence :-).

35 commentaires

gravatar
500ko? a dit :

Ouh le troll. :) Il n'y a ni 500 ko de javascript dans DropCenter, ni des scripts hébergés à l'extérieur. Sinon on perdrait le principe "KISS", et celui de l'auto-hébergement dans la foulée!

gravatar
qwerty a dit :

Sympa, merci du partage ! je risque de l'utiliser, même si je prefère la methode classique !

gravatar
Le Hollandais Volant a dit :

@500ko? : pour le chiffre, je m’adressait pas spécialement à DC^^.

@qwerty : idem, mais pour 50 fichiers, le dragndrop est quand même pratique. Je laisserais le choix dans BT de toute façon.

gravatar
qrthur a dit :

Intéressant pour la prouesse technique.

Autrement, ça ne me dérange pas plus de faire "Parcourir" > CTRL + A, que de faire du drag'n'drop. Et là, 0 octet de script.
Désolé, pour le petit troll... o:-)

gravatar
Le Hollandais Volant a dit :

@qrthur : 500 fois de suite pour 500 fichiers ? Et avoir 500 requêtes sur ton script en entier, avec 500 tranferts de la page ?
Moi aussi hein, pour un seul fichier je suis dans ton cas, je préfère largement le parcourir : plus rapide, plus léger…

gravatar
R3v4n a dit :

Au passage :

"Au diable JQuery et AJAX pour les choses triviales !"

En fait il y a une requête asynchrone avec XMLHttpRequest dans ton script, donc ne met pas AJAX au diable :-P

gravatar
qrthur a dit :

@Le Hollandais Volant : Non je parlais bien d'une sélection multiple. Je n'ai jamais eu l'occasion de tester mais il semblerait qu'avec HTML5, on puisse facilement faire quelque chose comme :
<input type="file" name="upload[]" multiple>
As usual, ça ne fonctionnerait apparemment pas avec IE. A approfondir, donc...

gravatar
Anon a dit :

Ne marche pas sur firefox 5...


Dommage, parce que sur chrome c'est très fluide.

gravatar
Guenhwyvar a dit :

Et si javascript est désactivé, y'a un fallback PHP ?

gravatar
Guenhwyvar a dit :

Au passage, faut nettoyer ton archive, y'a deux fichiers de backup dedans (.js~, .css~).

gravatar
Le Hollandais Volant a dit :

@Guenhwyvar : heu nope. Pas dans mon archive là.
Mais dans Blogotext, oui, il y aura toujours le champ <input type="file"/> en premier lieu, avec un lien JS pour faire apparaître soit un champ pour URL — téléchargement d’un fichier distant — soit la zone dragndrop.

gravatar
Remad a dit :

Moi aussi je vois les deux fichiers de backup (sous windows).

gravatar
JerryWham a dit :

Je confirme ce qu'a dit Anon : ne fonctionne pas avec Aurora (Firefox 15) sous MacOsX.
Dommage, ça aurait pu être très utile.

gravatar
Le Hollandais Volant a dit :

@erf : un serveur personnel ?
Mais mon script permet ça (ma version modifiée du code d'origine). Suffit de mettre le script sur le serveur personnel.

gravatar
erf a dit :

Le problème, c'est du javascript et html, il faut donc ouvrir un navigateur web. Avec le plug-ins cairo-dock ou du dash de Unity, on se passe d'un programme qui fait la moitié de l'écran. Par défaut, on peut uploader sur free, dropbox,etc...

Et bien évidement, il faut encore se taper un script avec curl pour uploader sur son serveur personnel.

A tiens, j'ai mâché un mot dans mon précédent commentaire.

gravatar
Le Hollandais Volant a dit :

@erf : ahh, ça.
Mais le code que je propose est explicitement fait pour le navigateur. J'ai jamais dit, ni voulu, qu'il soit utilisable dans cairo, dropbox, giver...

Après, le programme ne fait basiquement que 3 choses :
- récupère la liste des fichiers qu'on glisse dessus
- ouvre une connection à un serveur
- y envoie une requête POST/FILES en PHP

Je suis sûr que c'est possible en Python ou en Bash, en autant de lignes que de lignes JS.

gravatar
Idleman a dit :

Que le dropcenter serve de faire valoir a ce script passe encore, mais de la à sous entendre que nous appelions des scripts externes et autres bondieuseries je trouve ça pas très cool de ta part Timo.

gravatar
Le Hollandais Volant a dit :

@Idleman : je vais éditer, mais c'est pas DC que je visais - qui était un exemple de script d'upload - mais cherchant à avoir un système de Drag-n-drop dans BT, j'ai du télécharger bien 6 ou 7 scripts différents avec tous à chaque fois des scripts externes (comme jQwery souvent mais aussi des scripts chez Google-code).

gravatar
idleman a dit :

@Le Hollandais Volant : Certes, je veux bien te croire, mais bon étant donné la façon dont c'est tourné, ça ne nous fait pas vraiment de la pub sur un script qui en as pourtant cruellement besoin :)

gravatar
prophète a dit :

C'est vraiment très cool et léger comme script, j'aime...

gravatar
tiber10 a dit :

bonjour pourrait ton s avoir comment régler ce soit disant poids de 20 mo car j ai beau testé le script mais les rar de 15mo passe pas juste a peine des fichier 1 mo ou bien modifier la poit du fichier par exemple uploader un fichier de 30 mo car je ne trouve rien pour faire cette modif sur le poid des fichiers

gravatar
alexflex a dit :

Hello. Bravo pour ton script, léger et efficace, merci !!
J'ai une question à te poser : que faudrait-il rajouter pour transformer ça en un upload vers un FTP ? cela réglerait le problème de la taille maxi du fichier (car sur les serveurs, il n'est pas toujours possible de modifier le fichier php.ini et les variables). Merci d'avance pour ta reponse. Alex

gravatar
Le Hollandais Volant a dit :

@alexflex : pour l'envoie en FTP, il faut configurer le login/pass du serveur et tout le reste.

Ce n'est plus du php et formulaires POST alors (et je n'ai jamais fait ça, mais ça doit être possible).

gravatar
alexflex a dit :

Merci pour ta réponse.
En effet, je pense qu'il faudrait modifier le script mais je ne sais pas trop comment.
J'ai trouvé la commande PHP ftp-put (http://php.net/manual/fr/function.ftp-put.php) qui a l'air
de faire ça, mais comment l'articuler avec ton script... je ne sais pas faire.
:-)
Merci pour l'aide
Alex

@Le Hollandais Volant : Merci pour ta réponse.
En effet, je pense qu'il faudrait modifier le script mais je ne sais pas trop comment.
J'ai trouvé la commande PHP ftp-put (http://php.net/manual/fr/function.ftp-put.php) qui a l'air
de faire ça, mais comment l'articuler avec ton script... je ne sais pas faire.
:-)
Merci pour l'aide
Alex

gravatar
Le Hollandais Volant a dit :

@alexflex :
Ton lien là, c’est ce qui envoie un fichier d’un serveur l’autre via FTP.
À moins que tous visiteurs de ton site aient PHP sur leur ordi, ça ne peut pas marcher.

gravatar
Coincoin a dit :

Salut Timo!

Je suis tombé sur ton article en recherchant quelque chose du style dropcenter. Je n'arrive cependant pas à faire fonctionner ton code sous Firefox 22 (manjaro), est-ce normal?
Pas de soucis sous "Web" (toujours sous manjaro).
Si tu pouvais y jeter un oeil ou me donner quelques pistes pour corriger (ou ptet un truc à cocher dans la config de firefox)...

En tout cas, longue vie à ton blog, c'est une vraie mine d'or!

Et merci d'avance :)

Les commentaires sont fermés pour cet article