Cloud Storage

Overview

FireBlazor provides a comprehensive API for working with Firebase Cloud Storage in your Blazor WebAssembly applications. Features include:

• File Upload - Upload files with real-time progress tracking
• File Download - Download files as URLs, bytes, or streams
• Metadata Management - Get and update file metadata including custom properties
• File Operations - Delete files and list directory contents

All operations use the Result<T> pattern for type-safe error handling.

Upload Files

Upload files to Cloud Storage using the PutAsync method. This method supports Blazor's IBrowserFile interface for seamless integration with file input components.

Upload with Progress Tracking

Track upload progress in real-time using the progress callback parameter. This is ideal for providing user feedback during large file uploads.

// Upload with progress tracking
var result = await Firebase.Storage
    .Ref($"uploads/{Guid.NewGuid()}/{file.Name}")
    .PutAsync(
        browserFile,
        new StorageMetadata { ContentType = file.ContentType },
        progress => {
            _uploadProgress = progress.Percentage;
            InvokeAsync(StateHasChanged);
        });

The progress callback receives a UploadProgress object with the following properties:

• Percentage - Upload progress as a value from 0 to 100
• BytesTransferred - Number of bytes uploaded so far
• TotalBytes - Total file size in bytes

Complete Upload Example with UI

@inject IFirebase Firebase

<InputFile OnChange="HandleFileSelected" />

@if (_isUploading)
{
    <div class="progress-bar">
        <div style="width: @(_uploadProgress)%"></div>
    </div>
    <span>@_uploadProgress.ToString("F0")%</span>
}

@code {
    private double _uploadProgress;
    private bool _isUploading;

    private async Task HandleFileSelected(InputFileChangeEventArgs e)
    {
        var file = e.File;
        _isUploading = true;

        var result = await Firebase.Storage
            .Ref($"uploads/{Guid.NewGuid()}/{file.Name}")
            .PutAsync(
                file,
                new StorageMetadata { ContentType = file.ContentType },
                progress => {
                    _uploadProgress = progress.Percentage;
                    InvokeAsync(StateHasChanged);
                });

        _isUploading = false;

        if (result.IsSuccess)
        {
            Console.WriteLine($"File uploaded to: {result.Value.Ref.FullPath}");
        }
    }
}

Upload String Content

Upload text content directly using PutStringAsync. This is useful for uploading JSON configurations, text files, or other string-based content.

// Upload string content
await Firebase.Storage
    .Ref("data/config.json")
    .PutStringAsync(
        jsonContent,
        StringFormat.Raw,
        new StorageMetadata { ContentType = "application/json" });

The StringFormat enum supports the following values:

• Raw - Plain text content
• Base64 - Base64 encoded content
• Base64Url - URL-safe Base64 encoded content
• DataUrl - Data URL format (e.g., data:text/plain;base64,...)

Download Files

FireBlazor provides multiple ways to download files from Cloud Storage depending on your use case.

Get Download URL

Get a publicly accessible download URL for a file. This URL can be used directly in <img> tags or for client-side downloads.

// Get download URL
var urlResult = await Firebase.Storage
    .Ref("path/to/file.png")
    .GetDownloadUrlAsync();

if (urlResult.IsSuccess)
{
    var downloadUrl = urlResult.Value;
    // Use the URL in an img tag or for download
}

Download as Bytes or Stream

Download file contents directly as a byte array or stream for in-memory processing.

Download as Bytes

// Download as bytes
var bytesResult = await Firebase.Storage
    .Ref("path/to/file.png")
    .GetBytesAsync(maxSize: 10_000_000);

Download as Stream

// Download as stream
var streamResult = await Firebase.Storage
    .Ref("path/to/file.png")
    .GetStreamAsync();

if (streamResult.IsSuccess)
{
    using var stream = streamResult.Value;
    // Process the stream
}

Manage Files

FireBlazor provides methods for managing file metadata, deleting files, and listing directory contents.

Get Metadata

Retrieve metadata for a file including size, content type, creation time, and custom metadata.

// Get file metadata
var metadata = await Firebase.Storage
    .Ref("path/to/file")
    .GetMetadataAsync();

if (metadata.IsSuccess)
{
    Console.WriteLine($"Name: {metadata.Value.Name}");
    Console.WriteLine($"Size: {metadata.Value.Size} bytes");
    Console.WriteLine($"Content Type: {metadata.Value.ContentType}");
    Console.WriteLine($"Created: {metadata.Value.TimeCreated}");
}

Update Metadata

Update file metadata including cache control settings and custom metadata properties.

// Update file metadata
await Firebase.Storage
    .Ref("path/to/file")
    .UpdateMetadataAsync(new StorageMetadata
    {
        CacheControl = "public, max-age=3600",
        CustomMetadata = new Dictionary<string, string>
        {
            ["version"] = "1.0",
            ["author"] = "FireBlazor"
        }
    });

Common metadata properties you can update:

• CacheControl - HTTP cache control header
• ContentDisposition - Content disposition header
• ContentEncoding - Content encoding (e.g., gzip)
• ContentLanguage - Content language
• ContentType - MIME type of the file
• CustomMetadata - Dictionary of custom key-value pairs

Delete Files

Delete a file from Cloud Storage.

// Delete a file
await Firebase.Storage
    .Ref("path/to/file")
    .DeleteAsync();

List Files

List all files and subdirectories in a storage location.

// List all files in a directory
var listResult = await Firebase.Storage
    .Ref("uploads")
    .ListAllAsync();

if (listResult.IsSuccess)
{
    // Iterate over files
    foreach (var item in listResult.Value.Items)
    {
        Console.WriteLine($"File: {item.Name}");
    }

    // Iterate over subdirectories
    foreach (var prefix in listResult.Value.Prefixes)
    {
        Console.WriteLine($"Directory: {prefix.Name}");
    }
}