• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
  • Global Configuration
    • Environment Variables
  • Server Actions
    • Sending CSRF Token to Actions
    • Server Actions Error Handling
    • Writing data to Database
    • Fetching data from Supabase
    • Mutating data using Server Actions
    • API Routes
    • Uploading data to Storage
  • Architecture and Folder Structure
    • Structure your Application
    • Data Model
This documentation is for a legacy version of Next.js and Supabase (Lite). For the latest version, please visit the Next.js and Supabase V2 documentation

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:

ts
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:

ts
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:

tsx
const updateProfile = useUpdateProfile();
<Form onUpload={(file: File, userId: string) => {
return updateProfile.trigger({ file, userId })
} />
On this page
  1. Uploading a file