How to fix storage/cannot-slice-blob: Local file changed during upload in Firebase

// Web - Create Blob copy
import { ref, uploadBytes } from 'firebase/storage';

async function uploadFile(storage, filePath, file) {
  // Create immutable copy using slice()
  // This creates a new Blob with the same content
  const stableBlob = file.slice(0, file.size, file.type);

  const storageRef = ref(storage, filePath);
  const result = await uploadBytes(storageRef, stableBlob);
  return result;
}

// Usage
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  try {
    await uploadFile(storage, `uploads/${file.name}`, file);
    console.log('Upload successful');
  } catch (error) {
    console.error('Upload failed:', error);
  }
});

import { useState } from 'react';
import { ref, uploadBytes } from 'firebase/storage';

export function FileUploader({ storage }) {
  const [uploading, setUploading] = useState(false);

  const handleFileSelect = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    setUploading(true);
    try {
      // Create immutable copy
      const stableBlob = file.slice(0, file.size, file.type);

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

      console.log('Upload successful');
    } catch (error) {
      console.error('Upload failed:', error.message);
    } finally {
      setUploading(false);
    }
  };

  return (
    <input
      type="file"
      onChange={handleFileSelect}
      disabled={uploading}
    />
  );
}

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

function uploadWithResume(storage, filePath, file, maxRetries = 3) {
  // Create stable copy first
  const stableBlob = file.slice(0, file.size, file.type);

  const storageRef = ref(storage, filePath);
  const uploadTask = uploadBytesResumable(storageRef, stableBlob);

  return new Promise((resolve, reject) => {
    uploadTask.on(
      'state_changed',
      // Progress
      (snapshot) => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        console.log(`Upload is ${progress.toFixed(0)}% done`);
      },
      // Error
      (error) => {
        if (error.code === 'storage/cannot-slice-blob') {
          console.error('File was modified during upload');
        }
        reject(error);
      },
      // Complete
      () => {
        console.log('Upload completed');
        resolve(uploadTask.snapshot);
      }
    );
  });
}

// Usage in React
async function handleUpload(e) {
  const file = e.target.files[0];
  try {
    await uploadWithResume(storage, `uploads/${file.name}`, file);
  } catch (error) {
    console.error('Upload failed:', error);
  }
}

// WRONG - Uploading from temporary directory
const tempFile = '/tmp/upload-cache/image.jpg';
// System may clean this up during upload

// CORRECT - Copy to stable location first
import { ref, uploadBytes } from 'firebase/storage';
import { promises as fs } from 'fs'; // Node.js

async function uploadStableFile(storage, sourceFile, storagePath) {
  // For web: use Blob from input
  // For Node.js: read file into buffer
  const fileBuffer = await fs.readFile(sourceFile);

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

// For mobile (React Native/Flutter):
// Use file:// URLs that point to app-managed directories
// NOT: file system temporary directories

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

// Wait for file to be fully written
async function uploadAfterWrite(storage, fileData, fileName) {
  // Simulate file creation (image generation, export, etc.)
  const createdBlob = new Blob([fileData], { type: 'application/json' });

  // Add delay to ensure file system is done
  await new Promise(resolve => setTimeout(resolve, 100));

  // Create stable copy
  const stableBlob = createdBlob.slice(0, createdBlob.size, createdBlob.type);

  // Now safe to upload
  const storageRef = ref(storage, `uploads/${fileName}`);
  const result = await uploadBytes(storageRef, stableBlob);
  return result;
}

// For Node.js file operations
const fs = require('fs').promises;

async function createAndUpload(storage, filePath, storagePath) {
  // Write file
  await fs.writeFile(filePath, 'file content');

  // Wait a moment
  await new Promise(resolve => setTimeout(resolve, 100));

  // Read into buffer for upload
  const buffer = await fs.readFile(filePath);

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

// React Native with file picker
import DocumentPicker from 'react-native-document-picker';
import { ref, uploadBytes } from 'firebase/storage';
import RNFS from 'react-native-fs';

async function uploadFromGallery(storage) {
  try {
    const result = await DocumentPicker.pick({
      type: [DocumentPicker.types.images],
    });

    // Copy file to app's documents directory
    const appDir = RNFS.DocumentDirectoryPath;
    const fileName = result.name;
    const newPath = `${appDir}/${fileName}`;

    // Copy from picker result to stable location
    await RNFS.copyFile(result.uri, newPath);

    // Wait for copy to complete
    await new Promise(resolve => setTimeout(resolve, 200));

    // Read into buffer
    const fileData = await RNFS.readFile(newPath, 'base64');
    const blob = new Blob(
      [Buffer.from(fileData, 'base64')],
      { type: result.type }
    );

    // Create stable copy
    const stableBlob = blob.slice(0, blob.size, blob.type);

    // Upload
    const storageRef = ref(storage, `uploads/${fileName}`);
    await uploadBytes(storageRef, stableBlob);

    // Cleanup
    await RNFS.unlink(newPath);
  } catch (error) {
    console.error('Upload failed:', error);
  }
}

import 'package:firebase_storage/firebase_storage.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

Future<void> uploadFromGallery() async {
  final ImagePicker picker = ImagePicker();
  final XFile? image = await picker.pickImage(source: ImageSource.gallery);

  if (image != null) {
    try {
      File imageFile = File(image.path);

      // Verify file exists and is accessible
      final exists = await imageFile.exists();
      if (!exists) {
        throw Exception('File not found');
      }

      // Upload directly - Firebase SDK handles slicing
      await FirebaseStorage.instance
          .ref('uploads/${image.name}')
          .putFile(imageFile);
    } catch (e) {
      print('Upload failed: $e');
    }
  }
}

# Web
npm update firebase

# React Native
npm update @react-native-firebase/storage

# Flutter
flutter pub upgrade firebase_storage

# Node.js
npm update firebase-admin

# Verify versions
npm list firebase
npm list @react-native-firebase/storage
flutter pub outdated

// Web
import { SDK_VERSION } from 'firebase/app';
console.log('Firebase SDK:', SDK_VERSION);

// Admin
const admin = require('firebase-admin');
console.log('Admin SDK:', admin.SDK_VERSION);