Angular image upload does not work with Internet Explorer but it working in google chrome

Question

I have been successful implementing, works in all browsers except Internet Explorer 11. I am using Internet explorer 11 and I have implemented I have been successfully upload the .jpeg, .jpg and .png image in Google Chrome but not able to upload in IE 11
this code is perfectly working in google chrome development and production but in IE11 not woking
I can upload jpeg, jpg, png in Google Chrome all size image but not able to upload any type of image in IE11.

<div class="form-group">
  <label class="form-control-label" jhiTranslate="companyManagement.new-logo">Upload new Logo</label>
  <input class="tdw-display-none" (change)="onFileChange($event, 'logo')" type="file"
           formControlName="logo" placeholder="Company logo">

onFileChange($event, doc: string) {
const files = $event.target.files;
if (files && files.length > 0) {
  const fileType: string = files[0].type;
  const fileSize: number = files[0].size;
  if (fileType) {
    if (fileType.includes('png') || fileType.includes('jpeg') || fileType.includes('jpg')) {
      this.image.name = files[0].name;
      this._compressImage(files[0], fileData => {
        this.image.data = fileData;
        this._mLogo = fileData;
        this.company.logo = fileData.split(',')[1];
      });
    } else {
      console.log('--------------Invalid File Type----------');
    }
  }
}

}

private bytesToSize(bytes) {
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    if (bytes === 0) {
      return 'n/a';
    }
    const i = Math.floor(Math.log(bytes) / Math.log(1024));
    if (i === 0) {
      return bytes + ' ' + sizes[i];
    }
    return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
  } 

    private _compressImage(file, callback) {
    this.ng2ImgMaxService.resize([file], 600, 600).subscribe(
      result => {
        this._readImageAndLoad(result, callback);
        console.log("after _readImageAndLoad");
      },
      error => {
        console.error('---------------Resize error-------------', error);
      }
    );
  }  

    private _readImageAndLoad(file, callback) {
    const reader = new FileReader();
    reader.onload = (e: any) => {
      const dataUrl = e.target.result;
      const base64 = dataUrl.split(',')[1];
      console.log(" _readImageAndLoad");
      callback(dataUrl);
    };
    reader.readAsDataURL(file);
  }

Answer 1

You're using arrow functions ( the () => {} ) thing.

They are not supported by IE11, so you must change them to the old way of implementation. Example:

  error => {
    console.error('---------------Resize error-------------', error);
  }

  //Should be

 function(error) {
    console.error('---------------Resize error-------------', error);
  }