DropCenter, un multi upload drag and drop en HTML5 (sans flash)

Mes excuses pour le titre à rallonge, mais il faut bien faire vivre son référencement XD !!

Voila longtemps que je n’avais pas pondu un LNM (Last Night Making) c’est à dire un programme développé à l’arrache en quelques heures (nocturnes) fonctionnel mais codé à la porco.

Il s’agit d’un script que j’ai longtemps cherché sur le net sans vraiment trouver ce qu’il me fallait, j’ai donc décidé de mettre les mains dans le cambouis quelques heures et, dans ma grande mansuétude, de vous le faire partager .

Voila comment le script se présente :

script php d'upload html5 drag and drop

Ce script, développé en PHP/Javascript (garantis sans flash), permet d’envoyer des fichiers en ligne (upload) d’un simple glisser déposer du bureau vers la page web du script. Le script utilise la technologie HTML5 gracieusement plugué pour jquery par Weixi Yen.

Les avantages de dropCenter :

  • Upload de fichiers multiples
  • Upload simplifié grâce au drag and drop
  • Barre de progression affichant l’état de téléchargement du fichier
  • Design  propre et ergonomique à la web 2.0
  • Possibilité de supprimer les fichiers envoyés
  • Possibilité de renommer les fichiers
  • Reconnais de nombreux formats de fichiers et y associe une icône pour les dissocier entres eux.
  • Script léger et simple à installer
  • Possibilité de limiter la taille, l’extension par fichier …

Inconvénients

  • Ne fonctionne évidemment pas sous les navigateurs datant de l’après guerre
  • N’est pas encore sécurisé (que voulez vous on peux pas tous faire en une heure) il vous faudra mettre un htaccess ou cacher l’url
  • Ne permet pas la création ou l’envois de dossiers. (voyez ça plus comme un dépôt rapide de fichiers en ligne).

Screenshots

Démo & Téléchargement
Démo et téléchargement sur le site officiel : http://projet.idleman.fr/dropcenter


Installation
1.Décompressez l’archive de dropCenter
2.Envoyez le tout sur votre FTP
3.Autorisez l’écriture sur le répertoire /uploads (chmod 777)
4. Le script est installé !! Pensez a mettre en place un htaccess pour sécuriser l’accès !!

FAQ

Mes gros fichiers ne passent pas, pourquoi?

Il faut augmenter la taille permise (MAX_SIZE) dans le fichier php/config.php. Pensez également a modifier les valeur post_max_size et upload_max_filesize dans le fichier php.ini de votre serveur (/etc/php5/apache2/php.ini sous ubuntu).

Peut on limiter les extensions?

En bricolant légèrement le script c’est très simple, sinon vous pouvez configurer la variable FORBIDEN_FORMAT dans le fichier php/config.php avec toutes les extensions non permises, ceci n’empêchera pas a l’utilisateur d’envoyer le fichier mais ajoutera automatiquement un ‘.txt’ devant le fichier afin qu’il ne puisse pas être exécuté sur votre serveur.

Supprimer un fichier ?

Une fois le fichier uploadé, rafraîchissez la page et survolez le fichier, une croix apparaît en haut a droite, il s’agit du bouton supprimer.

Modifier le nom du fichier ?

Une fois le fichier uploadé, rafraîchissez la page et double cliquez sur le nom du fichier, vous pouvez alors l’éditer, l’appui sur la touche entré valide la modification.

Licence
Ce programme est sous licence MBDFEDCQVV (Mais Bon Dieux Faites En Donc Ce Que Vous Voulez). Merci de respecter toutefois les licences originelles du plugin jQuery Filedrop et du pack d’icone intégré.

A propos
Drop Center V1.0 Alpha 100% pur porc par Idleman.

Nb : Ce script est un LNM (Last Night Making) c’est à dire qu’il à été developpé à l’arrache en quelques heures (nocturne) et qu’il n’est pas conseillé pour un usage professionel et que je n’assume pas tous a fait la malpropreté du code :), merci d’en tenir compte.

Script créé à l’aide du plugin jQuery Filedrop (Weixi Yen) et basé sur la version de Martin Angelov (tutorialzine.com)

