Firebase Cloud Storage uses the gs:// protocol for references. This error occurs when you use an incorrect URL format (like HTTP URLs) instead of gs://bucket-name/path. Fix it by using the correct reference method.
Firebase Cloud Storage (powered by Google Cloud Storage) requires references to follow a specific URL format using the gs:// scheme. When you try to create a storage reference with an improperly formatted URL—such as using HTTP/HTTPS URLs, missing the bucket name, or using incorrect syntax—Firebase throws this "Invalid URL format" error. This prevents the SDK from identifying which file or path you want to access.
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.
The gs:// URL scheme is specific to Google Cloud Storage and is required by Firebase's SDK. You cannot use HTTP/HTTPS URLs directly with refFromURL(). If you have an HTTPS download URL from the Firebase console, extract the file path and use ref() instead. The error occurs at the SDK level before any network request, so it's purely a validation issue in your code.
messaging/UNSPECIFIED_ERROR: No additional information available
How to fix "messaging/UNSPECIFIED_ERROR: No additional information available" in Firebase Cloud Messaging
App Check: reCAPTCHA Score Too Low
App Check reCAPTCHA Score Too Low
auth/missing-uid: User ID identifier required
How to fix "auth/missing-uid: User ID identifier required" in Firebase
auth/invalid-argument: Invalid parameter passed to method
How to fix "auth/invalid-argument: Invalid parameter passed to method" in Firebase
storage/invalid-argument: Incorrect data type passed to upload function
How to fix "storage/invalid-argument: Incorrect data type passed to upload" in Firebase Storage