Cloudinary Image Upload Utility

A lightweight, type-safe TypeScript utility for handling direct client-side image uploads to Cloudinary using Unsigned Uploads. This implementation leverages the native fetch API, keeping your bundle size small by avoiding external dependencies like Axios.

Table of Contents

• Features
• Prerequisites
• Simple implementation

Features

• Zero Dependencies: Uses the native Fetch API.
• Type Safety: Fully typed interface for predictable data structures and better DX.
• Error Handling: Captures and logs detailed Cloudinary API responses.
• Lightweight: Optimized for modern browser environments.

Prerequisites

Before using this function, gather the following details from your Cloudinary Dashboard:

1. Cloud Name: Your unique Cloudinary identifier.
2. Upload Preset: Create an 'Unsigned' upload preset in Cloudinary Settings (Settings > Upload).
3. API URL: Typically formatted as: https://api.cloudinary.com/v1_1/YOUR_CLOUD_NAME/image/upload

Simple implementation

const handleUpload = async (file: File) => {
  try {
    // Call the function with 3 simple parameters
    const { url, public_id } = await uploadToCloudinary(
      file, 
      "your_upload_preset", // cloudinary upload preset
      "your_cloud_name" // cloudinary cloud name
    );

    console.log("Uploaded Image URL:", url);
    console.log("Cloudinary Public ID:", public_id);
  } catch (error) {
    console.error("Upload failed:", error);
  }
};