Angular で、アップロード前のファイルをプレビューしつつ、MD5 値も計算する

bar.component.ts

import { Component, OnInit } from '@angular/core';
import { ViewChild } from '@angular/core';
import { ElementRef } from '@angular/core';
import { ArrayBuffer } from 'spark-md5';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-bar',
  template: `
    <div>
      <input type="file" (change)="md5Trial()" #fileInput>
    </div>

    <img [src]="src" [alt]="hash" [title]="hash">
  `,
  styleUrls: ['./bar.component.css']
})
export class BarComponent implements OnInit {

  @ViewChild('fileInput')
  fileInput: ElementRef;

  src: SafeUrl;

  hash: string;

  constructor(
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit() {
  }

  md5Trial() {
    const { files } = this.fileInput.nativeElement;

    Array.prototype.forEach.call(files, (file: File) => {
      const reader = new FileReader();

      // readAsArrayBuffer() で読み込み、spark-md5 というライブラリーの ArrayBuffer.hash() に渡すと、
      // md5 my-image.png
      // というコマンドで計算した MD5 値と同じものが得られる
      reader.onload = event => {
        const { result } = event.target as FileReader;
        this.hash = ArrayBuffer.hash(result);
      };
      reader.readAsArrayBuffer(file);

      // URL.createObjectURL() で生成した URL は、そのままだと Angular のセキュリティエラーになるが、
      // DomSanitizer.bypassSecurityTrustUrl() を通せばエラーが防げる
      this.src = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
    });
  }

}