Googleが開発しているFlutterベースのローコードツールFlutterFlowでFirestore Data Managerから画像（データタイプ：Image Path）をアップロードするときにエラーでつまづいたところを解決できたのでまとめておきます。
Firestore Data Managerへの行き方
FlutterFlowのプロジェクト（アプリ開発画面）から「Manage Content」ボタンを押します。
別タブでFirestore Data Managerの画面が開きます。
デフォルト設定ではアップロード時にエラーになる
Firestore Data Manager上でデータを追加したいCollectionを選択し、「Add Document」ボタンを押すとDocument追加画面に遷移します。
データタイプがImage Pathのカラム（下画像でいうとimage）に画像ファイルをアップロードして「Update Document」ボタンを押してもボタンの文字が少しリロード状態になって何も起こりません。（Firebase側で何か事前に設定をしていない場合はこの挙動になるかと思います）
Chromeのデベロッパーのコンソールを見ると以下のようなエラー出力になります。（正確にはオブジェクト形式でしたが全文コピーを忘れていました…）
Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)
Permission denied. Please enable Firebase Storage for your bucket by visiting the Storage tab in the Firebase Console and ensure that you have sufficient permission to properly provision resources.エラーレスポンスのステータスコードは403です。
FirebaseのStorageの設定を変える
公式ドキュメントにFirebase storageの関する情報があり、そこではFlutterFlowの画面上の設定項目から色々するように書かれているのですが、自分の画面にはそれが表示されていなかった（これがバグなのかは不明）ので、Firebaseのコンソールから直接触ります。
Firebase consoleのサイドメニューから「Storage」を選択します。
「Rules」タブを選択します。
デフォルトではallow read, write: if false;となっているので、allow read, write: if true;に変更します。
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}変更が完了したら、反映に数分かかるので少し時間をおいてから再度Firestore Data Managerから先ほど書いた手順で画像ファイルをアップロードすると問題なくアップロードできます。Firebase consoleでも確認してみると、「Files」タブにアップロードできていることが確認できます。
最後に
FlutterFlowはFlutterベースのローコードだけあって（バックエンドがFirebaseというのも大きい）、エラーが出たときに以下に自分でググって解決できるかが結構重要な気がします。この点、エンジニアとして2年以上仕事をしているのでエラーが起こった時のお作法が染み付いているのはデカいなと思いました。
（人によるとは思いますが、プログラミング経験がなく完全にノーコードだけという方は今回の内容に限らず少しハードルが高いかも？と思いました）
コメント