前のページはこちら
前回でポリシーの設定が出来たので画像をアップロード出来ます。早速アップロードするコードを書きましょう。
Contents
コード修正
supabase_repository.dartへのメソッド追加
ユーザー登録の処理を書きます。supabase_repository.dartに、下記のUpLoadStorageメソッドを追加してください。
static Future<bool> UpLoadStorage({File? imageFile}) async {
try {
var supabase = Supabase.instance.client;
final bytes = await imageFile!.readAsBytes();
final fileExt = imageFile.path.split('.').last;
final fileName = '${DateTime.now().toIso8601String()}.$fileExt';
final response = await supabase.storage
.from('users-image/' + supabase.auth.currentUser!.id)
.uploadBinary(fileName, bytes);
if (response.error != null) {
print("エラーです" + response.error!.message);
throw new Exception(response.error);
}
print("画像パスは" + response.data.toString());
return true;
} catch (e) {
print(e.toString());
return false;
}
}auth_page_view.dartに呼び出しを書く
image_pickerで画像が取得できた所に、先ほどの関数を呼ぶ処理を追加します。画像ゲットのボタン内でSetStateをしている_image = File(pickedFile.path);の次の行です。（本当はSetStateの外に書く）
ElevatedButton(
onPressed: () async {
final pickedFile =
await picker.pickImage(source: ImageSource.gallery);
setState(() {
if (pickedFile != null) {
_image = File(pickedFile.path);
//-------ここに↓を追加------------
SupabaseRepository.UpLoadStorage(imageFile: _image);
}
});
},
child: Text('画像ゲット'),
),解説
UpLoadStorageメソッドの解説をしていきます。
supabaseアクセスオブジェクトの生成
ここでも最初にsupabaseのStogage関連の処理のためSupabase.instance.clientのオブジェクト「supabase」を生成しています。
画像ファイルをUint8List型にコンバート
また、渡されたfile型のファイルを、下記のコードでUint8List型のバイナリデータにコンバートしています。supabaseのストレージはこのデータを受け取れます。時間が掛かる処理なのでawaitで待ち、変数bytesに入れています。
final bytes = await imageFile!.readAsBytes();ユーザー登録はsignUpメソッドを使用、引数にはメールアドレスとパスワードを指定します。（前回の下準備で渡すようにしています）
ファイル名を作成
その後にはファイル名を生成するためのコードが2行並んでいます。
final fileExt = imageFile.path.split('.').last;こちらは受け取ったFileデータのpathの文字列の、『最後から「.」までを取得』これは拡張子を取得するものです。例えば「xxxxx/xxxxx/xx/xxx/35103103.jpg」というファイルパス名だったら「.jpg」がfileExtに入ります。
final fileName = '${DateTime.now().toIso8601String()}.$fileExt';その後、現在のタイムスタンプと先ほどの拡張子を結合して最終的なファイル名としています。
Storgeにアップ
アクセス用オブジェクトのsupabaseを利用します。
final response = await supabase.storage
.from('users-image/' + supabase.auth.currentUser!.id)
.uploadBinary(fileName, bytes);supabase.storage.from（アップする場所）.uploadBinary（ファイル名、バイナリデータ）でストレージへのファイルアップが出来ます。
バイナリデータのbytesは先ほどの「画像ファイルをUint8List型にコンバート」で、filenameは「ファイル名を作成」で作りました。
ポリシーとアップ場所の指定
さて、上のコードの2行目がアップする場所を指定しています
.from('users-image/' + supabase.auth.currentUser!.id)これは「users-image/現在ログイン中アカウントのUUID名」という指定になります。これは前回のポリシーでそう設定したからです。
実行
早速実行します。ログインをした後に、画像を選択するとstorageにもログイン中のUUID名のフォルダが作られ、そこにファイルがアップされている事が確認出来ます。
また、ファイルアップが成功した後に呼ばれるのprint文で、アップされたファイルパス名が取得できている事が確認出来ます。
print("画像パスは" + response.data.toString());