Media & Image Storage

Overview

Blogify utilizes Supabase Storage to manage and serve media assets. This integration provides a robust, scalable solution for handling blog cover images and rich media content embedded within posts. All media is hosted in a dedicated images bucket, ensuring high availability and fast loading via Supabase’s global CDN.

Supported Media Types

The platform supports standard image formats including:

• JPEG/JPG
• PNG
• WebP
• GIF

Storage Features

1. Featured Images (Post Thumbnails)

Each blog post can have a single featured image that appears at the top of the article and in the feed. This is managed via the image_url field in the Post object. When creating or editing a post, users can upload a file which is automatically stored, and its public URL is saved to the database.

2. Inline Markdown Images

The editor supports uploading images directly into the body of the post. These images are inserted as Markdown syntax: ![Description](public_url)

This allows for rich, media-heavy storytelling while keeping the content structure lightweight.

Developer Interface

The uploadImage Utility

For developers extending the platform, the primary interface for media management is the uploadImage function located in src/lib/api.ts.

Signature:

async function uploadImage(file: File): Promise<string>

Usage Example:

import { uploadImage } from '@/lib/api';

const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
  const file = event.target.files?.[0];
  if (file) {
    try {
      const publicUrl = await uploadImage(file);
      console.log('Image uploaded successfully:', publicUrl);
    } catch (error) {
      console.error('Upload failed:', error);
    }
  }
};

Key Behaviors:

• Authentication: Uploads require an active user session. The function checks for a Supabase session before attempting the transfer to comply with Row Level Security (RLS).
• Unique Naming: To prevent collisions, files are renamed using a combination of the current timestamp and a random string (e.g., 1715634000-abc123.jpg).
• Public Access: The function returns a permanent public URL generated via Supabase's getPublicUrl method.

Configuration & Requirements

To ensure media storage functions correctly in your own instance of Blogify, the following Supabase configurations are required:

1. Bucket Name: A storage bucket named images must exist.
2. Public Access: The bucket should be set to "Public" so that images are viewable by readers without authentication.
3. Security Policies (RLS):
   • Select: Allow public access for SELECT operations.
   • Insert: Restricted to authenticated users for INSERT operations.
   • Update/Delete: Restricted to the owner of the asset (standard policy recommended).

Technical Constraints

• Storage Provider: Supabase Storage (S3-compatible).
• Metadata: Images are served with default cache-control headers as defined in your Supabase project settings.
• Size Limits: Maximum file size is governed by your Supabase project’s storage configuration (default is typically 5MB for free tiers).