vendredi 18 juin 2010

drag & drop d'images avec upload en ajax

Suivant l'inspiration un poil alcoolisée du moment (si Google le peut, je le peux aussi), j'ai décidé de tenter de faire comme dans Gmail avec avec l'upload de fichiers directement en faisant un glisser-déposer.

I know Kung fu !

Avec des mots clefs simple, drag drop ajax upload on arrive très facilement sur cette
page avec cette démo. Et le code source est ridiculement simple. Ça marche même du premier coup dans Firefox, tout est formidable, je suis sur un petit nuage il n'y a plus qu'à copier-coller.

Et là l'agent Smith débarque.

Et c'est là que les gros nuages noirs commencent à arriver :
  • si le code source est simple il n'est pas compatible avec jQuery, on peut bien créer une requête ajax et utiliser l'événement beforeSend pour récupérer l'objet XMLHttpRequest, mais ensuite impossible de récupérer sa propriété XMLHttpRequestUpload donc pas d'événement progress, donc pas de barre de progression. Fail. Obliger de reprendre à 0 sans jQuery pour la requête ajax et la gestion d'événement.
  • L'upload se fait en écrivant directement dans le flux d'une requête HTTP POST sans la moindre fioriture, donc sans utiliser le ENCTYPE="multipart/form-data" des requêtes post bien élevées, le problème est que coté PHP ça passe à cote du tableau $_FILES dédié, heureusement ça tombe dans le $HTTP_RAW_POST_DATA avec FF et dans file_get_contents('php://input') avec Chrome (oui là aussi on a des résultats incohérents, sûrement pour des problèmes avec les entêtes HTTP.
    Il y a surement moyen de générer un corps compatible multipart/form-data manuellement en positionnant les bonnes entêtes, pour l'instant on fera sans.
  • Malgré toute la com' de Google sur Chrome qui vire à la masturbation, sur HTML5, il ne supporte en rien ni FileAPI pour lire les fichiers déposés ni de XMLHttpRequest2 pour gérer la progression. Tout juste au détour d'un commentaire sur un blog on trouve un exemple minimaliste qui fonctionne. Au mieux ce sera pour la version 6.
  • Et Safari 5 qui HTML5 à fond ? Hahahaha, fail.
  • Opera 10.5x ? fail.
  • Internet Explorer 8 ? fail.
Donc résumons :
  • FF : drag & drop, preview de l'image, upload avec progression.
  • Chrome : drag&drop, upload.
  • Opera : rien.
  • Safari : rien.
  • IE : rien.
Ça reste en chantier, mais c'est bien pratique.