Upload multiple de fichiers – PHP5 – Symfony 2

php_symfony

Enoncé du besoin : Pouvoir, à l'aide d'un bouton "Parcourir", sélectionner plusieurs fichiers à télécharger. Les fichiers apparaissent ensuite dans un cadre comportant la liste des fichiers prêts à être téléchargés. Il doit être possible de rajouter un ou un ensemble de fichiers en re-cliquant sur le bouton "Parcourir". Chacun de ces fichiers peut être enlevé de cette liste en cliquant sur le bouton "supprimé". Lorsque la liste convient, on clique sur le bouton "Télécharger" pour télécharger les fichiers (ci-dessous une capture d'écran du résultat).

Contraintes techniques : PHP5, Symfony2, moteur de rendu = twig.formUploadMultiple

Composant JS Bootstrap-fileinput et FormData de AJAX

Navigateur Internet Explorer versions supérieures à IE9 (IE10, IE11) et les autres navigateurs (Chrome, Firefox, ...)

Utilisation du composant JS Bootstrap-fileinput.

Gestion d’une liste qui contient les fichiers à uploader. On met à jour cette liste lors des événements d’ajout, de suppression et de reset. onFileLoaded

L'affichage proposé par Bootstrap FileInput est personnalisable : modification d'un ensemble d'options. Par exemple, il est possible de choisir de ne pas afficher l'aperçu d'une image uploadée. On redéfini donc ces options de cette manière :

personnalisationAffichage

Une fois le formulaire soumis, on remplit un "FormData" avec la liste des fichiers et avec le champ "type" du formulaire. On envoie cet objet dans une requête AJAX au Contrôleur. FormData sendRequest

IFrame

Navigateur Internet Explorer versions inférieures à IE10 (IE9, IE8, ...)

Le composant "Bootstrap FileInput" n’est pas compatible avec les versions de IE inférieures à IE10. Le problème réside dans le fait qu'AJAX n'est pas supporté par IE8 et I9, il s'avère donc impossible d'utiliser le mécanisme de ce composant. Il y a néanmoins une alternative : on va utiliser l'élément HTML "iframe" pour les échanges formulaire/serveur. Le principe consiste tout simplement à envoyer le formulaire dans une iframe. Le traitement du formulaire se fait alors via PHP et le résultat de l'upload est renvoyé par le biais de l'iframe, avec un système de callback.

Etapes lors de la soumission du formulaire : Lors de la soumission du formulaire, on empêche le comportement par défaut du clic sur le bouton de soumission et on vérifie que le formulaire n'a pas été soumis sans fichier. On met en place l’écoute de l’événement “load” sur l’élément HTML “iframe” . Dès que l'iframe sera "chargé" avec la réponse du serveur, la fonction "doLoad" sera appelée. Cette fonction va récupérer les informations envoyées par le serveur (message d'erreur ou de succès qui sera affiché dans un "flashBag"). On réinitialise ensuite les champs du formulaire. submit_IE Dans la fonction "doLoad" on accède à la réponse du serveur de la manière suivante : responseServer

Côté Controller

Les champs "files" et "type" ne sont pas transférés de la même manière, d'où leur traitement différent suivant le navigateur.

submitController

 Conclusion

Pour conclure, l'utilisation du composant "Bootstrap FileInput" sous IE n'est pas toujours possible :

  • Sous IE8 et IE9, le composant n'est pas reconnu et du coup pour faire un upload de fichier (non multiple) on peut passer par un iframe HTML.
  • Sous IE 10 et IE 11, le composant est reconnu et l'upload multiple est possible.

Laisser un commentaire

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

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.