Delirium Stage

Toujours dans le cadre du développement d’un plateforme d’envoi de newsletter pendant mon stage, j’ai dû gérer l’upload de certains fichiers (images, csv, pdf…). J’ai cherché comment faire pour filtrer les extensions d’un champs dans un formulaire de type file. Vu que j’ai rien trouvé concernant une quelconque restristriction existante en natif avec Javascript (et parce que j’avais pas le temps de chercher davantage pour tenir les délais), je me suis occupé de créer une fonction qui gérer ce filtrage.

Comme pour le tutoriel précédent, ici je ne m’occuperai que de la partie client du code. On verra plus tard si je trouve le temps/la motivation de faire un gros exemple complet avec la partie PHP également (bien que là, les tutos pullulent sur la toile).

Exemple

Vous trouverez sur cette page l’exemple concret d’où est tiré ce petit tuto : Tutoriel de filtrage d’un input type file.

Le formulaire

<form name="form_upload" action="#" method="post" onsubmit="check_form(this);return document.valid_form;">
  <p><input type="file" id="fichier" name="fichier" onblur="check_ext(this);" /></p>
  <p><input type="submit" id="form_upload_submit" name="form_upload_submit" value="Upload" /></p>
</form>

Dans mon application j’ai choisi de placer la vérification lorsque l’input fichier perd le focus (onblur). Histoire de pousser plus loin, j’ai également mis une vérification à la soumission du formulaire.

in_array

Avant d’attaquer les deux fonctions principales de la vérification, voici une fonction dont on aura besoin dans check_ext(). Pour comparer l’extension du fichier sélectionné avec la liste des extensions autorisées, j’ai porté en Javascript la fonction in_array() de PHP en la modifiant un peu.

Si vous voulez des infos sur la fonction in_array de PHP, voilà le lien vers le manuel en ligne : PHP: in_array – Manual.

N’ayant pas besoin de l’option strict de cette fonction, je l’ai pas portée ici. Si ça en intéresse certains, jetez un coup d’oeil sur la fonction typeOf de Javascript. A la place, j’ai ajouté un paramètre optionnel pour savoir si on tient compte ou pas de la casse.

function in_array(needle, haystack, caseSensitive) {
  if(caseSensitive == null)
    caseSensitive = true;
  var find = false;
  for(i=0; i<haystack.length; i++) {
    if(!caseSensitive && haystack[i].toUpperCase() == needle.toUpperCase()) {
      find = true;
      break;
    }
    else if(haystack[i] == needle) {
      find = true;
      break;
    }
  }
  return find;
}

check_ext

function check_ext(field) {
	var ext = new Array("PHP", "TXT");
	var valeur = field.value;
	if(valeur != "") {
		valeur = valeur.substring(valeur.lastIndexOf(".")+1, valeur.length);
		if(!in_array(valeur, ext, false)) {
			field.value = "";
			alert("Extension non autorisée !");
		}
	}
}

1. La fonction reçoit en paramètre l’objet de l’input.
2. On définit les extensions autorisées dans un tableau.
3. On récupère la valeur du input dans la variable valeur.
4. On ne fait la vérification que si on a choisi un fichier. Sans ça, en cliquant sur Annuler lors de la sélection du fichier, on aurait le droit à une Alerte qui s’afficherait, ce qui est normal. La fonction chercherait l’extension dans une chaine vide et donc vu qu’elle ne la trouvera pas (logique) elle affichera une erreur. Bref, pas top.
5. On coupe la chaine de caractère valeur pour ne garder que l’extension. Note : en Javascript les types sont des objets et disposent de certaines méthodes dont substring et lastIndexOf.
6. On recherche l’extension dans le tableau. Si on ne la trouve pas, cela veut dire que l’extension ne fait pas partie de celles autorisées ! On vide la valeur du champs et on affiche une erreur.

check_form

function checkForm(f) {
	document.valid_form = true;
	var err = "";
	if(f.fichier.value == "")
		err += "- Vous devez choisir un fichier\n";
	if(err != ""){
		document.valid_form = false;
		alert("Erreurs : \n\n"+err);
	}
}

Là on ne fait que vérifier que le champs fichier ne soit pas vide.

Conclusion

Et voilà c’est fini, vous avez un filtrage des extensions pour un champs file en Javascript. Attention quand même ! Il ne faut pas penser que ça suffit (ne jamais faire confiance aux utilisateurs). Il ne faut pas oublier de faire le même filtrage en PHP avant d’utiliser le fichier, sans quoi votre application ne sera pas sécurisée au mieux.

Mais si on doit obligatoirement le faire en PHP, pourquoi le faire en Javascript ? Tout simplement pour faire gagner du temps à l’utilisateur en faisant des rechargements de page inutiles.

Articles sur le même sujet :

1. [Javascript] SyntaxHighlighter
2. [Javascript] Tout sélectionner/déselectionner