Saving an image in Cloud App Settings

settings.component.html

<div class="eca-actions">
  <button mat-flat-button color="secondary" [routerLink]="['/']">Back</button>
  <button mat-flat-button color="primary" (click)="save()">Save settings</button>
</div>
<div class="loading-shade" *ngIf="loading">
  <mat-progress-spinner mode="indeterminate" diameter="50"></mat-progress-spinner>
</div>
<h1>Settings</h1>
<h2>Logo</h2>
<div><img src="{{logoUrl}}" style="max-width: 100%;"/></div>
<input type="file" id="files" class="hidden" (change)="fileChangeEvent($event.target.files)" accept="image/*" style="display: none;"/>
<label for="files" class="mat-flat-button mat-button-base mat-secondary">Select an image file</label>

settings.component.ts

import { Component, OnInit } from '@angular/core';
import { AlertService, CloudAppSettingsService } from '@exlibris/exl-cloudapp-angular-lib';
import { finalize } from 'rxjs/operators';
import { resizeImage } from './utils';

const MAX_IMAGE_SIZE = 300;

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit {

  settings = { logo: '' };
  loading = false;

  constructor(
    private alert: AlertService,
    private settingsService: CloudAppSettingsService,
  ) { }

  ngOnInit() {
    this.loading = true;
    this.settingsService.get().subscribe({
      next: settings=>Object.assign(this.settings, settings),
      complete: () => this.loading = false
    });
  }

  fileChangeEvent(files: File[]) {
    resizeImage(files[0], MAX_IMAGE_SIZE)
    .then(result=>this.settings.logo = result)
    .catch(error=>this.alert.error('Error reading image' + error));
  }

  get logoUrl() {
    return this.settings.logo;
  }

  save() {
    this.loading = true;
    this.settingsService.set(this.settings).pipe(
      finalize(() => this.loading = false)
    ).subscribe({
      next: () => this.alert.success('Settings successfully saved'),
      error: e => this.alert.error('Error saving settings')
    })
  }

}

utils.ts

export function resizeImage(file: File, maxSize: number) {
  const reader = new FileReader();
  const image = new Image();
  const canvas = document.createElement('canvas');
  const resize = () => {
    let width = image.width;
    let height = image.height;

    if (width > height) {
      if (width > maxSize) {
        height *= maxSize / width;
        width = maxSize;
      }
    } else {
      if (height > maxSize) {
        width *= maxSize / height;
        height = maxSize;
      }
    }
    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(image, 0, 0, width, height);
    return canvas.toDataURL('image/png');
  };

  return new Promise((resolve: (result: string) => void, reject) => {
    if (!file.type.match(/image.*/)) {
      reject(new Error("Not an image"));
      return;
    }
    reader.onload = (readerEvent: ProgressEvent<FileReader>) => {
      image.onload = () => resolve(resize());
      image.src = readerEvent.target.result.toString();
    };
    reader.readAsDataURL(file);
  })    
};