Load PDFs from Firebase Cloud Storage Using .NET MAUI PDF Viewer
Tags: dotnetmaui, cloud, development, mobile
Published: 2024-03-06 05:20:06

---
title: Load PDFs from Firebase Cloud Storage Using .NET MAUI PDF Viewer
published: true
date: 2024-03-04 12:53:34 UTC
tags: dotnetmaui, cloud, development, mobile
canonical_url: https://www.syncfusion.com/blogs/post/load-firebase-cloud-pdfs-in-maui.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy6emypoz4s3zlxqwprq.png
---
In today’s digital landscape, the ability to manage and access files in a secure, efficient manner is more important than ever. Among the myriad solutions available, [Firebase Cloud Storage](https://firebase.google.com/products/storage "Firebase Cloud Storage") is a popular one for storing and serving user-generated content. Its secure, scalable storage capabilities have made it a favorite among developers who need to manage files within their apps.

This blog will explain how to load a PDF document from Firebase Cloud Storage into a .NET MAUI app using the [Syncfusion .NET MAUI PDF Viewer](https://www.syncfusion.com/maui-controls/maui-pdf-viewer ".NET MAUI PDF Viewer").

## Set up Firebase console

If you already have Firebase Cloud Storage, skip the steps in this section. However, if you’re setting up a new storage, here’s a guide to help you:

1.Start by creating a new project in the [Firebase console](https://console.firebase.google.com/ "Firebase console").
2.Once you’ve created your project, navigate to the **Storage** option. You’ll find this under the **Build** menu in the Firebase console. Refer to the following image. ![Navigate to the Storage option](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Access-Firebase-Storage-in-the-Firebase-console-under-Build-after-project-creation.png)
3.Click on **Get Started** to begin setting up your cloud storage. You’ll need to configure your cloud storage security and location during this setup. We’ve chosen to **Start in test mode** for this blog. This allows anyone to read and write to the storage ![Set up cloud storage wizard](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Start-setting-up-cloud-storage.-Choose-test-mode-for-universal-access..png)

Then, select the location closest to you for optimal performance. ![Choose the nearest location for best performance](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Choose-the-nearest-location-for-best-performance..png)

4.After setting up your Firebase storage, you can start uploading and managing your files in the Storage’s **Files** tab. We need the storage bucket name to access the files in the .NET MAUI app. This can be found above the file list in your Firebase Storage (we need the name after the **"gs://"**).

![Find storage bucket name in Firebase (after 'gs') for .NET MAUI app](https://www.syncfusion.com/blogs/wp-content/uploads/2024/03/Find-storage-bucket-name-in-Firebase-after-gs-for-.NET-MAUI-app.png)

**Note:** It’s important to ensure that your storage has the proper read access for the files. This is crucial for accessing the files in your .NET MAUI app.

We’ve successfully configured the Firebase Cloud Storage. Let’s see how to access and manage its files in your .NET MAUI app.

## Loading a file in a .NET MAUI app

Follow these steps to load a file in a .NET MAUI application.

### Step 1: Create a New .NET MAUI application

Start by creating a [new .NET MAUI application](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Build your first .NET MAUI application") in Visual Studio.

### Step 2: Add NuGet package references

Next, add the [Syncfusion.Maui.PdfViewer](https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer "Syncfusion.Maui.PdfViewer NuGet package") and [FirebaseStorage.net](https://www.nuget.org/packages/FirebaseStorage.net "FirebaseStorage.net NuGet package") NuGet package references in your project from the [NuGet Gallery](https://www.nuget.org/ "NuGet Gallery").

### Step 3: Register the Syncfusion Core package handler

Register the handler for the Syncfusion core package in the **MauiProgram.cs** _file_.

Refer to the following code example.

```csharp
using Syncfusion.Maui.Core.Hosting;
namespace PdfViewerExample;
public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
	    var builder = MauiApp.CreateBuilder();
	    builder
		.UseMauiApp<App>()
		.ConfigureFonts(fonts =>
		{
		    fonts.AddFont(“OpenSans-Regular.ttf”, “OpenSansRegular”);
		    fonts.AddFont(“OpenSans-Semibold.ttf”, “OpenSansSemibold”);
		});
            builder.ConfigureSyncfusionCore();
            return builder. Build();
	}
}
```

### Step 4: Create a new ViewModel class

Using the MVVM binding technique, create a new view model class named **PdfViewerViewModel.cs**. In this class, implement the **LoadPDFFromFirebaseStorage()** method. Using this method, we’ll implement the logic to access PDF files from Firebase Cloud Storage by providing the Storage bucket name (refer to the Setup Firebase Console section) and file name.

Refer to the following code example.

```csharp
using Firebase.Storage;
using System.ComponentModel;
namespace PdfViewerExample
{
    internal class PdfViewerViewModel : INotifyPropertyChanged
    {
        private static string storageBucket = "<STORAGE BUCKET NAME>";
        private static string fileName = "<FILE NAME>";
        private Stream? m_pdfDocumentStream;
        /// <summary>
        /// An event to detect the change in the value of a property.
        /// </summary>
        public event PropertyChangedEventHandler? PropertyChanged;
        /// <summary>
        /// The PDF document stream that is loaded into the instance of the PDF Viewer. 
        /// </summary>
        public Stream PdfDocumentStream
        {
            get
            {
                return m_pdfDocumentStream;
            }
            set
            {
                m_pdfDocumentStream = value;
                OnPropertyChanged("PdfDocumentStream");
            }
        }
        /// <summary>
        /// Constructor of the view model class.
        /// </summary>
        public PdfViewerViewModel()
        {
            LoadPDFFromFirebaseStorage();
        }
        /// <summary>
        /// Load the PDF document from the Firebase storage.
        /// </summary>
        public async void LoadPDFFromFirebaseStorage()
        {
            HttpClient httpClient = new HttpClient();
            FirebaseStorage storage = new FirebaseStorage(storageBucket);
            string documentUrl = await storage.Child(fileName).GetDownloadUrlAsync();
            HttpResponseMessage response = await httpClient.GetAsync(documentUrl);
            PdfDocumentStream = await response.Content.ReadAsStreamAsync();
        }
        public void OnPropertyChanged(string name)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }
}
```

**Note:** Please replace the storage bucket name and file name before running the application.

**Step 5:**  In the  **MainPage.xaml** page, import the control namespace  **Syncfusion.Maui.PdfViewer**, initialize the  **SfPdfViewer**  control, and bind the created  **PdfDocumentStream**  to the [SfPdfViewer.DocumentSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_DocumentSource "SfPdfViewer.DocumentSource property for .NET MAUI PDF Viewer") property.

Refer to the following code example.

```xml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.PdfViewer;assembly=Syncfusion.Maui.PdfViewer"
             xmlns:local="clr-namespace:PdfViewerExample"      
             x:Class="PdfViewerExample.MainPage">
 <ContentPage.BindingContext>
  <local:PdfViewerViewModel x:Name="viewModel" />
 </ContentPage.BindingContext>
 <ContentPage.Content>
  <syncfusion:SfPdfViewer x:Name="pdfViewer"
                          DocumentSource="{Binding PdfDocumentStream}">
  </syncfusion:SfPdfViewer>
 </ContentPage.Content>
</ContentPage>
```

**Step 6:** Finally, run the app to view your PDF file.

## GitHub reference

For more details, refer to [load and view PDF files from Firebase in .NET MAUI app demo on GitHub](https://github.com/SyncfusionExamples/Load-and-view-PDF-files-from-Firebase-in-.NET-MAUI "Load and view PDF files from Firebase in .NET MAUI app demo on GitHub"). 

## Conclusion

Thanks for reading! I hope you now know how to load files from Firebase Cloud Storage and use them in your .NET MAUI app. Try this in your app and share your feedback in the comments below.

The [.NET MAUI PDF Viewer](https://www.syncfusion.com/maui-controls/maui-pdf-viewer ".NET MAUI PDF Viewer control") control lets you view PDF documents seamlessly and efficiently. It has highly interactive and customizable features such as magnification and page navigation.

The new version of Essential Studio is available from the [License and Downloads](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page") page for current customers. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Get free evaluation of the Essential Studio products") to check out our newest features.

You can share your feedback and questions through the comments section below or contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/support/tickets "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/maui "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Easily Manage Contacts in Your .NET MAUI App with SQLite and Perform CRUD Actions](https://www.syncfusion.com/blogs/post/manage-contact-maui-sqlite-crud.aspx "Blog: Easily Manage Contacts in Your .NET MAUI App with SQLite and Perform CRUD Actions")
- [Chart of the Week: Creating a .NET MAUI Bar Chart for the US’s Most Traded Goods with China](https://www.syncfusion.com/blogs/post/maui-bar-chart-traded-goods-us.aspx "Blog: Chart of the Week: Creating a .NET MAUI Bar Chart for the US’s Most Traded Goods with China")
- [Easily Replicate a Waiting List UI in .NET MAUI](https://www.syncfusion.com/blogs/post/waiting-list-ui-dotnet-maui.aspx "Blog: Easily Replicate a Waiting List UI in .NET MAUI")
- [Easily Load Appointments in .NET MAUI Scheduler with SQLite and Perform CRUD](https://www.syncfusion.com/blogs/post/load-maui-scheduler-sqlite-crud.aspx "Blog: Easily Load Appointments in .NET MAUI Scheduler with SQLite and Perform CRUD")