Angular2でFile APIを利用する - 闘うITエンジニアの覚え書き

Angular2 >

Angular2でFile APIを利用する †

HTML †

<input type="file" id="file1" (change)="onFileSelect($event)" >
<hr >

<h3>ファイル内容(確認用)</h3>
<div>
  <img *ngIf="isImage" [src]="srcImage" />
  <pre *ngIf="isText" style="border:1px solid #333;padding:5px;margin:0;" >{{srcText}}</pre>
  <object *ngIf="isPdf" [data]="srcPdf" type="application/pdf"></object>
</div>

<br />

<h3>ファイル内容(Base64)</h3>
<div style="border:1px solid #333;padding:5px;word-wrap:break-word;word-break:break-all;">{{base64Text}}</div>

Component †

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-select-file',
  templateUrl: './select-file.component.html',
  styleUrls: ['./select-file.component.css']
})

export class SelectFileComponent implements OnInit {

  // ファイルの内容
  base64Text = ''; 

  // 選択されたファイルの種類(デバッグ用) 
  isImage = false;
  isText = false;
  isPdf = false;

  // ファイルの内容(デバッグ用) 
  srcImage = ''; 
  srcText = ''; 
  srcPdf: any = ''; 

  constructor(private sanitizer: DomSanitizer) {
  }

  /** 
   * 初期処理. 
   */  
  ngOnInit() {
  }

  /** 
   * ファイル選択時. 
   * (ElementRef を使用してもFile要素にアクセスは可能だが、
   *   ファイル選択時にイベント参照してデータ取得しておく方が手間は少なそう) 
   *  ※Base64エンコードデータへの変換中は Loading？ 中に しておく等の工夫は必要かも。
   */  
  onFileSelect($event) {

    this.base64Text = ''; 
    this.srcImage = ''; 
    this.srcText = ''; 
    this.srcPdf = ''; 

    this.isImage = false;
    this.isText = false;
    this.isPdf = false;

    if ($event.target.files && $event.target.files.length > 0) {

      console.log($event.target.files[0]);

      // コンポーネント参照をthis以外で出来るようにしておく
      const pageObj = this;

      const file = $event.target.files[0];
      const fr = new FileReader();
      fr.onload = function(evt: any) {
        const base64Url  = evt.target.result;
        pageObj.base64Text = base64Url.replace(/^.+,/, '');
        if (base64Url.match(/^data:text\/.+/)) {
          // const plainText = atob(pageObj.base64Text);
          const plainText = pageObj.b64DecodeUnicode(pageObj.base64Text);
          pageObj.srcText = plainText;
          pageObj.isText = true;
          console.log('--- text ---');
          console.log(plainText);
        } else if (base64Url.match(/^data:image\/.+/)) {
          console.log('--- image ---');
          pageObj.srcImage = base64Url;
          pageObj.isImage = true;
        } else if (base64Url.match(/^data:application\/pdf/)) {
          pageObj.srcPdf = pageObj.sanitizer.bypassSecurityTrustResourceUrl(base64Url);
          pageObj.isPdf = true;
        }
      };
      fr.readAsDataURL(file);

    } else {
      console.log('not selected!');
    }
  }

  /**
   * Base64デコード
   * https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#The_.22Unicode_Problem.22
   */
  b64DecodeUnicode(str) {
    // return atob(str);
    return decodeURIComponent(atob(str).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
  }

}