[SwiftUI] Photospicker을 이용해 Firebase Storage에 이미지 넣어보기

SeongMin·2022년 12월 29일

SwiftUI

목록 보기

1/1

현재 UIkit의 imagepicker을 사용하여 Storage에 이미지를 넣는 레퍼런스들은 많이 있지만 SwiftUI의 PhotosPicker을 사용하는 레퍼런스들은 많이 없다고 생각하여 기록과 공유하기 위하여 글을 작성해봅니다.

1. PhotosPicker

import SwiftUI
import PhotosUI
import FirebaseStorage

struct ContentView: View {
    
    @State private var selectedItem: PhotosPickerItem? = nil
    @State private var selectedImageData: Data? = nil
    @State private var retrieveImage: UIImage? = nil
    
    var body: some View {
        PhotosPicker(
            selection: $selectedItem,
            matching: .images,
            photoLibrary: .shared()) {
                if selectedImageData == nil {
                    Text("Select a photo")
                } else {
                    let uiImage = UIImage(data: selectedImageData!)
                    Image(uiImage: uiImage!)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 250, height: 250)
                }
            }
            .onChange(of: selectedItem) { newItem in
                Task {
                    // Retrieve selected asset in the form of Data
                    if let data = try? await newItem?.loadTransferable(type: Data.self) {
                        selectedImageData = data
                    }
                }
            }
    }
}

PhotosPicker을 사용하려면 PhotosUI를 import 해야한다. 앨범에서 선택한 이미지가 selectedImageData에 Data 타입으로 저장이된다.

2. 선택한 이미지를 Storage에 저장해보자.


    func uploadImage(image: Data?, imageName : String) {
        let storageRef = Storage.storage().reference().child("images/\(imageName)") 
        let data = image
        let metadata = StorageMetadata()
        metadata.contentType = "image/jpg"

        if let data = data{
            storageRef.putData(data, metadata: metadata) {(metadata, error) in
                if let error = error {
                    print("Error: \(error)")
                }
                if let metadata = metadata {
                    print("metadata: \(metadata)")
                }
            }
        }
    }

선택한 Data타입의 이미지를 uploadImage함수 매개변수에 이미지 이름과 같이 넣어서 Storage에 이미지를 저장한다.

3. Storage에서 이미지를 불러와보자.


    func retrievePhotos(_ imageName: String) {

         let storageRef = Storage.storage().reference()
         let fileRef = storageRef.child("images/\(imageName)")
                
         fileRef.getData(maxSize: 5 * 1024 * 1024) { data, error in
                    
              if error == nil && data != nil {
                  let uiImage = UIImage(data: data!)!
                        
                  self.retrieveImage = uiImage
                        
              }
          }
    }

Storage에 저장한 사진을 간단하게 이미지 이름으로 불러와보자.
maxSize의 첫번째 값 5는 불러올수 있는 사진의 용량의 최대치이다. 5Mb까지 불러올수 있도록 설정하였다.

받아온 데이터타입의 이미지를 UIImage타입으로 변환하여 retrieveImage로 넣는다.
앱 내에서 이런식으로 불러온 이미지를 보여줄수 있다

Image(uiImage: retrieveImage)

4. 마무리글

ImagePicker보다 쉽고 편리하게 사용할수 있는 PhotosPicker을 이용해서 간단하게 Storage에 사진데이터를 넣고 가져오는 방법을 알아보았습니다.
많은분들에게 제 글이 도움되었으면 좋겠습니다.

SeongMin