[Firebase] Storage 사용하기

https://firebase.google.com/docs/storage/web/start?hl=ko&authuser=0 

웹에서 Cloud Storage 시작하기  |  Firebase Storage

 

 

1. 기본 구성

아래와 같이 getStorage로 storage 서비스를 불러온다

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
  storageBucket: ''
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Cloud Storage and get a reference to the service
const storage = getStorage(app);

 

 

 

2. reference 만들기

파이어베이스 스토리지는 파일을 다룰 때 reference를 이용한다. 이 reference를 통하여 폴더와 파일 둘다 다룰 수 있게 된다.

 

• getStorage()를 이용하여 스토리지 서비스를 읽어온다.
• ref를 이용하여 스토리지 서비스으 reference를 얻어온다

import { getStorage, ref } from "firebase/storage";

// Get a reference to the storage service, which is used to create references in your storage bucket
const storage = getStorage();

// Create a storage reference from our storage service
const storageRef = ref(storage);

 

 

ref 함수에 두번째 인자를 통해 경로를 전달 할 수 있다. 즉 루트주소에서 하위폴더로의 ref를 얻을수 있게된다.

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();

// Create a child reference
const imagesRef = ref(storage, 'images');
// imagesRef now points to 'images'

// Child references can also take paths delimited by '/'
const spaceRef = ref(storage, 'images/space.jpg');
// spaceRef now points to "images/space.jpg"
// imagesRef still points to "images"

 

 

 

 

3. ref를 이용하여 스토리지 탐색하기

 

parent를 이용하면 부모의 reference로 이동하고, root를 이용하면 최상위 reference로 이동하게 된다.

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');

// Parent allows us to move to the parent of a reference
const imagesRef = spaceRef.parent;
// imagesRef now points to 'images'

// Root allows us to move all the way back to the top of our bucket
const rootRef = spaceRef.root;
// rootRef now points to the root

 

 

아래처럼 ref를 이용하여 또다른 파일의 ref를 얻을 수 있다!

아래 예제는 spaceRef의 부모 ref를 얻은 뒤 이를 이용해 image/earth.jpg를 참조하는 모습이다.

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');

// References can be chained together multiple times
const earthRef = ref(spaceRef.parent, 'earth.jpg');
// earthRef points to 'images/earth.jpg'

// nullRef is null, since the parent of root is null
const nullRef = spaceRef.root.parent;

 

 

 

4. ref의 attributes

ref는 fullpath, bucket, name의 요소들을 가진다

 

• fullpath : 파일의 절대경로이다
• bucket : 파일이 속한 폴더의 이름이다
• name : 파일의 이름이다

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();
const spaceRef = ref(storage, 'images/space.jpg');

// Reference's path is: 'images/space.jpg'
// This is analogous to a file path on disk
spaceRef.fullPath;

// Reference's name is the last segment of the full path: 'space.jpg'
// This is analogous to the file name
spaceRef.name;

// Reference's bucket is the name of the storage bucket where files are stored
spaceRef.bucket;

 

 

 

 

 

5. ref 사용시 제약하상

ref 사용시 다음과 같은 제약사항이 있다

• utf-8기준 path의 최대길이는 1024바이트 까지 이다
• 캐리지리턴, 라인피드 문자는 사용할 수 없다.(대충 줄바꿈 문자들 이라는 얘기)
• # [ ] * , 이런 문자는 사용하지 마라고 권장한다

 

 

아래는 앞서배운 예시의 모음이다

import { getStorage, ref } from "firebase/storage";

const storage = getStorage();

// Points to the root reference
const storageRef = ref(storage);

// Points to 'images'
const imagesRef = ref(storageRef, 'images');

// Points to 'images/space.jpg'
// Note that you can use variables to create child values
const fileName = 'space.jpg';
const spaceRef = ref(imagesRef, fileName);

// File path is 'images/space.jpg'
const path = spaceRef.fullPath;

// File name is 'space.jpg'
const name = spaceRef.name;

// Points to 'images'
const imagesRefAgain = spaceRef.parent;

 

 

 

 

 

6. 파일 업로드 하는 방법

업로드할 파일이름을 포함한 경로의 ref를 만든다. 이후 데이터의 종류에 따라 다른 api를 사용한다

 

 

File 또는 Blob api를 사용한 데이터 업로드 하기

파일을 File또는 Blob api로 읽어왔다면 uploadBytes() 메소드로 데이터를 업로드 할 수 있습니다.

import { getStorage, ref, uploadBytes } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'some-child');

// 'file' comes from the Blob or File API
uploadBytes(storageRef, file).then((snapshot) => {
  console.log('Uploaded a blob or file!');
});

 

 

