はじめに

モバイルコースのyoです。
FlutterでFirebase Storageに画像ファイルをアップロードしようとしたのですが、アップロードしたファイルをFirebase Storageが画像ファイルとして認識してくれませんでした。
通常、画像をFirebase Storageにアップロードすると、左側のように画像マークのアイコンがが表示されるのに加え、種類が「image/png」のようにファイルの種類が表示されます。
しかし、今回はアイコンも画像ではなく、種類も表示されませんでした。
画像アドレスも利用できないので、画像アドレスからFlutterで画像を表示することもできません。
これは困りました。

ファイルの種類を認識している状態	ファイルの種類を認識していない状態

修正前のソースコード（一部抜粋）

こちらが修正前のソースコードになります。

class FirebaseStorageRepository {
  static Future<void> put(File file, String storagePath) async {
    final storageRef = FirebaseStorage.instance.ref().child(storagePath);
    try {
      await storageRef.putFile(file);
    } catch (e) {
      throw Exception('Firebase Storageへのファイルのアップロードに失敗しました: $e');
    }
  }
}

FirebaseStorageRepositoryクラス内に画像をFirebase Storageにアップロードするためのputメソッドを定義しています。
await FirebaseStorageRepository.put(image, 'posts/post-id/hoge.png');のように呼び出して利用します。

原因

調べてみたところ、アップロードする画像ファイルのメタデータを設定していないことが原因みたいでした。
メタデータとは、ファイルの種類や作成日時といった「ファイルに含まれるファイル情報のこと」みたいです。
今回、アップロードしたファイルが画像ファイルとして認識されなかったのは、ファイルのメタデータにあるファイルの種類を画像ファイルに指定していなかったからです。

修正後のソースコード（一部抜粋）

それでは、先ほどのソースコードにファイルの種類を画像ファイルに指定した後、アップロードを行うように修正してみます。

class FirebaseStorageRepository {
  static Future<void> put(File file, String storagePath) async {
    final storageRef = FirebaseStorage.instance.ref().child(storagePath);
    // metadataのcontentTypeを画像（image/png）に指定する。
    final metadata = SettableMetadata(contentType: 'image/png');
    try {
      await storageRef.putFile(file);
      // アップロードされたファイルのメタデータを更新する。
      await storageRef.updateMetadata(metadata);
    } catch (e) {
      throw Exception('Firebase Storageへのファイルのアップロードに失敗しました: $e');
    }
  }
}

これで、Firebase Storageにアップロードしたファイルが画像ファイルとして認識されました！

参考

• Flutter で Cloud Storage を使用してファイルをアップロードする