16
juillet

Détecter le téléchargement d’un fichier dans le navigateur

Par Joan Gazel, le 16 juillet 2013

Nombre de commentaire : 0.

Cet article est inspiré de la méthode exposé dans cette page : http://geekswithblogs.net/…/detecting-the-file-download-dialog-in-the-browser.aspx

Le contexte est le suivant : quelque part dans une application Intranet un bouton permet de télécharger un fichier, généré dynamiquement à chaque clic sur le bouton.

Lorsque l’utilisateur clique sur le bouton, on modifie l’apparence de celui-ci en JavaScript afin de faire apparaître un « loader » pour qu’il se rende compte qu’il se passe quelque chose (cela désactive également le bouton afin d’éviter un double-click malencontreux).

L’objectif est de détecter la fin de la génération dynamique du fichier côté serveur et de réactiver le bouton et rétablir son apparence en JavaScript, sans recharger la page courante et le plus simplement possible.

En résumé la solution évoquée dans l’article précédent est la suivante :

  1. lors de la demande de génération de fichier le code JavaScript va créer un token unique qui sera envoyé avec la demande
  2. – lorsque le serveur aura fini de générer le fichier, il va créer un cookie portant un nom prédéfini et ayant pour valeur le token envoyé précédemment
  3. – le code JavaScript pendant la génération du fichier va périodiquement examiner les cookies positionnés au niveau du document. Dès qu’il trouvera le cookie ayant pour valeur son token il saura que le fichier a fini d’être généré et que la fenêtre « Ouvrir »/ »Télécharger » a été présentée à l’utilisateur. Il rétablira alors le comportement initial du bouton

Voici ce que cela donne en terme de code :

  1. génération du token avec la demande en JavaScript :
    var tokenImpression = (new Date()).getTime();
    doActionLongueByIdForm("form","/impressionPdf.do?token="
    +tokenImpression,"btn_validation");
    

    (la fonction « doActionLongueByIdForm » permet simplement de soumettre un formulaire dont on indique l’identifiant HTML vers l’URL passée en paramètre, tout en transformant et désactivant le bouton dont l’identifiant est passé en troisième paramètre). On remarque donc ici dans l’URL le token qui est calculé et passé dynamiquement à chaque demande de téléchargement du fichier

  2. – ajout du cookie côté serveur lors de la création du fichier :
    Cookie cookie = new Cookie("cookieImpressionPdf", request.getParameter("token"));
    cookie.setPath(request.getContextPath());
    response.addCookie(cookie);

    Côté serveur (en Java), après génération du fichier et avant la finalisation de la réponse, on ajoute le cookie « cookieImpressionPdf » en lui donnant comme valeur la valeur du paramètre « token » reçu précédemment

  3. – enfin, détection du cookie côté JavaScript :
    intervalle = window.setInterval(function() {
    var cookieImpression = _getCookie("cookieImpressionPdf");
    if (tokenImpression==cookieImpression) {
    clearInterval(intervalle);cancelActionLongue("btn_validation");
    }
    }, 1000);

    On utilise la méthode standard JavaScript « setInterval » qui va exécuter périodiquement (toutes les 1000 ms) la fonction passée en paramètre. Cette fonction se contente de récupérer la valeur du cookie « cookieImpressionPdf » et de vérifier que celle-ci est égale au token passé précédemment. Si c’est le cas, on désactive l’appel périodique à la fonction et on réactive le bouton par l’appel à la fonction « cancelActionLongue ».

Visuellement voici ce que cela donne :

  1. clic sur le bouton dans la page JavaScript : le bouton change de visuel pour indiquer le travail en cours :
    Bouton en cours de chargement
  2. – dès que le chargement du fichier est fini le navigateur présente une fenêtre d’enregistrement et le bouton redevient normal :
    Le bouton redevient normal dès que le fichier est prêt

 



Les commentaires sont fermés !