Introduction
Xamarin.

Forms code runs on multiple platforms - each of which has its own filesystem. This means that reading and writing files are the most easily done tasks using native file APIs on each platform. Alternatively, embedded resources are also a simpler solution to distribute the data files with an app.

Firebase

Firebase gives you functionality like analytics, databases, messaging and crash reporting so you can move quickly and focus on your users.
Xamarin
Firebase is a backend platform for building Web, Android, and iOS applications. It offers real-time database, different APIs, multiple authentication types and hosting platform. This is an introductory tutorial, which covers the basics of the Firebase platform and explains how to deal with its various components and sub-components.

Build apps with Firebase
For more information

Prerequisites
Setting up a Xamarin.Forms Project

Start by creating a new Xamarin.Forms project. You’ll learn more by going through the steps yourself.

Choose the Cross-platform App project under Visual C#-->Cross-platform in the New Project dialog.

Xamarin

Now, Select the Blank App and Choose Portable Class Library (PCL).
Xamarin
Subsequently, go to the solution. In there, you get all the files and sources of your project (PCL). Now, select XAML page and double-click to open the MainPage.Xaml page.

You now have a basic Xamarin.Forms app. Click the Play button to try it out.

Xamarin

Create a project in Firebase

In this step, create a project in Firebase. Go to the following link.

Click "Add Project".

Xamarin

Now, Give the project name and select your country then Read the terms. Afterward, click "Create project".

Xamarin
Now, your project is ready, click continue.

Xamarin
In this step Choose Storage under the Project Overview.

Xamarin
In this step, you can copy the API URL.

Xamarin

Now, you will change the following Storage Rules Afterward, click "Publish".

Xamarin

Setting up the User Interface

Go to MainPage.Xaml and write the following code.

MainPage.xaml
Xamarin
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  4. xmlns:local="clr-namespace:XamarinFirebase"
  5. x:Class="XamarinFirebase.MainPage">
  6. <ContentPage.Content>
  7. <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="StartAndExpand">
  8. <Image x:Name="imgBanner"></Image>
  9. <Image x:Name="imgChoosed" HeightRequest="200"></Image>
  10. <Button x:Name="btnPick" Text="Pick" Clicked="btnPick_Clicked"></Button>
  11. <Button x:Name="btnStore" Text="Store" Clicked="btnStore_Clicked"></Button>
  12. </StackLayout>
  13. </ContentPage.Content>
  14. </ContentPage>
Click the Play button to try it out.
Xamarin
NuGet Packages

Now, add the following NuGet Packages.
Go to Solution Explorer and select your solution. Right-click and select "Manage NuGet Packages for Solution".

Xam.Plugin.Media
Xamarin
Firebase.Storage
Xamarin

Permissions - for Android

In this step give required permissions to your app. The following permissions are a must for this app.
  1. CAMERA
  2. READ_EXTERNAL_STORAGE
  3. WRITE_EXTERNAL_STORAGE
AndroidManifest.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.companyname.XamarinFirebase">
  3. <uses-sdk android:minSdkVersion="15" />
  4. <uses-permission android:name="android.permission.CAMERA" />
  5. <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  6. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  7. <application android:label="XamarinFirebase.Android">
  8. <provider android:name="android.support.v4.content.FileProvider" android:authorities="com.companyname.XamarinFirebase.fileprovider" android:exported="false" android:grantUriPermissions="true">
  9. <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths"></meta-data>
  10. </provider>
  11. </application>
  12. </manifest>
In this step, create a xml file under Resource-->xml folder for get file paths.

Go to Solution—>Android —>Right click—>New—>Xml—> file_paths.xml

Now, write the following code to get file paths.

file_paths.xml
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <paths xmlns:android="http://schemas.android.com/apk/res/android">
  3. <external-files-path name="my_images" path="Pictures" />
  4. <external-files-path name="my_movies" path="Movies" />
  5. </paths>
Pick Image

Now, write the following code to pick an image from your device.

MainPage.xaml.cs
  1. private async void btnPick_Clicked(object sender, EventArgs e)
  2. {
  3. await CrossMedia.Current.Initialize();
  4. try
  5. {
  6. file = await Plugin.Media.CrossMedia.Current.PickPhotoAsync(new Plugin.Media.Abstractions.PickMediaOptions
  7. {
  8. PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium
  9. });
  10. if (file == null)
  11. return;
  12. imgChoosed.Source = ImageSource.FromStream(() =>
  13. {
  14. var imageStram = file.GetStream();
  15. return imageStram;
  16. });
  17. await StoreImages(file.GetStream());
  18. }
  19. catch (Exception ex)
  20. {
  21. Debug.WriteLine(ex.Message);
  22. }
  23. }
Store Image to Firebase
  1. private async void btnStore_Clicked(object sender, EventArgs e)
  2. {
  3. await StoreImages(file.GetStream());
  4. }
  6. public async Task<string> StoreImages(Stream imageStream)
  7. {
  8. var stroageImage = await new FirebaseStorage("xamarinfirebase-d3352.appspot.com")
  9. .Child("XamarinMonkeys")
  10. .Child("image.jpg")
  11. .PutAsync(imageStream);
  12. string imgurl = stroageImage;
  13. return imgurl;
  14. }
Full Code - MainPage.Xaml.cs

MainPage.Xaml.cs
  1. using Firebase.Storage;
  2. using Plugin.Media;
  3. using Plugin.Media.Abstractions;
  4. using System;
  5. using System.Collections.Generic;
  6. using System.Diagnostics;
  7. using System.IO;
  8. using System.Linq;
  9. using System.Text;
  10. using System.Threading.Tasks;
  11. using Xamarin.Forms;
  13. namespace XamarinFirebase
  14. {
  15. public partial class MainPage : ContentPage
  16. {
  17. MediaFile file;
  18. public MainPage()
  19. {
  20. InitializeComponent();
  22. imgBanner.Source = ImageSource.FromResource("XamarinFirebase.images.banner.png");
  23. imgChoosed.Source = ImageSource.FromResource("XamarinFirebase.images.default.jpg");
  24. }
  26. private async void btnPick_Clicked(object sender, EventArgs e)
  27. {
  28. await CrossMedia.Current.Initialize();
  29. try
  30. {
  31. file = await Plugin.Media.CrossMedia.Current.PickPhotoAsync(new Plugin.Media.Abstractions.PickMediaOptions
  32. {
  33. PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium
  34. });
  35. if (file == null)
  36. return;
  37. imgChoosed.Source = ImageSource.FromStream(() =>
  38. {
  39. var imageStram = file.GetStream();
  40. return imageStram;
  41. });
  42. await StoreImages(file.GetStream());
  43. }
  44. catch (Exception ex)
  45. {
  46. Debug.WriteLine(ex.Message);
  47. }
  48. }
  50. private async void btnStore_Clicked(object sender, EventArgs e)
  51. {
  52. await StoreImages(file.GetStream());
  53. }
  55. public async Task<string> StoreImages(Stream imageStream)
  56. {
  57. var stroageImage = await new FirebaseStorage("xamarinfirebase-d3352.appspot.com")
  58. .Child("XamarinMonkeys")
  59. .Child("image.jpg")
  60. .PutAsync(imageStream);
  61. string imgurl = stroageImage;
  62. return imgurl;
  63. }
  64. }
  65. }
Click the Play button to try it out.

Xamarin
Xamarin
I hope you have understood how to use Firebase Storage in Xamarin.Forms.

Thanks for reading. Please share comments and feedback.