How to Upload Image Using Supabase Storage

I was recently working on a project that has image upload as one of the core feature. Luckily I was using Supabase as a database. which provide an easy way to upload file using Supabase storage.

Set up in Supabase

To start, you must init your supabase project, then go into storage and create a new buckets.

Upload Image Function

After create a bucket, for simplicity you can set the image to public, then we can start upload the image by creating the function

Typescript

index

export async function uploadImage(image: File) {
  const supabase = createClient();
  const { data, error } = await supabase.storage
    .from(`BUCKET_NAME`)
    .upload(`PATH`, image, {
      cacheControl: "3600",
      upsert: true, //Upsert to overwrite duplicate image
    });

  if (error) {
    return {
      error: error,
    };
  }

  const {
    data: { publicUrl },
  } = supabase.storage.from(`BUCKET_NAME`).getPublicUrl(data.path);

  return {
    publicUrl,
    error,
  };
}

So the function will upload the image into the specify PATH and BUCKET_NAME. Sadly, supabase does not have a function that automatically return image URL after uploaded the image so we must write a function to retrieve the image URL.

After that you should be able to call the function in your application

Typescript

index

const { publicUrl, error } = await uploadImage(image);

Optional: Compressed Image

Each image may take up alot of space, and consider that Supabase only give you 2GB of storage, plus to avoid Large Content Paint, it is ideal that you should compress the image before upload it to Supabase.

First, you can run yarn add browser-image-compression , then you can create a compress image function.

Typescript

index

import imageCompression from "browser-image-compression";
export async function compressImage(image: File, options: Options) {
  return await imageCompression(image, options);
}

After that, you can add this function above the uploadImage function.

Typescript

index

const compressedImage = await compressImage(image, { maxSizeMB: 1 });
const { publicUrl, error } = await uploadImage(compressedImage);

Command

How to Upload Image Using Supabase Storage

Set up in Supabase

Upload Image Function

Optional: Compressed Image