Angular でファイルをアップロード

1. Angular でのライブラリのインポート
2. コンポーネントのエクスポートと Angular での変数の宣言
3. Angular で basicUpload() を使用して複数のファイルをアップロードする
4. Angular で basicUploadSingle() を使用して単一ファイルをアップロードする
5. Angular で uploadAndProgress() を使用して複数のファイルをアップロードする
6. Angular で UploadAndProgressSingle() を使用して単一ファイルをアップロードする
7. Angular でアップロード関数を呼び出す
8. まとめ

Angular を使用して 4つの異なるスタイルでファイルをアップロードする方法を紹介します。

また、ファイルのアップロード中に進行状況バーを表示する方法と、アップロードが完了したときにファイルのアップロード完了メッセージを表示する方法を紹介します。

Angular でのライブラリのインポート

まず、ライブラリをインポートし、ファイルアップローダーのコンポーネントを設定します。

# angular
import { Component, VERSION } from '@angular/core';
import {HttpClientModule, HttpClient, HttpRequest, HttpResponse, HttpEventType} from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    Version = {{version.full}} <br/>
    <input type="file" (change)="upload($event.target.files)" />
    Upload Percent: {{percentDone}}% <br />
    
    <ng-container *ngIf="uploadSuccess">
      Upload Successful
    </ng-container> 
  `,
})

コンポーネントのエクスポートと Angular での変数の宣言

次に、AppComponent をエクスポートし、変数 percentDone を number として宣言し、UploadSuccess をブール値として宣言します。また、HttpClient を呼び出すコンストラクターを宣言します。

# angular
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;

  constructor(
    private http: HttpClient,
    ) { }
    
  version = VERSION

Angular で basicUpload() を使用して複数のファイルをアップロードする

Angular には 4つの異なるスタイルのファイルアップロードがあり、複数のファイルの basicUpload() はそのうちの 1つです。このスタイルでは、ファイルの進行状況バーを表示せずに、複数のファイルを一度にアップロードできます。

basicUpload(files: File[]){
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file', f))
    this.http.post('https://file.io', formData)
      .subscribe(event => {
        console.log('done')
      })
  }

アップロードリクエストを https://file.io に送信しています。これはバックエンドサーバーの URL で変更できます。バックエンドサーバーはファイルのアップロードデータを受信し、アップロードされたファイルへの URL を送信します。

Angular で basicUploadSingle() を使用して単一ファイルをアップロードする

Angular でファイルをアップロードするための 2 番目のスタイルは、単一ファイルの basicUploadSingle() です。このスタイルでは、ユーザーは一度に 1つのファイルしかアップロードできません。このスタイルでは、ファイルのアップロード中も進行状況は表示されません。

basicUploadSingle(file: File){
    this.http.post('https://file.io', file)
      .subscribe(event => {
        console.log('done')
      })
  }

Angular で uploadAndProgress() を使用して複数のファイルをアップロードする

Angular でファイルをアップロードするための 3 番目のスタイルは、複数のファイルの uploadAndProgress() です。ユーザーはこのスタイルで複数のファイルを同時にアップロードでき、進行状況バーにアップロードされたファイルの割合が表示されます。

uploadAndProgress(files: File[]){
    console.log(files)
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file',f))
    
    this.http.post('https://file.io', formData, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
    });
  }

Angular で UploadAndProgressSingle() を使用して単一ファイルをアップロードする

Angular でファイルをアップロードするための 4 番目のスタイルは、単一ファイルの uploadAndProgressSingle() です。このスタイルでは、ユーザーは 1つのファイルを同時にアップロードでき、進行状況バーにアップロードされたファイルの割合が表示されます。

uploadAndProgressSingle(file: File){
    this.http.post('https://file.io', file, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
    });
  }

Angular でアップロード関数を呼び出す

Angular でアップロード関数の 4つのスタイルを追加したので、目的のスタイルでアップロード関数を呼び出すことができます。

upload(files: File[]){
    //pick from one of the 4 styles of file uploads below
    this.uploadAndProgress(files);
  }

出力：

まとめ

Angular でのファイルアップロードの 4つの異なるスタイルと、upload 関数でそれらを呼び出す方法について説明しました。完全なコードを以下に示します。

import { Component, VERSION } from '@angular/core';
import {HttpClientModule, HttpClient, HttpRequest, HttpResponse, HttpEventType} from '@angular/common/http';

@Component({
  selector: 'my-app',
  template: `
    Version = {{version.full}} <br/>
    <input type="file" (change)="upload($event.target.files)" />
    Upload Percent: {{percentDone}}% <br />
    
    <ng-container *ngIf="uploadSuccess">
      Upload Successful
    </ng-container> 
  `,
})
export class AppComponent {
  percentDone: number;
  uploadSuccess: boolean;

  constructor(
    private http: HttpClient,
    ) { }
    
  version = VERSION
  
  upload(files: File[]){
    this.uploadAndProgress(files);
  }

  basicUpload(files: File[]){
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file', f))
    this.http.post('https://file.io', formData)
      .subscribe(event => {
        console.log('done')
      })
  }

  basicUploadSingle(file: File){
    this.http.post('https://file.io', file)
      .subscribe(event => {
        console.log('done')
      })
  }
  
  uploadAndProgress(files: File[]){
    console.log(files)
    var formData = new FormData();
    Array.from(files).forEach(f => formData.append('file',f))
    
    this.http.post('https://file.io', formData, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
    });
  }
  
  uploadAndProgressSingle(file: File){
    this.http.post('https://file.io', file, {reportProgress: true, observe: 'events'})
      .subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.percentDone = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          this.uploadSuccess = true;
        }
    });
  }
}

出力：