Upload Images to Supabase Storage from Next.js

Introduction

Uploading images to a storage solution is a common task in web development, and if you're using Next.js, Supabase Storage is a great option. In this post, I'll walk you through how to set up image uploads using Supabase Storage in a Next.js application. Whether you're a founder or a developer experimenting with software and AI tools, this guide will provide you with practical steps to implement image uploads effectively.

Why Choose Supabase?

Supabase is an open-source Firebase alternative that provides a backend as a service. It offers a variety of features, including:

• Real-time databases
• Authentication
• Storage
• Serverless functions

Supabase Storage allows you to easily manage and serve files, like images, while handling scalability and performance. This makes it a suitable choice for many developers.

Setting Up Supabase

Before we dive into the code, you need to set up a Supabase project:

1. Create a Supabase account at Supabase.io.
2. Create a new project and note down your project URL and API keys.
3. Set up a storage bucket in the Supabase dashboard. You can create a bucket named images for this example.

Installing Required Packages

In your Next.js project, you need to install the Supabase client library. Open your terminal and run:

npm install @supabase/supabase-js

Configuring Supabase Client

Next, you’ll want to configure the Supabase client in your Next.js application. Create a new file called supabaseClient.js inside your lib directory:

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Make sure to set your Supabase URL and Anon Key in your .env.local file:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Creating an Upload Component

Now, let’s create a component to handle the image upload. Here’s a simple component that allows users to select an image and upload it:

import { useState } from 'react';
import { supabase } from '../lib/supabaseClient';

const ImageUpload = () => {
  const [file, setFile] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  const uploadImage = async (event) => {
    event.preventDefault();
    setLoading(true);
    const { data, error } = await supabase.storage.from('images').upload(`public/${file.name}`, file);
    setLoading(false);

    if (error) {
      console.error('Error uploading image:', error);
    } else {
      console.log('Image uploaded successfully:', data);
    }
  };

  return (
    <form onSubmit={uploadImage}>
      <input type="file" onChange={handleFileChange} accept="image/*" />
      <button type="submit" disabled={loading}>Upload Image</button>
    </form>
  );
};

export default ImageUpload;

In this component:

• We manage the selected file using the useState hook.
• The handleFileChange function updates the state with the selected file.
• The uploadImage function handles the upload process using Supabase Storage API.

Displaying Uploaded Images

After uploading, you might want to display the uploaded images. Here’s how you can do that:

1. Fetch images from the Supabase bucket.
2. Display them using an image component.

You can create a new component called ImageGallery.js:

import { useEffect, useState } from 'react';
import { supabase } from '../lib/supabaseClient';

const ImageGallery = () => {
  const [images, setImages] = useState([]);

  const fetchImages = async () => {
    const { data, error } = await supabase.storage.from('images').list('public');
    if (error) {
      console.error('Error fetching images:', error);
    } else {
      setImages(data);
    }
  };

  useEffect(() => {
    fetchImages();
  }, []);

  return (
    <div>
      {images.map((image) => (
        <img key={image.name} src={`https://your_supabase_url/storage/v1/object/public/images/${image.name}`} alt={image.name} />
      ))}
    </div>
  );
};

export default ImageGallery;

This component fetches the list of images from the Supabase bucket and displays them in an image gallery.

Checklist for Image Upload Feature

• [ ] Set up a Supabase project.
• [ ] Install Supabase client in your Next.js project.
• [ ] Configure the Supabase client.
• [ ] Create an image upload component.
• [ ] Implement image fetching and display.

Conclusion

In this post, we've covered how to upload images to Supabase Storage from a Next.js application. This powerful combination allows you to build scalable and efficient applications that can handle media uploads seamlessly. If you're building a project that requires image uploads, Supabase is an excellent choice.

For more insights and tips on software and AI tools, check out our blog or visit our FAQ page for common questions. Happy coding!