Méthodes de chargement de fichiers classique et html5

Champ de chargement de fichiers dans un formulaire BreezingForms.

BreezingForms offre un champ de chargement de fichier. Le fichier chargé sera hébergé dans un répertoire du site sur lequel se trouve le formulaire.

BreezingForms offre un unique champ de chargement de fichiers mais ce dernier peut être configuré de deux manières différentes. La première étant le chargement classique comme on le connait et voit un peu partout, la seconde étant la méthode html5 avec divers options supplémentaires avantageuses et nous verrons ces fonctions ci-après mais commençons par le champs de type classique et énumérons ses options.

Champ avec options classiques de chargement

Le champ de téléchargement de fichier est, comme tous champs, sélectionnable dans la liste déroulante des types de champ. Le clic sur son intitulé, charge les options du champ dans la partie des propriétés du champ.

Nous y trouvons premièrement les options habituelles, Libellé, Nom, la mise en Lecture seule et les options de validation pour le cas ou on aurait rendu le champs obligatoire.

Si nous passons dans les Propriétés avancées, toute une série d'options supplémentaires se présentent et les premières concernent l'option html5, passons ces options pour nous concentrer sur celles qui sont compatibles avec le champ classique.

  1. Le répertoire de téléchargement, il s'agit du répertoire classique paramétré par BreezingForms lors de son installation
    www.site.com/media/breezingforms/uploads. représenté par son "shortcode"
    Ce répertoire peut être modifié au besoin dans la configuration de BreezingForms.
  2. Largeur et hauteur de redimensionnement de l'image, si vous désirez forcer une taille pour le chargement d'images.
  3. Type de mise à l'échelle : concerne le redimensionnement. En pointant l'intitulé, vous obtiendrez les explications sur les valeurs disponibles.
  4. Couleur de fond pour la mise à l'échelle (si type est vide). À renseigner en valeur hexadécimale.
  5. Horodatage : Ajoute l'horodatage au nom de fichier.
  6. Extensions autorisées : Prérempli, vous pouvez choisir vos extensions autorisées en les séparant par une virgule. P.ex. pour les image jpg, jpeg, png, gif.
  7. Joindre à l'adresse de retour par email(s) : Permet de joindre le fichier chargé à l'e-mail destiné à l'utilisateur.
  8. Joindre aux email(s) de l'admin : Permet de joindre le fichier chargé à l'e-mail destiné à l'administrateur.
  9. Utiliser l'URL : Permet d'utiliser l'url du fichier sur le site et non le chemin absolu sur le serveur et de type home/utilisateur/www/images/image.jpg.

Les autres valeurs sont communes à n'importe quel type de champ.

Champ avec les options html5

Qu'apportent donc ces options html5 ? Et bien elles permettent de charger plusieurs fichiers en activant l'option Permettre le téléchargement HTML5/flash multi, elle permettent, sans script spécifique à créer, de contrôler la taille, ou plutôt le poids, du fichier à charger. Elles permettent aussi un procédé de chargement flash si applicable (vu l'avenir de flash, cette option est probablement appelée à disparaître de la version prochaine de BreezingForms.

Le gros avantage de la version de chargement html5 est bien entendu le contrôle du poids de fichier et cela se fait dès le choix de l'image depuis sa source par un message disant que le fichier ne pourra être chargé parce que trop lourd.
L'affichage en ligne est aussi un peu plus moderne même si l'image utilisée peut ne pas plaire, il sera très facile de la changer par une autre dans son répertoire.

Annexe

Pour les utilisateurs désirant quand-même utiliser la version classique mais désirant aussi contrôler le poids des images, il faut ajouter deux bouts de scripts au formulaire. Il faut savoir que contrairement à la solution html5, il y a chargement de l'image avant que le script puisse s'apercevoir que le poids soit supérieur à ce qui est autorisé, que lors du refus, il y effacement de l'image et redirection vers un message d'erreur. Pas gênant en soi hormis le temps que cela peut prendre.

Se rendre dans les Propriétés avancées du formulaire → Plus d'options → Envoyer des pièces, sélectionnez Personnalisé dans la partie Début de soumissions et coller le script suivant dans la zone de texte en ayant pris soin de corriger le lien de redirection, le nom du champ de chargement et le poids que vous souhaitez autoriser.

$this->execPieceByName('ff_InitLib');
// Obtenir le nom de l'élément de fichier téléchargé
$filename = ff_getSubmit('NomDuChamp');
// Vérifie le poids du fichier - 250 ko
if ($filename && filesize($filename) >= 250000) //250 ko
{
     // Crée le code d'erreur
     $this->status = _FF_STATUS_UPLOAD_FAILED;
     // suppression du fichier trop lourd
     unlink($filename);
     header("Location: https://www.NomDuSite.com/index.php?option=com_breezingforms&ff_name=NomDuFormulaire&ff_page=1&error=true");
//url vers formulaire = URL non SEO
}
    else {
 header("Location: https://www.NomDuSite.com/index.php?option=com_breezingforms&ff_name=NomDuFormulaire&ff_page=2");
}

Les valeurs en gras ci-dessus doivent être adaptées à votre situation.

Passez ensuite à l'onglet Pièces de formulaire et insérer le script suivant dans la partie Avant le formulaire :

$this->execPieceByName('ff_initLib');
$show_error = JRequest::getVar('error');
if ($show_error == 'true')
{
     echo '<script type="text/javascript">alert("Fichier trop volumineux, Taille maximale acceptée 250 ko.");</script>';
}

Le message d'erreur, en gras ci-dessus, peut être adapté à votre situation.

Éventuellement une bonne nouvelle pour les utilisateurs de la version Lite de BreezingForms, lors de l'accès aux propriétés avancées du champ de chargement, le composant indique que les options html5 ne sont disponibles que depuis la version Full (version Pro). Et bien je vous invite à tester quand-même, sait-on jamais… Sur mon site de test en version lite et chez une personne que j'ai guidée sur sa version Lite également, les options html5 sont bien actives malgré la mention contraire. Un bug peut-être ? Pas de raison en tous cas d'utiliser la méthode classique et s'encombrer d'un script. Attention toutefois à bien tester, il se peut que ça ne fonctionne pas chez chacun.

Testez le chargement de fichier

Les commentaires sont réservés aux membres enregistrés. Si vous êtes membre, veuillez vous connecter sinon, n'hésitez pas à vous enregistrer !