Install required libraries

Install sharp for image processing and file-type for validation:

npm install sharp file-type uuid

Sharp is a high-performance image processing library that handles resizing, format conversion, and metadata stripping.

Create image validation utilities

Validate images thoroughly before processing:

// lib/image-validation.ts
import { fileTypeFromBuffer } from 'file-type';
import sharp from 'sharp';

const ALLOWED_IMAGE_TYPES = [
  'image/jpeg',
  'image/png',
  'image/webp',
  'image/gif',
] as const;

const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
const MAX_DIMENSION = 4096; // Prevent decompression bombs
const MIN_DIMENSION = 10;

interface ImageValidationResult {
  valid: boolean;
  error?: string;
  mimeType?: string;
  width?: number;
  height?: number;
}

export async function validateImage(buffer: Buffer): Promise<ImageValidationResult> {
  // Check file size first (fast check)
  if (buffer.length > MAX_FILE_SIZE) {
    return {
      valid: false,
      error: `Image exceeds maximum size of ${MAX_FILE_SIZE / 1024 / 1024}MB`,
    };
  }

  if (buffer.length === 0) {
    return { valid: false, error: 'File is empty' };
  }

  // Detect actual file type using magic bytes
  const detectedType = await fileTypeFromBuffer(buffer);

  if (!detectedType) {
    return { valid: false, error: 'Could not determine file type' };
  }

  // Check if it's an allowed image type
  if (!ALLOWED_IMAGE_TYPES.includes(detectedType.mime as any)) {
    return {
      valid: false,
      error: `File type ${detectedType.mime} is not allowed. Allowed: JPEG, PNG, WebP, GIF`,
    };
  }

  // Get image dimensions (also validates it's a real image)
  try {
    const metadata = await sharp(buffer).metadata();

    if (!metadata.width || !metadata.height) {
      return { valid: false, error: 'Could not read image dimensions' };
    }

    // Check for decompression bombs
    if (metadata.width > MAX_DIMENSION || metadata.height > MAX_DIMENSION) {
      return {
        valid: false,
        error: `Image dimensions exceed maximum of ${MAX_DIMENSION}x${MAX_DIMENSION}`,
      };
    }

    if (metadata.width < MIN_DIMENSION || metadata.height < MIN_DIMENSION) {
      return {
        valid: false,
        error: `Image dimensions must be at least ${MIN_DIMENSION}x${MIN_DIMENSION}`,
      };
    }

    return {
      valid: true,
      mimeType: detectedType.mime,
      width: metadata.width,
      height: metadata.height,
    };
  } catch (error) {
    return { valid: false, error: 'Invalid or corrupted image file' };
  }
}

Create image processing functions

Process images to strip metadata and generate clean files:

// lib/image-processing.ts
import sharp from 'sharp';

interface ProcessedImage {
  buffer: Buffer;
  width: number;
  height: number;
  format: 'jpeg' | 'png' | 'webp';
}

interface ProcessingOptions {
  maxWidth?: number;
  maxHeight?: number;
  quality?: number;
  format?: 'jpeg' | 'png' | 'webp' | 'original';
}

export async function processImage(
  buffer: Buffer,
  options: ProcessingOptions = {}
): Promise<ProcessedImage> {
  const {
    maxWidth = 1920,
    maxHeight = 1080,
    quality = 85,
    format = 'webp',
  } = options;

  let sharpInstance = sharp(buffer)
    // Remove ALL metadata including EXIF, ICC profiles, etc.
    .rotate() // Auto-rotate based on EXIF before stripping
    .withMetadata({ orientation: undefined }) // Strip EXIF
    .removeAlpha(); // Remove alpha channel if not needed

  // Resize if larger than max dimensions
  sharpInstance = sharpInstance.resize(maxWidth, maxHeight, {
    fit: 'inside',
    withoutEnlargement: true,
  });

  // Convert to desired format
  let outputBuffer: Buffer;
  let outputFormat: 'jpeg' | 'png' | 'webp';

  switch (format) {
    case 'jpeg':
      outputBuffer = await sharpInstance.jpeg({ quality, mozjpeg: true }).toBuffer();
      outputFormat = 'jpeg';
      break;
    case 'png':
      outputBuffer = await sharpInstance.png({ quality, compressionLevel: 9 }).toBuffer();
      outputFormat = 'png';
      break;
    case 'webp':
    default:
      outputBuffer = await sharpInstance.webp({ quality }).toBuffer();
      outputFormat = 'webp';
      break;
  }

  const metadata = await sharp(outputBuffer).metadata();

  return {
    buffer: outputBuffer,
    width: metadata.width!,
    height: metadata.height!,
    format: outputFormat,
  };
}

