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:
const updateProfilePhoto = useUploadUserProfilePhotoMutation();
<Form onUpload={(file: File, userId: string) => {
return updateProfilePhoto.mutateAsync(file, userId)
} />