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 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 :-).