Introduction

An image uploader is an essential component in many web applications, enabling users to upload and manage images seamlessly. This article explores how to build a React-based image uploader that supports both file uploads and external image URLs while storing images in a cloud storage service, such as Supabase Storage.

Features of the Image Uploader

• Upload multiple image files
• Validate image type and size before upload
• Store uploaded images in a cloud database
• Retrieve and display public image URLs
• Allow users to manually add external image URLs
• Enable users to add captions to uploaded images
• Provide functionality to remove uploaded images

Setting Up the Project

To get started, ensure you have a React project with the necessary dependencies installed:

shCopy
npx create-next-app@latest image-uploader
cd image-uploader
npm install @supabase/supabase-js uuid

Connecting to the Database

Supabase provides an easy-to-use API for cloud storage. First, create a Supabase client:

tsCopy
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = "https://your-supabase-url.supabase.co";
const supabaseKey = "your-supabase-anon-key";
const supabase = createClient(supabaseUrl, supabaseKey);

Implementing the Image Uploader Component

The ImageUploader component handles both file-based and URL-based image uploads.

State Management

We use React’s useState to manage:

• uploading: Track if an upload is in progress.
• error: Store and display error messages.
• photos: Maintain the list of uploaded images.
• imageUrl: Store user-entered image URLs.

tsCopy
const [uploading, setUploading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [photos, setPhotos] = useState([]);
const [imageUrl, setImageUrl] = useState<string>("");

Handling File Uploads

Files are uploaded to Supabase Storage, and public URLs are retrieved for display.

tsCopy
const handleImageUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
  setError(null);
  const files = event.target.files;
  if (!files || files.length === 0) {
    setError("Please select at least one file.");
    return;
  }

  const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
  const maxSize = 5 * 1024 * 1024; // 5MB
  const validFiles = Array.from(files).filter(file => allowedTypes.includes(file.type) && file.size <= maxSize);
  if (validFiles.length === 0) return;

  setUploading(true);
  try {
    const uploadedPhotos = [];
    for (const file of validFiles) {
      const fileName = `${uuidv4()}_${file.name}`;
      const { error: uploadError } = await supabase.storage.from("images").upload(fileName, file);
      if (uploadError) throw new Error(uploadError.message);

      const { data } = supabase.storage.from("images").getPublicUrl(fileName);
      if (!data.publicUrl) throw new Error("Failed to retrieve public URL");
      uploadedPhotos.push({ url: data.publicUrl, caption: "" });
    }
    setPhotos(prev => [...prev, ...uploadedPhotos]);
  } catch (error) {
    setError(error.message);
  } finally {
    setUploading(false);
  }
};

Adding External Image URLs

Users can add images by entering URLs manually.

tsCopy
const handleAddUrl = () => {
  if (!imageUrl) return;
  try {
    new URL(imageUrl);
    setPhotos(prev => [...prev, { url: imageUrl, caption: "" }]);
    setImageUrl("");
  } catch {
    setError("Invalid URL format.");
  }
};

Updating Captions and Removing Images

Users can modify captions and remove images.

tsCopy
const handleCaptionChange = (index: number, caption: string) => {
  const updatedPhotos = [...photos];
  updatedPhotos[index].caption = caption;
  setPhotos(updatedPhotos);
};

const removePhoto = (index: number) => {
  setPhotos(photos.filter((_, i) => i !== index));
};

Rendering the Component

The UI consists of an upload button, an input for URLs, and a grid for displaying uploaded images.

tsxCopy
return (
  <div>
    <input type="file" multiple onChange={handleImageUpload} disabled={uploading} />
    <input type="url" value={imageUrl} onChange={(e) => setImageUrl(e.target.value)} />
    <button onClick={handleAddUrl}>Add URL</button>
    {error && <p>{error}</p>}
    <div>
      {photos.map((photo, index) => (
        <div key={index}>
          <img src={photo.url} alt="Uploaded" />
          <input type="text" value={photo.caption} onChange={(e) => handleCaptionChange(index, e.target.value)} />
          <button onClick={() => removePhoto(index)}>Remove</button>
        </div>
      ))}
    </div>
  </div>
);

Conclusion

This image uploader component provides an intuitive way to upload images, validate input, and manage image data in a cloud database. With minor modifications, it can be adapted for various use cases, including profile image uploads, gallery management, and content moderation workflows.