angular 6 file upload preview working only after second upload

Question

I using Angular 6.

I have simple input type="file" that pass data to img scr that show me image that i need to upload.

When i select image first time nothing happens,and when i select image second time i do see the preview image.

What i am missing why i don't see the image preview in the first time?

My html

<div class="container" class="border">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h3>Choose File</h3>
            <form (ngSubmit)="onSubmit()">
                <span style="color:red;" *ngIf="message">{{message}}</span>
                <input #file type="file"  ngf-max-size='10' accept='image/*' name="image" (change)="preview(file)">
                <img [src]="imgURL" height="200" width="200" *ngIf="imgURL">
                <div class="form-group">
                    <button class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

My TypeScript

export class BottomSheetComponent implements OnInit {

  token = this.pzLogin.userLoginAccessToken;
  public imagePath;
  imgURL: any = this.pzLogin.UserLoginClaims.ImageUrl;
  public message: string;
  fileData = new FileReader();

  constructor(
    private _bottomSheetRef: MatBottomSheetRef<BottomSheetComponent>,
     private http: HttpClient, private pzLogin: PrivateZoneLoginService,
     private localStorageService: LocalStorageService) { }

 /* openLink(event: MouseEvent): void {
    this._bottomSheetRef.dismiss();
    event.preventDefault();
  }*/

  ngOnInit() {

  }

  preview(event) {

    if (event.files.length === 0) {
      return;
    }

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

    const fileSize = event.files[0].size;
    if (fileSize > 200839) {
      this.message = 'Maximum upload file size 200 kb.';
      return ;
    }

    const reader  = new FileReader();
    reader.readAsDataURL(event.files[0]);

    reader.onload = () => {
    this.imgURL =  reader.result;
    this.fileData = event.files;
    };
  }

  onSubmit() {
    const formData = new FormData();
   formData.append('UploadedFile', this.fileData[0], this.fileData[0].name);
   formData.append('token', this.token);
    this.http.post('http://localhost:11111/PrivateZone/UploadUserImage', formData)
      .subscribe(res => {
        console.log('res' + res);
        this.localStorageService.setItem('UserLoginClaims', res);
      });
  }
}

can you add put timeout in `reader.onload` and try again. like this timeOut(resp => { reader.onload = () => { this.imgURL = reader.result; this.fileData = event.files; }; }, 0); — Yash Rami, Jun 04 '19 at 05:40
if you log inside the reader.onload did you get the url in first time — Yash Rami, Jun 04 '19 at 05:49
no i'm taking about the log did you get the log in console first time — Yash Rami, Jun 04 '19 at 05:50
it is working for the 1st time also. here is the stackblitz url: https://stackblitz.com/edit/angular-twgg1g — Shadab Faiz, Jun 04 '19 at 05:57
Shadab Faiz yes in this example all working, but in my case i see image only after second time.I know this is sound very strange but it is — Vladimir Potapov, Jun 04 '19 at 07:11

Yash Rami · Answer 1 · 2019-06-04T06:18:00.840

0

you can try like this

 preview(event) {

    if (event.files.length === 0) {
      return;
    }

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

    const fileSize = event.files[0].size;
    if (fileSize > 200839) {
      this.message = 'Maximum upload file size 200 kb.';
      return ;
    }

    const reader  = new FileReader();
    reader.readAsDataURL(event.files[0]);

    const self = this; // here we gave reference of this to self 
    reader.onload = () => {
    self.imgURL =  reader.result;
    self.fileData = event.files;
    };
  }

let me know if it is working or not.

edited Jun 04 '19 at 06:18

answered Jun 04 '19 at 05:55

Yash Rami

2,276
1
10
16

Please explain what you did and/or changed. – Roy Jun 04 '19 at 06:08
can you replace this line `imgURL: any = this.pzLogin.UserLoginClaims.ImageUrl;` with this code `imgURL: any;` – Yash Rami Jun 04 '19 at 06:42
I just checked your stackBlitz it is working as expected – Yash Rami Jun 04 '19 at 07:31

score 0 · Answer 2 · edited Nov 19 '19 at 10:26

0

Try like this

preview(event) {

    if (event.files.length === 0) {
        return;
    }

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

    const fileSize = event.files[0].size;
    if (fileSize > 200839) {
        this.message = 'Maximum upload file size 200 kb.';
        return ;
    }

    const reader  = new FileReader();
    reader.readAsDataURL(event.files[0]);

    const _self = this;
    reader.onload = () => {
        _self.imgURL =  reader.result;
        _self.fileData = event.files;
    };
 }

edited Nov 19 '19 at 10:26

Sourav Golui

583
1
6
13

answered Jun 04 '19 at 06:02

Ronika

24
2

Please explain what you did and/or changed. – Roy Jun 04 '19 at 06:08
can you explain me what is difference between your ans and my answer ? :-) – Yash Rami Jun 04 '19 at 06:19
I didn't see your answer. after my post i see yours – Ronika Jun 04 '19 at 07:27
onload event changed self assigned instead of this – Ronika Jun 04 '19 at 07:33
Vova - your code is perfectly run my local. Please check any other are you doing? – Ronika Jun 04 '19 at 07:39

score 0 · Accepted Answer · answered Jun 11 '19 at 10:27

I have this upload Image in Bottom Sheet component, and this was a problem.

You just need to add this._bottomSheetRef.containerInstance.enter();

This will load the image

Here the change that i have made:

  this.reader.onload = () => {
      this.imgURL = this.reader.result;
       this.fileData = event.files;
       this._bottomSheetRef.containerInstance.enter();
    };

angular 6 file upload preview working only after second upload

3 Answers3