Flutter WebでファイルをFirebase Storageにアップロードする方法のメモ

概要

Flutter WebでファイルをFirebase Storageにアップロードしようとした際に試したことをメモします。もっと良い方法がありましたら教えていただけると幸いです。

使用技術・環境

• Flutter 3.22.2
• Firebase Storage
• M1 MacBook Air Sonoma 14.6.1

試した方法

putFileを使用

FirebaseStorageのputFileを使う方法です。

FirebaseStorage storage = FirebaseStorage.instance;
FirebaseFirestore firestore = FirebaseFirestore.instance;

final file = File(uploadFile.files.first.path!);
final uploadTask = await storage
    .ref('uploaded_file/${uploadFile.files[0].name}')
    .putFile(file);

uploadFile変数には、FilepickerのpickFilesで選択した情報が入っています。AndroidやIphoneでは動作しましたが、Flutter Webでは動作しませんでした。また、アップロードに二十秒ほどの時間がかかりました。

putDataを使用

putFileの代わりに、putDataを使用しました。Filepickerで選択したファイルのバイトデータを取得し、これを送る方法です。

FirebaseStorage storage = FirebaseStorage.instance;
FirebaseFirestore firestore = FirebaseFirestore.instance;

final uploadedFile = uploadFile.files[0].bytes;
final uploadTask = await storage
    .ref('uploaded_file/${uploadFile.files[0].name}')
    .putData(uploadFile.files[0].bytes!);

FilepickerのGitHubを確認しますと、PlatFormFileというクラスが存在しました。FilePikcerのpickFileで取得したファイルは、PlatFormFileというクラスで管理されているようです。コードを読んでいきますと、Uint8List型のbytesというメンバ変数を見つけました。

...
  /// Byte data for this file. Particularly useful if you want to manipulate its data
  /// or easily upload to somewhere else.
  /// [Check here in the FAQ](https://github.com/miguelpruivo/flutter_file_picker/wiki/FAQ) an example on how to use it to upload on web.
  final Uint8List? bytes;
...

Firebase Storageには、Uint8List型のデータを送信できるメソッドがありますので、ファイルのバイト列を送る方法を試してみました。

結果

putDataを使う方法で、無事ファイルを送信することができました。また、送信にかかる時間も短縮されました。

まとめ

Flutter WebでFirebase Storageにファイルをアップロードする際、FilePickerで選択したファイルのバイト列をputDataで送信することで、ファイルをアップロードすることができました。

参考