ライブラリから画像を選択してFirebaseStorageにアップロードする方法

この記事では画像ライブラリから画像を選択して、Firebase Storageにアップロードする方法を書いていきます。さらにはアップロード後にFirestoreへ画像URLを保存する方法も書いていきます。

1.準備

まずはStoryboardの設定からやっていきます。

UIパーツの役割はそれぞれ以下のようになっています。

  1. 選択した画像を表示するUIImageView
  2. 画像ライブラリを呼び出す青いボタン
  3. アップロードを開始する赤いボタン

2. 画像ライブラリから任意の画像を選択

まずは画像ライブラリから選択した画像をUIImageViewに表示させる部分からやっていきます。

 

ViewControllerに下記を追加します。

選択した画像は allowsEditingオプションによって正方形に切り抜くことが出来ます。アスペクト比は変更出来ないので、16:9などに切り抜きたい場合は外部ライブラリなどを利用すると良いと思います。

 

画像選択後に呼び出させる didFinishPickingMediaWithInfoから編集後の画像を取得するには info[UIImagePickerController.InfoKey.editedImage] を指定する必要があります。編集前の画像は info[UIImagePickerController.InfoKey.originalImage]から取得することが出来ます。

3. 選択した画像をFirebase Storageへアップロード

次に選択した画像をFirebase Storageへアップロードする方法を書いていきます。FirebaseStorageの初期設定などは公式ページ に詳しく書いてあります。

ViewControllerに以下を加えます。

 

この時点でViewControllerは下記のようになっています。

 

 

おまけその①:選択した画像を自由に切り抜きできるようにする

UIImagePickerControllerでは自由に切り抜きが出来ないので、前述した通りに外部ライブラリを使います。

下記のライブラリを使います:

TOCropViewController

まずはStoryboardに選択した画像を切り抜くためのボタンを追加します。

 

画像の切り抜きを外部ライブラリで行うので、UIImagePickerControllerのallowsEditingをfalseに変更し、選択後の画像もinfo[UIImagePickerController.InfoKey.originalImage]から取得します。

 

そして、ViewControllerに以下を追加します。

 

最終的にViewControllerは下記のようになっています。

 

おまけその②:画像アップロード後にFirestoreに画像URLを保存する

画像アップロード後に返ってきた保存先URLをFirestoreへ保存する方法を書いていきます。

 

まずはアップロードが完了したタイミングがわからないといけないので、upload functionにcompletion handlerを付け加えます。upload functionを以下のように変更します。

 

次に、返ってきたURLをFirestoreへ保存します。ViewControllerに以下のfunctionを加えます。

 

そして最後に、アップロードボタンから呼び出すfunctionをsaveToFirestore functionに変更します。

 

最終的にViewControllerは以下のようになっています。

 

参考URL