Uploading data to Storage

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 useSWRMutation from SWR when you use the code above from a React component:

import useSWRMutation from 'swr/mutation'; function useUpdateProfile() { const client = useSupabase(); const key = 'useUpdateProfile'; return useSWRMutation(key, async (_, { arg: data }: { arg: { file: File; userId: string; } }) => { return updateUserData(client, data); }); }

And then, you can use it like this:

const updateProfile = useUpdateProfile(); <Form onUpload={(file: File, userId: string) => { return updateProfile.trigger({ file, userId }) } />

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS