😽

【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

参考

パッケージ利用しない場合