Photo uploads from my React Native app to Supabase Storage are 0 bytes

Solved · 641 views · asked last month by adebayo_t · edited

Upload succeeds (no error), file appears in the bucket, but it's 0 bytes and shows as broken. Same code on web uploads fine.

const res = await fetch(image.uri);
const blob = await res.blob();
await supabase.storage.from("photos").upload(path, blob, { contentType: "image/jpeg" });

What I’ve tried

Tried with File instead of Blob, tried FormData. Bolt says the code is correct.

Comment

Expo or bare RN? The fix differs slightly. ben_mobile last month · edited

Expo, SDK 52 adebayo_t last month · edited

2 answers

Marked as helpful by the asker

ben_mobilelast month · edited

Hannah is right about the cause. Concretely, with Expo:

import * as FileSystem from "expo-file-system";
import { decode } from "base64-arraybuffer";

const base64 = await FileSystem.readAsStringAsync(image.uri, { encoding: "base64" });
await supabase.storage
  .from("photos")
  .upload(path, decode(base64), { contentType: "image/jpeg" });

(Newer expo-file-system versions also let you read a File as bytes directly, which skips the base64 step.) Resize before upload with expo-image-manipulator, phone photos are 3–5MB and you don't want those in a list view.

Comment

ArrayBuffer version works. Resizing to 1200px too, uploads are way faster now adebayo_t last month · edited

hannah_reyeslast month · edited

Blob from fetch(uri) in React Native is not a real binary Blob the way supabase-js expects, so it ends up sending nothing. Send an ArrayBuffer instead.

Comment

thanks, ben's example below did it adebayo_t last month · edited

Keyboard shortcuts

Photo uploads from my React Native app to Supabase Storage are 0 bytes

What I’ve tried

2 answers

Your answer

Photo uploads from my React Native app to Supabase Storage are 0 bytes

What I’ve tried

2 answers

Related

Your answer