Change inputfile label when you already have an Angular selected file

Question

I have the following input file that uploads an image and turns to Base64:

            <div class="image-upload">
              <img class="fotoAnimal" [src]="imageSrc" style="max-width:300px;max-height:300px"/>
              <label for="upload" class="file-upload__label">Procurar foto</label>
              <input  id="upload" class="file-upload__input" name="imageUrl" type="file" accept="image/*" (change)="handleInputChange($event)" />
            </div>

My function that uploads:

  handleInputChange(e) {
    var file = e.dataTransfer ? e.dataTransfer.files[0] : e.target.files[0];
    var pattern = /image-*/;
    var reader = new FileReader();
    if (!file.type.match(pattern)) {
      alert('Formato inválido, permitido apenas jpeg e');
      return;
    }
    reader.onload = this._handleReaderLoaded.bind(this);
    reader.readAsDataURL(file);
  }
  _handleReaderLoaded(e) {
    let reader = e.target;
    this.imageSrc = reader.result;
    console.log(this.imageSrc)
  }

After an image is selected, the field continues "Find photo", I would like to switch to "Find another photo". How can I do this at the angle?

Answer 1

You can make a variable that gets your target.files .

var file = e.target.files;

And then you can manipulate your html with this variable

 <label for="upload">Procurar <span *ngIf="file.length > 0"> outra </span foto</label>

If the size of this variable is greater than zero it means you already have file ai vc changes its label.

I hope I helped Thank you.