How to fix storage/invalid-url: Invalid URL format for Cloud Storage reference in Firebase

Check your Firebase console to confirm the correct bucket name:
1. Go to Firebase Console > Your Project > Storage
2. Look at the bucket name at the top (format: your-project-id.appspot.com)
3. Verify this matches your storageBucket in your Firebase config

// firebase-config.js
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  projectId: "your-project-id",
  storageBucket: "your-project-id.appspot.com", // Verify this value
};

Firebase provides different methods for different URL formats:

For gs:// URLs (full storage path):

import { storage } from './firebase-config';
import { ref } from 'firebase/storage';

// Using refFromURL with gs:// protocol
const fileRef = storage.refFromURL('gs://your-bucket-name/path/to/file.jpg');

For relative paths (preferred):

import { storage } from './firebase-config';
import { ref } from 'firebase/storage';

// Using ref() with a relative path (simpler and safer)
const fileRef = ref(storage, 'path/to/file.jpg');

For HTTPS download URLs (from console):
If you copy a download URL from the Firebase console (starts with https://), don't use refFromURL(). Instead:
1. Extract the file path from the URL
2. Use ref(storage, 'path/to/file.jpg') instead

Make sure Cloud Storage is properly configured:
1. Go to Firebase Console > Your Project > Build > Storage
2. Click "Get Started" if you haven't created a bucket
3. Select a default location (usually your closest region)
4. Accept the default security rules (they allow authenticated users)
5. Click "Done"

After enabling, your storageBucket value will be auto-populated in your Firebase config. Use this exact value in your code.

If your file path contains special characters, ensure they're properly handled:

// For files with spaces or special characters, encode them
const fileName = "my file (1).jpg";
const encodedPath = `uploads/${encodeURIComponent(fileName)}`;

const fileRef = ref(storage, encodedPath);

Avoid these issues:
- Spaces should be encoded as %20 or use encodeURIComponent()
- Forward slashes (/) are path separators, not encoded
- Don't include the bucket name in the path when using ref()

Verify your reference works by attempting a simple operation:

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

async function testStorageRef() {
  try {
    const fileRef = ref(storage, 'test/test.txt');
    const blob = new Blob(['test content'], { type: 'text/plain' });

    const snapshot = await uploadBytes(fileRef, blob);
    console.log('Upload successful:', snapshot.ref.fullPath);
  } catch (error) {
    console.error('Storage error:', error.code, error.message);
  }
}

If the error persists, check the browser console for the exact error details which may reveal the specific URL format issue.