【TypeScript/Angular】Formでファイルを読み込む

ReactiveFormsModuleの追加

imports: [
    environment.production ? [] : AkitaNgDevtools.forRoot(),
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
]

Templateにファイル読み込み用のFormを追加

<form [formGroup]="form" (ngSubmit)="submit()">
  <div class="form-group">
    <label for="file">File</label>
    <input
      formControlName="file"
      id="file"
      type="file"
      class="form-control"
      (change)="onFileChange($event)">
>
<div*ngIf="f['file'].touched && f['file'].invalid" class="alert alert-danger">
      <div*ngIf="f['file'].errors?.['required']">File is required.</div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>
{{input}}

Componentに読み込む処理を追加

• ファイルの選択時に、選択したファイルをeventオブジェクトから取り出す
• FileReaderのread結果をTemplateに反映している
• 今回は読み出したいCSVがSJISだったのでEncodeを指定している

import {Component, OnInit} from '@angular/core';
import {FormBuilder, Validators} from '@angular/forms';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    form = this.fb.group({file: ['', [Validators.required]]});
    file: File | null = null;
    input = "";

    constructor(private fb: FormBuilder) {
    }

    get f() {
        return this.form.controls;
    }

    ngOnInit() {
    }

    onFileChange(event: any) {
        if (event.target.files.length > 0) {
            this.file = event.target.files[0];
        }
    }

    submit() {
        this.readAsText(this.file!).then(result => this.input = result);
    }

    private readAsText(file: File): Promise<string> {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => {
                resolve(reader.result as string);
            };
            reader.onerror = () => {
                reject(reader.error);
            };
            reader.readAsText(file, 'shift-jis'); // デフォルトのEncodeはUTF-8
        });
    }
}