Upload to Cloudinary and Firebase Storage with Axios

This guide demonstrates how to upload media assets directly to Cloudinary and Firebase Storage using the Axios HTTP client. By bypassing platform-specific SDKs, you can leverage standard REST APIs to transfer files, manage upload payloads, set up proper headers, and track upload progress in both web and Node.js environments.

Uploading Assets Directly to Cloudinary

Cloudinary allows client-side direct uploads using unsigned upload presets, eliminating the need to expose your API secret.

1. Set Up Cloudinary

  1. Navigate to your Cloudinary Settings > Upload.
  2. Scroll to Upload presets and click Add upload preset.
  3. Set the Signing Mode to Unsigned and save. Note your Cloud Name and the Preset Name.

2. Implement the Upload with Axios

Use FormData to send the file and the preset name via a POST request to Cloudinary's upload endpoint.

import axios from 'axios';

async function uploadToCloudinary(file) {
  const cloudName = 'YOUR_CLOUD_NAME';
  const uploadPreset = 'YOUR_UNSIGNED_PRESET';
  const url = `https://api.cloudinary.com/v1_1/${cloudName}/auto/upload`;

  const formData = new FormData();
  formData.append('file', file);
  formData.append('upload_preset', uploadPreset);

  try {
    const response = await axios.post(url, formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      onUploadProgress: (progressEvent) => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        console.log(`Cloudinary Upload Progress: ${percentCompleted}%`);
      },
    });

    console.log('Upload successful:', response.data.secure_url);
    return response.data;
  } catch (error) {
    console.error('Cloudinary upload failed:', error.response?.data || error.message);
    throw error;
  }
}

Uploading Assets Directly to Firebase Storage

Firebase Storage provides a JSON REST API for file uploads. You can upload raw file data directly by sending the file buffer or blob to the Google Cloud Storage endpoint used by Firebase.

1. Identify Your Storage Bucket and Security Rules

Ensure your storage security rules allow writes. If authentication is required, you must include a Firebase ID token in the Authorization header.

2. Implement the Upload with Axios

Send a POST request with the binary file data, specifying the destination path using the name query parameter.

import axios from 'axios';

async function uploadToFirebaseStorage(file, destinationPath, idToken = null) {
  const bucketName = 'YOUR_PROJECT_ID.appspot.com';
  const encodedPath = encodeURIComponent(destinationPath);
  const url = `https://firebasestorage.googleapis.com/v0/b/${bucketName}/o?uploadType=media&name=${encodedPath}`;

  const headers = {
    'Content-Type': file.type || 'application/octet-stream',
  };

  if (idToken) {
    headers['Authorization'] = `Firebase ${idToken}`;
  }

  try {
    const response = await axios.post(url, file, {
      headers: headers,
      onUploadProgress: (progressEvent) => {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        console.log(`Firebase Upload Progress: ${percentCompleted}%`);
      },
    });

    // Public download URL format
    const downloadUrl = `https://firebasestorage.googleapis.com/v0/b/${bucketName}/o/${encodedPath}?alt=media&token=${response.data.downloadTokens}`;
    console.log('Firebase upload successful:', downloadUrl);
    return response.data;
  } catch (error) {
    console.error('Firebase upload failed:', error.response?.data || error.message);
    throw error;
  }
}

Summary of Key Differences

Feature Cloudinary Firebase Storage
Payload Type multipart/form-data Binary data / Blob
Authentication Unsigned upload preset or signature Firebase ID Token / IAM Rules
Target URL api.cloudinary.com/v1_1/<cloud_name>/<resource_type>/upload firebasestorage.googleapis.com/v0/b/<bucket>/o
Progress Tracking Axios onUploadProgress Axios onUploadProgress