How to put an input file which can be clicked on an image?

You could simply add a label :

Option 1:

If the label contains both the input and the img , then making click on img will be as if you had done click on input .

Demo:

<div class="" (click)="()">
  <label>
    <input id="" type="file" (change)="()">
    <img class="" src={{img}} (click)="">
  <label>
  <p class="">Texto de ejemplo</p>
</div>

Option 2:

If the label contains only the img and also add the attribute for whose value is equal to id of input , then doing click on img will be as if there were done click on 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>