Preview image con html5 y filereader y html5

html:

<img src="" name="img" />

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <input type="file" id="avatar" (change)="onFileChange($event)" #fileInput>
    <button type="submit">Submit</button>
</form>


Angular:

onFileChange(event) {
    if(event.target.files.length > 0) {
      let file = event.target.files[0];
     
      var preview = document.querySelector('img');     
      var reader  = new FileReader();
   
      reader.onloadend = function () {
        preview.src = reader.result;
      }
   
      if (file) {
        reader.readAsDataURL(file);
      } else {
        preview.src = "";
      }
    }
}

No hay comentarios:

Publicar un comentario