플러터(Flutter) - Firebase Cloud Storage에 파일 올리기

Firebase에 이미지나 동영상 파일을 올리려면 어떻게 해야할까요? Firebase에서는 파일 저장용으로 Storage라는 서비스를 제공합니다. 이 서비스를 이용하기 위해서는 먼저 Firebase 콘솔에서 생성한 프로젝트에 Storage 버킷을 생성합니다. 그 다음 플러터 프로젝트에서 firebase_storage 플러그인을 추가해주고 이 플러그인에서 제공하는 FirebaseStorage 인스턴스를 만듭니다. 이 인스턴스를 통해 Storage 버킷에 올라갈 파일의 경로를 정하고, putFile() 메서드를 통해 파일을 Storage 버킷에 올리면 됩니다.

Firebase 콘솔에서 Cloud Storage 버킷 만들기

Firebase Storage 버킷을 만드는 방법은 상당히 간단합니다. 먼저 Firebase 콘솔에서 Storage에 대해 ‘시작하기’ 버튼 눌러주면 됩니다.

보안 규칙 설정은 테스트 모드에서 시작으로 설정합니다.

Cloud Storage에서 서울의 위치는 asia-northeast3입니다.

생성 후에는 Files 탭에서 생성된 Storage 버킷과 버킷 주소를 확인할 수 있습니다. Firebase의 Cloud Storage는 최대 5GB까지 무료로 저장할 수 있고, 하루 최대 1GB까지 무료로 사용할 수 있습니다.

Cloud Storage 플러그인 추가하기

플러터 프로젝트에서 pubspec.yaml에 최신 버전의 Firebase Storage 플러그인을 추가해주고 IDE 상단에 뜨는 ‘Pub get’으로 라이브러리를 현재 플러터 프로젝트로 당겨옵니다.

dependencies:
  firebase_storage: ^10.3.11

플러터 프로젝트에서 코드 작성하기

Image Picker를 통해 앨범에서 선택한 이미지를 Firebase Storage에 올리는 코드를 작성해보겠습니다. 앨범에서 선택한 이미지는 _image에 저장되어 있다고 가정합니다. (앨범에서 이미지를 선택하는 과정은 이전 글을 참조해주세요.

2022.10.15 - [Flutter] - 플러터(Flutter) - 앨범 사진 가져오기 (Image Picker))

Storage 버킷에 접근할 때는 FirebaseStorage 인스턴스를 가리키는 레퍼런스를 통해 가리키게 됩니다. 이 경우 FirebaseStorage 참조는 버킷의 최상위 루트를 가리키고 있습니다. 여기에 트리 구조로 업로드할 폴더와 파일들을 추가하면 됩니다. 아래 예시에서는 post라는 폴더를 루트 밑에 child로 만들고, post 폴더에 올릴 파일 역시 post 폴더의 child로 이름을 지정해줍니다. 파일 이름은 현재 시각을 Timestamp로 설정했습니다. 마지막으로 이미지 레퍼런스의 putFile 메서드에 이미지 파일 객체를 파라미터로 넘겨주고 호출하면, Firebase Storage에 해당 이미지가 업로드 됩니다.

Firebase 콘솔에서 업로드 된 이미지 확인하기

이제 Firebase 콘솔에서 Storage를 확인하면 샘플 코드를 통해 이미지가 올라간 걸 확인할 수 있습니다. 👏👏👏

 

더 읽어보기 👉

https://firebase.google.com/docs/storage/flutter/upload-files