Firebase Storage integration in mobile app

Firebase Storage Integration in Mobile Applications

Firebase Storage is object storage based on Google Cloud Storage with Firebase Auth integration. Access rules are written in the same language as Firestore Rules, file path can be tied to auth.uid. For uploading avatars, documents, audio, and video from a mobile application — the standard choice in the Firebase stack.

File Upload with Progress

import storage from '@react-native-firebase/storage';
import { launchImageLibrary } from 'react-native-image-picker';

const uploadAvatar = async (userId: string) => {
  const result = await launchImageLibrary({ mediaType: 'photo', quality: 0.8 });
  if (result.didCancel || !result.assets?.[0]?.uri) return;

  const localUri = result.assets[0].uri;
  const ref = storage().ref(`avatars/${userId}.jpg`);

  const task = ref.putFile(localUri);

  task.on('state_changed',
    snapshot => {
      const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      setUploadProgress(Math.round(progress));
    },
    error => {
      console.error('Upload error:', error.code);
    },
    async () => {
      const downloadURL = await ref.getDownloadURL();
      await updateUserProfile({ photoURL: downloadURL });
    }
  );
};

putFile() accepts local path (file://...), not base64. On iOS launchImageLibrary returns ph:// URI — on some RN versions conversion to file:// via react-native-fs is needed.

Storage Security Rules

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /avatars/{userId}.jpg {
      allow read: if request.auth != null;
      allow write: if request.auth.uid == userId
        && request.resource.size < 5 * 1024 * 1024  // 5 MB
        && request.resource.contentType.matches('image/.*');
    }

    match /documents/{userId}/{allPaths=**} {
      allow read, write: if request.auth.uid == userId;
    }
  }
}

request.resource.size and request.resource.contentType are server-side checks, not just client validation.

Resumable Uploads for Large Files

putFile() automatically uses resumable upload for files >5 MB. For explicit pause/resume management:

const task = ref.putFile(localPath);

// Pause when backgrounding
AppState.addEventListener('change', state => {
  if (state === 'background') task.pause();
  if (state === 'active') task.resume();
});

Firebase Storage task survives app restart only if you save task.snapshot.ref.fullPath and call ref.putResumable() on next startup. Without this, on crash upload starts over.

Estimation

Firebase Storage with media upload, progress indicator, and access rules: 1–2 weeks.