1
votes

Comment appeler un événement de clic sur un élément d'entrée avec Angular

J'essaie de créer un bouton de téléchargement car je ne souhaite pas utiliser le bouton de téléchargement HTML, comment puis-je appeler un événement de clic sur l'élément d'entrée pour ouvrir le navigateur de fichiers manuellement?

<div class="upload-button button" (click)="selectFile()">
   Upload
   <input type="file">
</div>

angular html

1 commentaires

Consultez cet exemple: stackoverflow.com/questions/53813791/...

3 Réponses :

-2
votes

Il suffit de cliquer sur le fichier input lorsque le div est cliqué:

<div class="upload-button button" click="document.getElementById('fileUploader').click();">
   Upload
   <input type="file" id="fileUploader">
</div>

3 commentaires

Ce qui précède fonctionnera mais ce n'est pas la manière habituelle de le faire dans Angular car il manipule le DOM directement et sort du cadre Angular.

Cela comporte également un certain risque si le composant est utilisé plusieurs fois sur une page. Disons que ce qui précède est un composant et que nous avons une forme qui l'utilise n fois. Avec la requête dom, il obtiendra probablement de nombreux résultats

@Stol merci d'avoir expliqué la raison du vote défavorable.

0
votes

Il suffit de cliquer pour que cela fonctionne selon ce que je comprends:

<div class="upload-button button" (click)="file.click()">
  Upload
  <input type="file" #file>
</div>

J'espère que cela vous aidera!

4 commentaires

Non, si vous cliquez sur le texte Upload, cela n'ouvrira pas le sélecteur de fichiers. click = "fichier" ne signifie rien.

@LajosArpad, Merci pour votre commentaire. J'ai mis à jour l'extrait de code selon ce que je comprends.

Ce n'est toujours pas correct. fichier ne veut rien dire dans ce contexte. Vous aurez juste besoin de trouver l'entrée, éventuellement par identifiant, voir ma réponse.

@LajosArpad, d'accord. Merci encore.

4
votes

Je le ferais avec le # décorateur dans la vue. De cette façon, nous pouvons donner un nom à l'entrée et appeler simplement name.click () pour l'appeler à partir d'un bouton par exemple:

      <button (click)="fileSelect.click()">Click me for fun!</button>
      <input style="display: none" #fileSelect type="file">

Le # selon la documentation: "Crée une variable locale qui fournit accès à l'instance d'élément dans les expressions de liaison de données et de liaison d'événement dans le modèle actuel. " Cheatsheet

0 commentaires