📁 Firebase Storage

Introduction

Firebase Storage provides secure file storage with powerful features for uploading, downloading, and managing files in your applications.

Key Learning Outcomes

By the end of this lesson, you'll understand:

• Uploading files (single and multiple)

• Downloading and displaying files

• Deleting files

• Managing file metadata

• Progress monitoring

• Security rules for storage

• Organizing files with folder structure

Basic File Upload

import { getStorage, ref, uploadBytes } from "firebase/storage";

const storage = getStorage();

async function uploadFile(file, userId) {
  const storageRef = ref(storage, `users/${userId}/${file.name}`);
  
  try {
    const snapshot = await uploadBytes(storageRef, file);
    console.log('File uploaded:', snapshot.metadata.name);
    return snapshot;
  } catch (error) {
    console.error('Upload error:', error);
  }
}

File Upload with Progress

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

function uploadWithProgress(file, userId, onProgress) {
  const storageRef = ref(storage, `users/${userId}/${file.name}`);
  const uploadTask = uploadBytesResumable(storageRef, file);

  uploadTask.on(
    'state_changed',
    (snapshot) => {
      const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      onProgress(progress);
      console.log('Upload progress:', progress);
    },
    (error) => {
      console.error('Upload error:', error);
    },
    () => {
      console.log('Upload complete');
    }
  );

  return uploadTask;
}

Download Files

import { ref, getBytes, getUrl } from "firebase/storage";

// Get download URL
async function getFileUrl(userId, fileName) {
  const fileRef = ref(storage, `users/${userId}/${fileName}`);
  const url = await getUrl(fileRef);
  return url;
}

// Display image
async function displayImage(userId, fileName) {
  const url = await getFileUrl(userId, fileName);
  const img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);
}

// Download as bytes
async function downloadFile(userId, fileName) {
  const fileRef = ref(storage, `users/${userId}/${fileName}`);
  const bytes = await getBytes(fileRef);
  return bytes;
}

Delete Files

import { ref, deleteObject } from "firebase/storage";

async function deleteFile(userId, fileName) {
  const fileRef = ref(storage, `users/${userId}/${fileName}`);
  
  try {
    await deleteObject(fileRef);
    console.log('File deleted');
  } catch (error) {
    console.error('Delete error:', error);
  }
}

File Metadata

import { ref, getMetadata, updateMetadata } from "firebase/storage";

// Get metadata
async function getFileMetadata(userId, fileName) {
  const fileRef = ref(storage, `users/${userId}/${fileName}`);
  const metadata = await getMetadata(fileRef);
  
  console.log('Name:', metadata.name);
  console.log('Size:', metadata.size);
  console.log('Type:', metadata.contentType);
  console.log('Updated:', metadata.updated);
}

// Update metadata
async function updateFileMetadata(userId, fileName, customMetadata) {
  const fileRef = ref(storage, `users/${userId}/${fileName}`);
  
  await updateMetadata(fileRef, {
    customMetadata: customMetadata,
    cacheControl: 'public, max-age=3600'
  });
}

React File Upload Component

import { useState } from 'react';
import { getStorage, ref, uploadBytesResumable } from "firebase/storage";

export function FileUploadForm({ userId }) {
  const [file, setFile] = useState(null);
  const [progress, setProgress] = useState(0);
  const [uploadedUrl, setUploadedUrl] = useState('');
  const storage = getStorage();

  async function handleUpload(e) {
    e.preventDefault();
    if (!file) return;

    const storageRef = ref(storage, `users/${userId}/${file.name}`);
    const uploadTask = uploadBytesResumable(storageRef, file);

    uploadTask.on(
      'state_changed',
      (snapshot) => {
        const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
        setProgress(progress);
      },
      (error) => {
        console.error('Upload error:', error);
      },
      async () => {
        const url = await uploadTask.snapshot.ref.getDownloadURL();
        setUploadedUrl(url);
      }
    );
  }

  return (
    <form onSubmit={handleUpload}>
      <input
        type="file"
        onChange={(e) => setFile(e.target.files[0])}
      />
      <button type="submit">Upload</button>
      {progress > 0 && <p>Progress: {progress.toFixed(2)}%</p>}
      {uploadedUrl && <img src={uploadedUrl} alt="Uploaded" />}
    </form>
  );
}

Organizing Files

// Folder structure pattern
// users/{userId}/profile/avatar.jpg
// users/{userId}/documents/resume.pdf
// users/{userId}/photos/{photoId}.jpg

async function uploadProfilePicture(file, userId) {
  const storageRef = ref(storage, `users/${userId}/profile/avatar`);
  return uploadBytes(storageRef, file);
}

async function uploadDocument(file, userId, documentType) {
  const storageRef = ref(storage, `users/${userId}/documents/${documentType}/${file.name}`);
  return uploadBytes(storageRef, file);
}

async function uploadPhoto(file, userId, albumId) {
  const fileName = `${Date.now()}_${file.name}`;
  const storageRef = ref(storage, `users/${userId}/albums/${albumId}/${fileName}`);
  return uploadBytes(storageRef, file);
}

Batch Upload

async function uploadMultipleFiles(files, userId) {
  const uploads = files.map(file => {
    const storageRef = ref(storage, `users/${userId}/files/${file.name}`);
    return uploadBytes(storageRef, file);
  });

  try {
    const results = await Promise.all(uploads);
    console.log('All files uploaded:', results.length);
    return results;
  } catch (error) {
    console.error('Batch upload error:', error);
  }
}

Key Takeaways

• **Firebase Storage** provides secure, scalable file storage

• **Upload progress** can be monitored for user feedback

• **Download URLs** enable sharing and embedding files

• **Metadata** stores file information and custom data

• **Folder structure** organizes files logically

• **Resumable uploads** handle large files efficiently

• **Security rules** protect access to files

• **Batch operations** upload multiple files simultaneously

Next Steps

Explore Firebase Functions for advanced file processing, or implement image resizing with Cloud Functions.