Uploading data to Storage | Remix Supabase SaaS Kit

Learn how to upload your data to Supabase Storage in your Remix application

To upload data to Supabase Storage, we can use the Supabase JavaScript client.

Uploading a file

To upload a file, we can use the upload method.

For example, the code below is the code that uploads a user's profile image to the avatars bucket:

async function uploadUserProfilePhoto(
  client: SupabaseClient,
  photoFile: File,
  userId: string
) {
  const bytes = await photoFile.arrayBuffer();
  const bucket = client.storage.from('avatars');
  const extension = photoFile.name.split('.').pop();
  const fileName = `${userId}.${extension}`;
  const result = await bucket.upload(fileName, bytes, {
    upsert: true,
  });
  if (!result.error) {
    return bucket.getPublicUrl(fileName).data.publicUrl;
  }
  throw result.error;
}

You can also combine the above with useMutation from react-query when you use the code above from a React component:

export function useUploadUserProfilePhotoMutation() {
  const client = useSupabase();
  return useMutation(async (file: File, userId: string) => {
    return uploadUserProfilePhoto(client, file, userId);
  });
}

And then, you can use it like this:

tsx

const updateProfilePhoto = useUploadUserProfilePhotoMutation();
<Form onUpload={(file: File, userId: string) => {
  return updateProfilePhoto.mutateAsync(file, userId)
} />