Skip to content

UI: Vérifie le type de fichier côté client avant import

Sylvain Boulade requested to merge verify-file-type into main

Contexte

Insitu ne supporte l'import que de certains types de fichiers (voir cette config).

Afin d'éviter des allers retours inutiles avec l'API et des étapes supplémentaires pour les utilisateurs, nous pouvons vérifier que le type de fichier choisi est compatible côté client à la première étape de l'import.

Ref: https://datahub.incubateur.tech/infrastructure/indicateurs/-/issues/258

Contenu

Dans un premier temps nous pouvons indiquer cette limitation explicitement au niveau de l'input HTML via l'attribut accept.

Toutefois cela n'est pas suffisant: l'effet de cet attribut varie selon les navigateurs et il est plus là à titre d'information. On peut donc également parser le nom du fichier lorsqu'il est sélectionné, et vérifier que l'extension est compatible.

Dans le cas contraire, on affiche un message d'erreur pour inviter l'utilisateur à choisir un autre fichier.

En supplément:

  • On affiche un "hint" au dessus de l'input pour préciser cette limitation aux utilisateurs
  • J'ai également dû étendre un peu la config jest pour préparer les tests unitaires de cette fonctionnalité

Démo

file_type_check

Merge request reports