🌱

【Flutter】Firebase Cloud Storage導入後、画像アップロードが実行できない

2024/11/21に公開

背景

元々、Firestore, Firebase Authを使用していたプロジェクトにFirebase Cloud Storageを導入後、画像のアップロード処理を実装した際、画像アップロードに失敗した。

該当コード

upload_image.dart
/*
* 省略
*
*/
    try {
      final uploadTask = postImageRef.putData(
        imageBitmap, // Uint8Listの画像データ
        SettableMetadata(
          contentType: 'image/jpeg', 
        ),
      );

      //調査用
      uploadTask.snapshotEvents.listen((event) {
     // ↓ upload stateがerrorになっていることは確認できたが、原因が捕捉できない
        print('Upload state: ${event.state}');
        if (event.state == TaskState.error) {
          print(event.hashCode);
        }
      });
      /*
      * 以降の処理が実行されない
      */

      // imageUrlを取得
      final imageUrl = await (await uploadTask).ref.getDownloadURL();
      print('download用URL: $imageUrl');

      return Result.success(imageUrl);
    } on FirebaseException catch (e) {
      print('error発生 : ${e.code}');
      return Result.failure(e.toString());
    }
  }

試したこと・確認したこと

  1. Cloud Storageの権限確認 → 読み込み、書き込みアクセス許可を確認済み
  2. 公式ドキュメント通り、putFile, putDataメソッドで書き込み処理を実行するも、アップロードされない。しかも、例外がキャッチされない。
    →upload処理の状態を捕捉したところ、エラーになっていることは確認できたが、例外として処理されておらず、原因が掴みきれない。
  3. コンソールから使用状況を確認したところ、書き込み数が増えていないため、リクエスト自体が届いていないことがわかった。(権限、もしくは設定の問題)

解決策

リクエスト自体が届いていないことから、おそらく設定漏れと仮定し、Firebase導入時の初期設定を再度行うことにした。

FlutterFire CLI からFirebaseとの接続を最新化

以下のコマンドを実行

flutterfire configure

firebase.jsonの上書きを行う。

参考)各項目は以下の記事を参考にさせていただきました。
https://qiita.com/Umigishi-Aoi/items/32a46255bb935417ab3d

Firebase再接続後

firebase_options.dartのstorageBucketがfirebasestorage.appで更新されていることが確認できた。

これで動くはず、、、

結果

firebase再接続後、flutter runで再度ビルド実行。
画像がアップロードされていることが確認できた!

気づき

Firebaseを初期導入後、サービスを追加した場合や設定を変更した場合には "flutterfire configure" を実行して、firebaseの接続情報を最新化することを忘れない様にしたいと感じました。
firebaseに関わらず、初期設定から変更した場合は影響範囲を考えながらエラーの可能性を探っていきたいですね。

Discussion