😽

【Flutter WEB】image_pickerで取得した画像をFirebase Storageへ保存

2023/01/31に公開

初めに

よくあるimage_pickerで取得した画像をFirebase Storageへ保存する。
をFlutterWebでやろうとした際に色々詰まったので記述します。

今回は、現状モバイルアプリとしてリリースはしないので、モバイルとWEBの条件分岐は書きません。この辺り参考になりそうでした

前提知識

FlutterWebでは'dart:io';が使えない。
その為、モバイルと同じように実装するとエラーがでます。
(常識かもしれませんが自分は全く知りませんでした。)

FlutterWebで'dart:io';を利用すると下記エラーが出る
Unsupported operation: Platform._operatingSystem

実装方法

  • お馴染みのimage_picker.dartではなく、下記のパッケージを利用します。
    https://pub.dev/packages/image_picker_web
    (ググってるとimage_picker.dartでもできそうな気もしましたが、今回は試してないです。)

imagePickerで画像を取得

モバイルではXFile型で取得すると思いますが、uint8list型で取得します。

Uint8List? uint8list = await ImagePickerWeb.getImageAsBytes();

FirebaseStorageに保存

  • putFileではなく、putDataを利用する。
    →Blobに変換したり、Fileに変換したりしてみたが、putDataを利用すればUint8Listのままでいけた。
    →File型に変換してputFileを使おうとしたが、同じFile型でも、'dart:io''dart:html'のFile型は異なるらしくエラーが出る。
  • metadataを作成する
    →このmetadataがないと、画像データではなく、普通のデータとして保存されてしまう。
//メタデータ定義
var metadata = SettableMetadata(contentType: "image/jpeg",);
//メタデータと共にStorageに保存
FirebaseStorage.instance.ref("sample").putData(uint8list, metadata);

コード全体

  void uploadPicture() async {
    try {
      Uint8List? uint8list = await ImagePickerWeb.getImageAsBytes();
      if (uint8list != null) {
        var metadata = SettableMetadata(
          contentType: "image/jpeg",
        );
        FirebaseStorage.instance.ref("sample").putData(uint8list, metadata);
      }
    } catch (e) {
      print(e);
    }
  }

終わりに

もっといい方法があったら是非教えてください🙇
Twitterでも情報発信しておりますので、ぜひフォローお願い致します!
https://mobile.twitter.com/tatsuki_kt

参考

https://stackoverflow.com/questions/74739386/how-to-upload-an-image-file-to-firebase-storage-and-show-it-in-the-flutter-web-a
https://zenn.dev/hasumi/articles/e0411259da72d9
パッケージ利用しない場合
https://www.youtube.com/watch?v=ZlqXDbn6jg0

Discussion

ログインするとコメントできます