바이트어레이 업로드 하기

uploadBytes()는 unit8Array 형태의 데이터도 업로드가 가능하다

import { getStorage, ref, uploadBytes } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'some-child');

const bytes = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x2c, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x21]);
uploadBytes(storageRef, bytes).then((snapshot) => {
  console.log('Uploaded an array!');
});

 

 

 

문자열 데이터 업로드 하기

Blob, File, unit8Array를 사용할 수 없다면, uploadString() 을 이용해서 데이터를 업로드 할 수 있습니다.

import { getStorage, ref, uploadString } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'some-child');

// Raw string is the default if no format is provided
const message = 'This is my message.';
uploadString(storageRef, message).then((snapshot) => {
  console.log('Uploaded a raw string!');
});

// Base64 formatted string
const message2 = '5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message2, 'base64').then((snapshot) => {
  console.log('Uploaded a base64 string!');
});

// Base64url formatted string
const message3 = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message3, 'base64url').then((snapshot) => {
  console.log('Uploaded a base64url string!');
});

// Data URL string
const message4 = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message4, 'data_url').then((snapshot) => {
  console.log('Uploaded a data_url string!');
});

 

메타데이터 추가하기

uploadBytes의 세번째 인자에 파일에 대한 메타데이터를 추가할 수 있다

import { getStorage, ref, uploadBytes } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'images/mountains.jpg');

// Create file metadata including the content type
/** @type {any} */
const metadata = {
  contentType: 'image/jpeg',
};

// Upload the file and metadata
const uploadTask = uploadBytes(storageRef, file, metadata);

 

 

 

 

7. 파일 삭제하기

삭제할 파일의 ref를 만든뒤 deleteObject를 호출합니다.

 

import { getStorage, ref, deleteObject } from "firebase/storage";

const storage = getStorage();

// Create a reference to the file to delete
const desertRef = ref(storage, 'images/desert.jpg');

// Delete the file
deleteObject(desertRef).then(() => {
  // File deleted successfully
}).catch((error) => {
  // Uh-oh, an error occurred!
});

 

 

 

 

 

8. 파일 업로드 중지, 재개, 취소 하기

pause, resume, cancel 함수를 이용하면 파일 업로드를 중지 재개 취소 할 수 있습니다. cancel 호출 시 error가 리턴됩니다

import { getStorage, ref, uploadBytesResumable } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'images/mountains.jpg');

// Upload the file and metadata
const uploadTask = uploadBytesResumable(storageRef, file);

// Pause the upload
uploadTask.pause();

// Resume the upload
uploadTask.resume();

// Cancel the upload
uploadTask.cancel();

 

 

 

 

 

9. 업로드 진행 모니터링 하기

 

업로드의 state는 다음과 같이 두개가 있습니다

• running : 업로드 진행중인 상태
• puased : 업로드가 중지된 상태

이벤트가 발생하면 TaskSnapshot 객체가 다시 전달됩니다. 이 스냅샷은 이벤트 발생 시점의 작업 상태로서 변경이 불가능합니다. 이 객체는 다음과 같은 속성을 포함합니다.

bytesTransferred	Number	이 스냅샷을 생성한 시점까지 전송된 총 바이트 수
totalBytes	Number	업로드가 예정된 총 바이트 수
state	firebase.storage.TaskState	업로드의 현재 상태
metadata	firebaseStorage.Metadata	업로드가 완료되기 전에는 서버에 전송된 메타데이터. 업로드가 완료된 후에는 서버에서 다시 전송한 메타데이터.
task	firebaseStorage.UploadTask	스냅샷 대상 작업으로서 작업을 일시중지, 재개 또는 취소하는 데 사용할 수 있습니다.
ref	firebaseStorage.Reference	이 작업이 유래된 참조입니다.

 

또한 업로드의 error케이스와 업로드 성공 케이스에 콜백을 달아 줄 수도 있습니다

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'images/rivers.jpg');

const uploadTask = uploadBytesResumable(storageRef, file);

// Register three observers:
// 1. 'state_changed' observer, called any time the state changes
// 2. Error observer, called on failure
// 3. Completion observer, called on successful completion
uploadTask.on('state_changed',
  (snapshot) => {
    // Observe state change events such as progress, pause, and resume
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case 'paused':
        console.log('Upload is paused');
        break;
      case 'running':
        console.log('Upload is running');
        break;
    }
  },
  (error) => {
    // Handle unsuccessful uploads
  },
  () => {
    // Handle successful uploads on complete
    // For instance, get the download URL: https://firebasestorage.googleapis.com/...
    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
      console.log('File available at', downloadURL);
    });
  }
);