// Generate multiple sizes for responsive images
export async function generateImageVariants(buffer: Buffer): Promise<{
  thumbnail: ProcessedImage;
  medium: ProcessedImage;
  large: ProcessedImage;
}> {
  const [thumbnail, medium, large] = await Promise.all([
    processImage(buffer, { maxWidth: 150, maxHeight: 150, quality: 80 }),
    processImage(buffer, { maxWidth: 600, maxHeight: 600, quality: 85 }),
    processImage(buffer, { maxWidth: 1200, maxHeight: 1200, quality: 90 }),
  ]);

  return { thumbnail, medium, large };
}

// Profile-specific processing with square crop
export async function processProfileImage(buffer: Buffer): Promise<ProcessedImage> {
  const outputBuffer = await sharp(buffer)
    .rotate()
    .withMetadata({ orientation: undefined })
    .resize(400, 400, {
      fit: 'cover',
      position: 'centre',
    })
    .webp({ quality: 85 })
    .toBuffer();

  return {
    buffer: outputBuffer,
    width: 400,
    height: 400,
    format: 'webp',
  };
}

Implement the upload API route

Combine validation and processing in your API:

// app/api/images/upload/route.ts
import { validateImage } from '@/lib/image-validation';
import { processImage, generateImageVariants } from '@/lib/image-processing';
import { uploadToStorage } from '@/lib/storage';
import { getServerSession } from 'next-auth';
import { v4 as uuidv4 } from 'uuid';

export async function POST(request: Request) {
  const session = await getServerSession();
  if (!session?.user) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 });
  }

  try {
    const formData = await request.formData();
    const file = formData.get('image') as File | null;

    if (!file) {
      return Response.json({ error: 'No image provided' }, { status: 400 });
    }

    const buffer = Buffer.from(await file.arrayBuffer());

    // Validate the image
    const validation = await validateImage(buffer);
    if (!validation.valid) {
      return Response.json({ error: validation.error }, { status: 400 });
    }

    // Process and generate variants
    const variants = await generateImageVariants(buffer);

    // Generate unique ID for this upload
    const imageId = uuidv4();
    const basePath = `images/${session.user.id}/${imageId}`;

    // Upload all variants
    const [thumbnailUrl, mediumUrl, largeUrl] = await Promise.all([
      uploadToStorage(variants.thumbnail.buffer, `${basePath}/thumb.webp`, 'image/webp'),
      uploadToStorage(variants.medium.buffer, `${basePath}/medium.webp`, 'image/webp'),
      uploadToStorage(variants.large.buffer, `${basePath}/large.webp`, 'image/webp'),
    ]);

    // Store metadata
    const image = await db.image.create({
      data: {
        id: imageId,
        userId: session.user.id,
        originalName: file.name,
        thumbnailUrl,
        mediumUrl,
        largeUrl,
        width: variants.large.width,
        height: variants.large.height,
      },
    });

    return Response.json({
      id: image.id,
      urls: {
        thumbnail: thumbnailUrl,
        medium: mediumUrl,
        large: largeUrl,
      },
    });
  } catch (error) {
    console.error('Image upload error:', error);
    return Response.json({ error: 'Upload failed' }, { status: 500 });
  }
}

Handle SVG safely (if needed)

SVGs require special handling because they can contain scripts:

// lib/svg-sanitization.ts
import DOMPurify from 'isomorphic-dompurify';

const SVG_ALLOWED_TAGS = [
  'svg', 'circle', 'ellipse', 'line', 'path', 'polygon', 'polyline',
  'rect', 'g', 'defs', 'use', 'symbol', 'text', 'tspan',
  'linearGradient', 'radialGradient', 'stop', 'clipPath', 'mask',
];

const SVG_ALLOWED_ATTRS = [
  'viewBox', 'width', 'height', 'fill', 'stroke', 'stroke-width',
  'd', 'cx', 'cy', 'r', 'rx', 'ry', 'x', 'y', 'x1', 'y1', 'x2', 'y2',
  'points', 'transform', 'opacity', 'id', 'class', 'clip-path', 'mask',
  'offset', 'stop-color', 'stop-opacity', 'href', 'xlink:href',
];

export function sanitizeSvg(svgString: string): string | null {
  // First, check for obvious script content
  if (/