Image preview before upload image in react

you can use this

1.UploadComponent and upload.component.html

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vaibhav Chauhan5y ago
check if window object is accesible then you can use

window.URL.createObjectURL(blob);
0
Sachin Singh5y ago
you can use this

1.UploadComponent and upload.component.html
"color:red;" *ngIf="message">{{message}}
"file" accept='image/*' (change)="preview(file.files)" />
"imgURL" height="200" *ngIf="imgURL">
export class UploadComponent {
  public imagePath;
  imgURL: any;
  public message: string;

  preview(files) {
    if (files.length === 0)
      return;

    var mimeType = files[0].type;
    if (mimeType.match(/image\/*/) == null) {
      this.message = "Only images are supported.";
      return;
    }

    var reader = new FileReader();
    this.imagePath = files;
    reader.readAsDataURL(files[0]);
    reader.onload = (_event) => {
      this.imgURL = reader.result;
    }
  }
}
0