Change inputfile label when already has a selected file Angular

Question

Change inputfile label when already has a selected file Angular

Navigation

#1 by (0 votes)

0

I have the following input file that uploads an image and transforms it into 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 role 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 "Browse for photo", I would like to switch to "Browse another photo". How can I do this in the angle?

html typescript angular

asked by anonymous 19.11.2018 / 21:51

1 answer

Change an entity by passing a list Search in Array returning Default object

score 0 · Accepted Answer

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 that it already has a file, and you change its label.

I hope I have helped Thank you.