Podrías simplemente agregar un label
:
Opcion 1:
Si el label
contiene tanto el input
como el img
, entonces al hacer click
sobre img
será como si hubiese hecho click
sobre el input
.
Demo:
<div class="" (click)="()">
<label>
<input id="" type="file" (change)="()">
<img class="" src={{img}} (click)="">
<label>
<p class="">Texto de ejemplo</p>
</div>
Opcion 2:
Si el label
contiene solo el img
y además le agregarmos el atributo for
cuyo valor sea igual al id
del input
, entonces al hacer click
sobre img
será como si hubiese hecho click
sobre el input
.
Demo:
<div class="" (click)="()">
<input id="archivo" type="file" (change)="()">
<label for="archivo">
<img class="" src={{img}} (click)="">
<label>
<p class="">Texto de ejemplo</p>
</div>