Afficher par programme les noms de fichiers dans l'entrée de fichier : implémenté à l'aide d'Angular

Question

Bonsoir,

Je développe une application utilisant Angular15 et l'une des fonctions est de remplir un tableau avec les données des membres de l'équipe.

Pour ajouter des membres, vous devez cliquer sur un bouton puis afficher une fenêtre modale pour remplir les données et ajouter des fichiers. Les opérations d'édition sont les mêmes.

J'ai réussi à enregistrer les données et à télécharger le fichier dans le dossier du serveur, mais lors de l'édition, j'ai rencontré un problème : dans la zone de saisie du fichier, le nom du fichier téléchargé n'apparaît pas, il semble qu'aucun fichier n'ait été téléchargé, bien que en fait Déjà téléchargé.

J'ai stocké le nom du document dans une propriété membre et utilisé ngModel pour lier la zone de saisie du fichier à la propriété membre.

La zone de saisie affiche le message "Aucun fichier sélectionné" et si j'essaie de définir le nom du fichier par programme sur la zone de saisie (je le contrôle à l'aide de ViewChild et ElementRef dans un fichier .ts), j'obtiens l'erreur suivante :

core.js:1448 Erreur : non capturé (promis) : InvalidStateError : impossible de définir la propriété 'value' sur 'HTMLInputElement' : cet élément d'entrée accepte un nom de fichier, qui ne peut être défini par programme que sur la chaîne vide. Erreur : Impossible de définir l'attribut « valeur » de « HTMLInputElement » : cet élément d'entrée accepte un nom de fichier, qui ne peut être défini par programme que sur une chaîne vide.

Je comprends parfaitement que je ne peux pas faire cela en raison des risques de sécurité que cela implique, mais je ne veux pas insérer le fichier par programme, je veux juste afficher le nom du fichier, pas son contenu. Y'a-t-il une quelconque façon de réussir cela?

Merci.

Answer 1

Dans la documentation web

const input = document.querySelector("input[type=file]");
input.value = "foo";