"Users have reported that the file upload preview feature in Angular 6 only works after the

Question

"Users have reported that the file upload preview feature in Angular 6 only works after the

I am currently utilizing Angular 6.

In my application, I have a simple input type="file" field that passes data to an image source which displays the image I intend to upload.

The issue I am facing is that when I select an image for the first time, nothing happens. However, when I choose an image for the second time, the preview of the image appears successfully.

What could be causing this behavior? Why am I unable to see the image preview on the first selection?

Here is my HTML code:

<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>

And here is my TypeScript code:

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);
      });
  }
}

angular typescript angular6

Answer 1

Answer №1

Give this a try:

 displayPreview(event) {

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

    const fileType = event.files[0].type;
    if (fileType.match(/image\/*/) == null) {
      this.message = 'Please upload only images.';
      return;
    }

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

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

    const that = this; // setting reference of this to that
    reader.onload = () => {
        that.imageURL = reader.result;
        that.uploadedFile = event.files;
    };
}

Please let me know if this solution works for you.

Answer 2

Give this a try:

 displayPreview(event) {

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

    const fileType = event.files[0].type;
    if (fileType.match(/image\/*/) == null) {
      this.message = 'Please upload only images.';
      return;
    }

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

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

    const that = this; // setting reference of this to that
    reader.onload = () => {
        that.imageURL = reader.result;
        that.uploadedFile = event.files;
    };
}

Please let me know if this solution works for you.

Answer 3

Answer №2

When dealing with the Bottom Sheet component and uploading an image, I encountered a problem.

The solution was simple, just include

this._bottomSheetRef.containerInstance.enter();

Executing this line of code will successfully load the image.

Below is the revised code snippet:

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

Answer 4

When dealing with the Bottom Sheet component and uploading an image, I encountered a problem.

The solution was simple, just include

this._bottomSheetRef.containerInstance.enter();

Executing this line of code will successfully load the image.

Below is the revised code snippet:

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

Answer 5

Answer №3

Give this a try

checkInput(event) {

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

    const fileType = event.files[0].type;
    if (fileType.match(/image\/*/) == null) {
        this.message = 'Please select only images.';
        return;
    }

    const fileSize = event.files[0].size;
    if (fileSize > 200839) {
        this.message = 'File size should not exceed 200 kb.';
        return ;
    }

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

    const _that = this;
    fileReader.onload = () => {
        _that.imageURL =  fileReader.result;
        _that.selectedFile = event.files;
    };
 }

Answer 6

Give this a try

checkInput(event) {

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

    const fileType = event.files[0].type;
    if (fileType.match(/image\/*/) == null) {
        this.message = 'Please select only images.';
        return;
    }

    const fileSize = event.files[0].size;
    if (fileSize > 200839) {
        this.message = 'File size should not exceed 200 kb.';
        return ;
    }

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

    const _that = this;
    fileReader.onload = () => {
        _that.imageURL =  fileReader.result;
        _that.selectedFile = event.files;
    };
 }

"Users have reported that the file upload preview feature in Angular 6 only works after the

Answer №1

Answer №2

Answer №3

Similar questions

Execute the function upon clicking

Where can I find the Cypress.json file for Angular integration with Cypress using Cucumber?

Incorporating an interface into a data property within a router using TypeScript and Angular

angular-in-memory-web-api encounters a 404 error

Dealing with custom path problems in Angular 2+ webpack configurations

Utilizing Node modules in TypeScript, Angular 2, and SystemJS: A Comprehensive Guide

Tabs justified are not constrained by width

What is the best way to incorporate Tradingview's JavaScript into the render function of a React Typescript

What are the steps to update data in an md-table?

Obtaining data attributes in Angular 8

The module 'PublicModule' was declared unexpectedly within the 'AppModule' in the Angular 4 component structure

Steps to automatically update a component when the button is clicked

The error message "Angular 4 does not recognize the 'dragula' property as a valid property of the 'div' element" is displayed

How to retrieve a stored value using Ionic 3 native storage

Guide to creating two-way data binding using ngModel for custom input elements like radio buttons

Jasmine test case for Angular's for loop (Error: Expected the length of $ to be 11, but it should be 3

The implementation of combineSlices in reduxjs/[email protected] is an essential feature for managing

How to access different state sections within a reducer using ngrx

Error message: Injector Error: R3InjectorError(Standalone[_AppComponent])[_WebService -> _WebService -> _WebService] occurred

Display a slideshow of images using the text and <img> tags found within a string in an Angular application