Icones pack : Faenza Icons par tiheum (http://tiheum.deviantart.com/art/Faenza-Icons-173323228)

Article rédigé par Idleman

18 réflexions au sujet de « DropCenter, un multi upload drag and drop en HTML5 (sans flash) »

  1. Morais

    Merci ça marche bien sur mon site, si évolution suis preneur

    Répondre
    1. Idleman Auteur de l’article

      Ça devrais venir après la sortis de kissworld je pense que j’upgraderais un peu le drop center, il faut juste que je réfléchisse à une ligne de conduite pour ce programme, c’est un peu du brouillon pour le moment :)

      Répondre
      1. Bqg

        Il sert bien, je lui ai rajouté l’affichage de la taille des fichiers (en Ko ou Mo, suivant la taille détectée), la date d’envoi, le téléchargement au format ZIP (au choix, bien entendu), un système d’admin (un peu pourri pour le moment, et relativement moyen niveau sécurité), un compteur de fichiers, et un flux rss auto-généré. Et j’ai corrigé une faute dans main.js, sur l’extension ppt. Erreur 404 sur le fichier pre.png (il manquait un « s »). Actuellement il sert de page de travail coopératif, chaque membre reçoit un mail lors d’un nouvel upload. :) Je viens de voir que ton DropCenter avait la gestion des tags, pas mal comme idée!

        Répondre
        1. Idleman Auteur de l’article

          Ha je vois que les grand esprits se rencontrent :) !! J’ai fais exactement la même chose sur la nouvelle version a deux trois trucs près : authentification, flux rss, sauvegarde en zip !

          C’est dommage qu’on ai bossé chacun de notre côté, ensemble nous aurions pu nous concentrer chacun sur une nouvelle fonctionnalité et en faire quelque chose de mieux.

          Que penserais tu que nous partagions un svn pour continuer a y travailler tous les deux ?

          Je suis content que ça serve en tous cas ^^, moi de mon côté je ne peux plus m’en passer, il m’est très pratique pour gérer mes transferts entre 4 pc et 3 os différents.

          Répondre
  2. Bqg

    Pourquoi pas, mais le mien est un peu « tuné » à l’arrache (30 min) pour le moment. Tout fonctionne, mais si on essaie de zipper un fichier trop gros ça renvoie un ZIP vide (limitation serveur?), le système d’admin c’est juste un lien caché qui intervertit main.js avec un autre (qui contient les commandes de suppression/renommage, mais ça reste archaïque et pas top niveau sécurité…^^’), et le flux rss est généré en fonction d’une BDD format txt. A chaque fichier envoyé, une nouvelle entrée. Si on supprime un fichier, il reste dans le flux. Faut que je m’y repenche!

    Répondre
    1. Idleman Auteur de l’article

      Ha ok, le mien est un peu plus soigné,
      l’authentification est gérée côté serveur et js, les comptes son stocké dans un fichier json crypté et placé dans un php en commentaire (donc question sécurité c’est convenable).

      Le flux répertorie les ajout, suppression, renommage de fichiers.

      Pour ce qui est du zip, je n’ai pas encore testé sur les grosses tailles mais cela doit être fonctionnel.

      Dans ce cas, si tu veux je met ma version en en cours sur svn et on repart sur cette bonne base pour améliorer le script :)

      Répondre
      1. Bqg

        Allez, why not. :-) Pour le zip, j’utilise zip.lib.php, c’est peut être pour ça. Mais je penche plus vers une limitation de mon hébergeur.

        Répondre
      2. Bqg

        En attendant je lui ai remis l’image « OK » lorsque l’upload est terminé, et j’envisageais de modifier la fonction d’affichage des images. Si on détecte l’upload d’une image, on affiche la miniature. Sinon, on affiche l’icone associée à l’extension.

        Répondre
        1. Idleman Auteur de l’article

          Je t’ai répondu par mail et t’ai envoyé les accès svn vers la dernière version du logiciel.

          Répondre
          1. Florian

            Le lien de téléchargement n’est plus fonctionnel :(
            Pouvez-vous régler le problème ? Merci

          2. Idleman Auteur de l’article

            C’est fait :), merci pour le signalement.

          3. Florian

            Super, merci pour la rapidité de ta réponse :D !

  3. Appache72

    Bonjour a tous ! Tout d’abord je trouve sa super tout simplement !
    Donc voila mon projet serais de rendre individuel a chaque membre son espace d’upload.

    Donc avec base de donnée mais malheureusement niveau base de donnée pour mon cas c’est pas ça .. donc je lutte un peu .. Si le projet vous dit j’aurais bien aimer un cou de main ! Voilouuu sinon je trouve l’idée super ! et je serrai ravi d’apporter des améliorations !.

    Voici mon email quentin72@me.com

    Répondre
    1. Idleman Auteur de l’article

      Bonjour quentin,

      Le principe du dropcenter étant basé sur le partage, nous n’avons pas pour projet de cloisonner les fichiers.

      Rien n’empêche l’utilisateur de gérer son dropcenter personnel a côté de son dropcenter public.

      De plus, le script à été conçu sur un modèle de base de données non relationnel en json, cela implique certaines contraintes quand aux fonctionnalités du projet bien que cela induise également une meilleur performance en terme de rapidité et de stockage. :)

      Merci tous de même de t’intéresser au projet et de soumettre tes idées :), je te souhaite bonne chance pour parvenir à tes fins :)

      Répondre
  4. Dominique

    pas cool, le lien pour télécharger une archive ne fonctionne pas ou donne une archive vide.
    Une raison à cela ?

    Cordialement
    Dominique

    Répondre
    1. Idleman Auteur de l’article

      Il faut utiliser un gestionnaire d’archives,plus performant, l’archive n’est pas vide mais un certain utilitaire (je ne sais plus lequel) est incapable de voir son contenu (vas savoir pourquoi…)

      Répondre
  5. Dominique

    bah, je suis sous ubuntu et j’ai essayé avec tous les archives…

    mais merci de la réactivité en tout cas :)

    Dominique

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Xo ^_^ :siffle: :p :-( :evil: oO :) T_T <3 :D more »