🔧

ReactNative から Supabase Storage へのファイルアップロードには ArrayBuffer を使う

に公開

ReactNative から Supabase Storage にファイルアップロードができなかった。
バケットは存在するし、RLSも問題なく設定できているはず。というのも、localhostからは問題なくファイルアップロードができる。
なぜかExpoGoを含む実機でファイルアップロードができなかった。

検索したら以下のStackOverflowがヒット。
https://stackoverflow.com/questions/78533514/how-to-upload-an-image-to-supabase-storage-in-a-react-native-app-using-supabase

ReactNative から Supabase Storage へのアップロードには、ArrayBuffer形式でないとダメらしい。自分のコードではBlob形式でアップロードするような実装になっていた。

公式ドキュメントを確認してみる。たしかに、そのように書いてある。
https://supabase.com/docs/reference/javascript/storage-from-upload

以下のような汎用関数を作成し、ArrayBuffer化するようにしたところ、問題なくSupabaseにファイルアップロードができた。

const base64ToArrayBuffer = (base64: string): ArrayBuffer => {
  const binaryString = atob(base64);
  const len = binaryString.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
};

Discussion