Как вызвать событие щелчка на элементе ввода с Angular

Question

Я пытаюсь создать кнопку загрузки, потому что я не хочу использовать кнопку загрузки HTML, как я могу вызвать событие click для элемента ввода, чтобы открыть браузер файлов вручную?

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

Answer 1

Просто нажмите, чтобы все заработало согласно моему пониманию:

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

Надеюсь, это поможет!

Answer 2

Я бы сделал это с # декоратором в представлении. Таким образом, мы можем дать вводу имя и просто вызвать name.click (), чтобы вызвать его с помощью кнопки, например:

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

# в соответствии с документами: «Создает локальную переменную, которая обеспечивает доступ к экземпляру элемента в выражениях привязки данных и привязки к событиям в текущем шаблоне». Cheatsheet

Answer 3

Просто click на file input, когда div is нажал:

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