How to fix storage/invalid-argument: Incorrect data type passed to upload function in Firebase

// CORRECT - File object from input element
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0]; // This is a File object (subclass of Blob)
const storageRef = ref(storage, 'uploads/myfile.pdf');
await uploadBytes(storageRef, file); // File is accepted

// CORRECT - Blob object
const blob = new Blob(['file content'], { type: 'text/plain' });
await uploadBytes(storageRef, blob);

// WRONG - String data
const data = 'file content'; // This is a string, not a Blob
await uploadBytes(storageRef, data); // Error: Incorrect data type

// WRONG - JSON object
const jsonData = { name: 'John', age: 30 }; // Plain object
await uploadBytes(storageRef, jsonData); // Error: Incorrect data type

// Convert string to Blob
const stringData = 'This is my file content';
const blob = new Blob([stringData], { type: 'text/plain' });
const storageRef = ref(storage, 'uploads/myfile.txt');
await uploadBytes(storageRef, blob);

// For JSON data
const jsonData = { name: 'John', age: 30 };
const jsonString = JSON.stringify(jsonData);
const jsonBlob = new Blob([jsonString], { type: 'application/json' });
const jsonRef = ref(storage, 'uploads/data.json');
await uploadBytes(jsonRef, jsonBlob);

// For CSV data
const csvString = 'name,age\nJohn,30\nJane,25';
const csvBlob = new Blob([csvString], { type: 'text/csv' });
const csvRef = ref(storage, 'uploads/data.csv');
await uploadBytes(csvRef, csvBlob);

import { ref, uploadString } from 'firebase/storage';

// Upload base64 encoded image
const base64String = 'iVBORw0KGgoAAAANS...'; // Base64 encoded PNG
const storageRef = ref(storage, 'uploads/image.png');
await uploadString(storageRef, base64String, 'base64', {
  contentType: 'image/png'
});

// Upload data URL (from canvas or camera)
const dataUrl = 'data:image/png;base64,iVBORw0KGgo...';
await uploadString(storageRef, dataUrl, 'data_url', {
  contentType: 'image/png'
});

// Upload raw base64url format
const base64UrlString = 'iVBORw0KGgoAAAANS...'; // No padding
await uploadString(storageRef, base64UrlString, 'base64url', {
  contentType: 'image/png'
});

// Fetch file from URL and upload
async function uploadFromUrl(url, storagePath) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`Failed to fetch: ${response.statusText}`);
    }

    // Convert response to Blob - this is required!
    const blob = await response.blob();

    const storageRef = ref(storage, storagePath);
    const result = await uploadBytes(storageRef, blob);
    return result;
  } catch (error) {
    console.error('Upload failed:', error);
  }
}

// Usage
uploadFromUrl('https://example.com/image.jpg', 'uploads/downloaded-image.jpg');

// Also works with response.arrayBuffer()
async function uploadFromUrlWithArrayBuffer(url, storagePath) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();

  const storageRef = ref(storage, storagePath);
  await uploadBytes(storageRef, arrayBuffer); // ArrayBuffer is accepted
}

const fs = require('fs');
const { getStorage, ref, uploadBytes } = require('firebase-admin/storage');

// CORRECT - Read file as Buffer
async function uploadFileFromDisk(filePath, storagePath) {
  // fs.readFileSync returns a Buffer (compatible with uploadBytes)
  const fileBuffer = fs.readFileSync(filePath);

  const storage = getStorage();
  const storageRef = ref(storage, storagePath);

  // Buffer is accepted
  await uploadBytes(storageRef, fileBuffer);
}

// CORRECT - Using promises
async function uploadFileFromDiskAsync(filePath, storagePath) {
  const fileBuffer = await fs.promises.readFile(filePath);

  const storage = getStorage();
  const storageRef = ref(storage, storagePath);
  await uploadBytes(storageRef, fileBuffer);
}

// WRONG - Reading as string
async function uploadFileWrong(filePath, storagePath) {
  // readFileSync with encoding returns a string
  const fileString = fs.readFileSync(filePath, 'utf-8'); // String - WRONG!

  const storageRef = ref(storage, storagePath);
  await uploadBytes(storageRef, fileString); // Error: Incorrect data type
}

// Convert string back to Buffer if needed
async function uploadFileFromString(fileContent, storagePath) {
  // Convert string to Buffer
  const fileBuffer = Buffer.from(fileContent, 'utf-8');

  const storageRef = ref(storage, storagePath);
  await uploadBytes(storageRef, fileBuffer); // Buffer is accepted
}

// HTML
<input type="file" id="fileInput" />

// JavaScript - File objects are ready to use
const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', async (event) => {
  const file = event.target.files[0]; // File object (perfect for upload)

  if (!file) {
    console.error('No file selected');
    return;
  }

  // Verify file type
  console.log('File name:', file.name);
  console.log('File size:', file.size);
  console.log('File type:', file.type);

  const storageRef = ref(storage, `uploads/${file.name}`);

  try {
    const result = await uploadBytes(storageRef, file);
    console.log('Upload successful:', result);
  } catch (error) {
    console.error('Upload failed:', error);
  }
});

// For multiple files
const fileInputMultiple = document.getElementById('fileInput');
fileInputMultiple.addEventListener('change', async (event) => {
  for (const file of event.target.files) {
    const storageRef = ref(storage, `uploads/${file.name}`);
    await uploadBytes(storageRef, file);
  }
});

import { uploadBytes, uploadBytesResumable, uploadString } from 'firebase/storage';

const storageRef = ref(storage, 'uploads/file');

// uploadBytes() - for Blob, File, Uint8Array, ArrayBuffer
const file = new File(['content'], 'file.txt', { type: 'text/plain' });
await uploadBytes(storageRef, file); // Correct

// uploadBytesResumable() - same types as uploadBytes, with pause/resume
const uploadTask = uploadBytesResumable(storageRef, file);
uploadTask.on('state_changed', ...); // Correct

// uploadString() - for string-based formats
const base64 = 'aGVsbG8gd29ybGQ='; // Base64 string
await uploadString(storageRef, base64, 'base64'); // Correct

// DO NOT mix methods with wrong data types
await uploadBytes(storageRef, 'string data'); // Error!
await uploadString(storageRef, someBlob); // Wrong method for Blob