[Angular] Angular와 Firebase 연동(Cloud Storage)

이전 포스팅에서는 Angular와 Cloud Firestore 연동하는 것을 해보았습니다.

자세한 내용은 이전 포스팅을 참고해주세요.

Angular와 Firebase 연동(Cloud Firestore)

이번 포스팅에서는 Angular와 Cloud Storage를 연동하는 것을 해보겠습니다.

먼저 이전에 작성한 firebase.module.ts에 Cloud Storage를 사용하기 위한 라이브러리를 추가해줍니다.

import {NgModule} from '@angular/core';
import {AngularFireModule} from '@angular/fire';

import {environment} from '../environments/environment';
import {AngularFireAuthModule} from '@angular/fire/auth';
import {AngularFirestoreModule} from '@angular/fire/firestore';
import {AngularFireStorageModule} from '@angular/fire/storage';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule.enablePersistence({
      synchronizeTabs: true
    })
  ],
  exports: [
    AngularFireModule,
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule  // Cloud Storage를 사용하기 위한 모듈 추가
  ]
})
export class FirebaseModule {
}

그리고 Cloud Storage에 파일을 업로드하고 가져오기 위한 StorageService를 생성해줍니다.

$ ng g s services/storage --skipTests true

StorageService에 이미지 목록을 가져오는 함수와 이미지를 업로드 하는 함수를 작성하도록 하겠습니다.

// storage.service.ts
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {AngularFireStorage, AngularFireStorageReference, AngularFireUploadTask} from '@angular/fire/storage';
import firebase from 'firebase';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor(
    private storage: AngularFireStorage
  ) {
  }

  uploadImage(file: File): { ref: AngularFireStorageReference, task: AngularFireUploadTask } {
    const path = `/images/${file.name}`;
    return {
      ref: this.storage.ref(path),
      task: this.storage.upload(path, file)
    };
  }

  getImageList(): Observable<firebase.storage.ListResult> {
    return this.storage.ref('/images/').listAll();
  }
}

그리고 HomeComponent에서 이미지 업로드와 업로드된 이미지를 볼수 있는 코드를 추가하도록 하겠습니다.

// home.component.ts
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormControl, Validators} from '@angular/forms';
import {Observable} from 'rxjs';
import {AngularFireAuth} from '@angular/fire/auth';
import {DataService} from '../services/data.service';
import {StorageService} from '../services/storage.service';
import {finalize} from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {
  users: Observable<{ name: string }[]>;
  imageUrlList: Promise<any>[] = [];

  formGroup = this.formBuilder.group({
    name: this.formBuilder.control('', [
      Validators.required
    ])
  });

  get name(): FormControl {
    return this.formGroup.get('name') as FormControl;
  }

  constructor(
    public afAuth: AngularFireAuth,
    private dataService: DataService,
    private formBuilder: FormBuilder,
    private storageService: StorageService
  ) {
  }

  ngOnInit(): void {
    this.getUsers();
    this.getImageList();
  }

  getUsers(): void {
    this.users = this.dataService.getUsers();
  }

  addUser(): void {
    this.dataService.addName(this.name.value)
      .then()
      .catch(err => {
        console.error(err);
        alert(err.message);
      });
  }

  getImageList(): void {
    this.storageService.getImageList().subscribe(list => {
      this.imageUrlList = list.items.map(x => {
        return x.getDownloadURL();
      });
    });
  }

  uploadImage(files: FileList): void {
    const uploader = this.storageService.uploadImage(files[0]);

    uploader
      .task
      .snapshotChanges()
      .pipe(
        finalize(() =>
          this.imageUrlList.push(uploader.ref.getDownloadURL().toPromise())
        )
      )
      .subscribe();
  }

}

그리고 input[type="file"]과 이미지를 보여줄 list를 html에 추가해주도록 하겠습니다.

<h1>Hello, {{(afAuth.authState | async)?.displayName}}!!</h1>

<div>
  <form
    [formGroup]="formGroup"
    (ngSubmit)="addUser()"
  >
    <input
      placeholder="이름을 입력해주세요"
      formControlName="name"
    />

    <button
      type="submit"
      [disabled]="formGroup.invalid"
    >
      등록
    </button>
  </form>
</div>
<div>
  <ul>
    <li *ngFor="let user of users | async">
      {{user.name}}
    </li>
  </ul>
</div>

<div>
  <input
    type="file"
    accept="image/*"
    (change)="uploadImage($event.target.files)"
  />
</div>
<div>
  <ul>
    <li *ngFor="let image of imageUrlList">
      <img [src]="image | async" width="64" height="auto"/>
    </li>
  </ul>
</div>

파일을 업로드를 하게되면 Firebase 콘솔에서 업로드된 파일을 확인할 수 있습니다.

혹시 좀더 자세한 내용을 알고 싶으시면 Angularfire GitHub을 확인하면 더 많은 정보를 보실수 있습니다.

angular/angularfire