Upload Files to Firebase Storage from a Xamarin.Forms App

a lot of people have asked for a video about uploading files to firebase storage so here it is uploading files from xamarinforms.net maui or basically any c-sharp application here is what we'll see in this video i have this little sample app with a upload button a progress bar and there is a label that you can see right now if we click that upload button we can select the file and it will upload that to firebase storage and it will give us back the url where we can download that same file that we just uploaded that is what you're going to learn in this video let's go check it out now before we go dive into the code we have to go to our firebase console because we need to set up a project for this maybe you already have a project then you can reuse that one but i'm going to add a new project for this specifically so i'm going to click add project here by the way you can see a couple of other push notification samples here i got some good videos on push notifications as well so if that's something that you're interested into please check out the corners of your screen it should pop up right now or there's a link down in the video description below i'm going to add a new project and you can name this anything you want so i'm going to use this sample storage something like that click continue now you can hook this up to google analytics so you can know more you can do a b testing all these kinds of things i'm not going to do that for now but if this is a real live project then it might be something that you're interested in and here it set up a couple of resources for us so it's just provisioning because this is running on google cloud so this is just provisioning a couple of resources for us and whenever it's done we can go into the dashboard for this project now here on the left you can see all kinds of services that they have within firebase here i already also got a video on the real-time database so be sure to go check that one out as well but in this case we're going to focus on the storage and if you're going to go here for the first time there's all kinds of resources down here to help you but i'm just going to click the get started here and create a bucket that's what it's called basically a bucket is the thing where you're going to upload your files i think you can use this all for free up till i don't know one gigabyte of storage or something at least check out the limits for that exactly in the documentation there are some limits but you can go pretty far just using this for free without any billing so that's pretty cool now of course um the security rules so you can use this with authentication as well i don't have a video on that yet at the time of recording but if that's something that you're interested in please let me know down in the comments and i will make a video on authentication for firebase and also maybe with the combination with storage so that you can authenticate people from your app and only let authenticated people upload something to your storage now the rules and the security is very important of course what i'm going to do is implement a little hack so i can just focus on the storage part and uploading files and not so much about the authentication beware do not do this in production because then everyone can upload to your storage and that's probably not something that you want so i'm going to do that in a little bit i'm going to click next and we can set the storage cloud location so i'm going to click west europe but you probably want to choose something that is close to you so that the uploading goes a little bit faster so click done and then it's going to create the default bucket now if you have a paid plan you can have multiple buckets so you can see that kind of as a database or multiple databases then where you can you know upload your files to but in this case it's not really a database so they're calling it a bucket so that's how that works now it's setting up the security rules and then it takes me to my bucket um first thing i'm going to do is go over here to the rules like i mentioned and um here you can set up the rules if that's what you want but here a simple hack to test without authentication is to make this equal so request auth is equal to no so it doesn't take into account authentication and then anyone can just do that now again i want to stress do not do this in production let me know if you want to know about authentication if you can't figure that out yourself let me know down in the comments and i'll make sure i will create that but this is just to implement it for now now if you go back to files right here we can see that little bucket remember this url right here um we need that in a little bit to point our client to and that's the way where we're going to upload our files so we need this one as well and for the rest we don't really need to do anything here so i'm just gonna copy this link actually and i'm going to switch over to visual studio to implement the actual code so here we are in visual studio 2019 for mac on the left you can see a file new xamarin forms application that will be the sample app for this video and on the right you can see that same app running on ios now the thing i'm going to show you is entirely in the shared project so out of the box this automatically works for ios android all the platforms that are supported for xamarin forms uwp you name it it will just work all the same i'm going to implement a couple of things here so first off let's start with this title right here firebase storage sample and i'm going to remove all the labels and i'm going to add a button first with the text upload and implement a clicked handler for that and what i'm going to do next is also have a progress bar you'll see why in a little bit well how many reasons can you have to have a progress bar right it's going to show you some progress progress bar i'm going to give that a name so i can reference it in my code behind and i'm going to add a little label here also with a name which is going to be the download link alright so i'm going to save this there is an issue in my machine where hot reload doesn't work at the moment so don't worry about that normally whenever you save that xml file the example file it will automatically show up in your running app with the xaml hot reload which is totally amazing but i need to restart the application in a little bit because what i'm going to do now is install a nuget because of course there is a plugin that will make our life so much easier so i'm going to go to our solution explorer and i'm going to click on the shared project right click and i'm going to say manage nuget packages then i'm going to search for firebase storage and it should come up with firebasestorage.net now i'll be honest the package is a little bit older the last update is from 2018 which is at the time it actually november 2018 so at the time that's three years old but it still seems to work so that's kind of something and there doesn't seem to be a lot of packages out there that do things with firebase um in c sharp so you know this is this is what we got and um let's just use this one add package and it's going to install this on our little project so we're going to wait for that a little bit actually while we do let's just go over to our code behind so i'm going to go to our solution explorer and in our main page the main page example dot cs we can see that our button handler is implemented i just have to accept these license agreements here so our button clicked handler is implemented here and what we're going to do first is get a photo from our photo gallery is a weight examine dot essentials dot media picker dot pick photo async so this is just going to allow us to pick a photo from the gallery or anywhere and we can use that photo to upload that to firebase storage i'm going to have to make this a sync in order to make that work so also i have a video on the media picker in detail as well it should pop up on your screen right now so be sure to check that one out let's check if the photo is actually picked so if we don't run into any unexpected crashes so if it's uh well if it is null then we're going to return um else we're going to continue and what we can do now with the package that we just installed the firebase storage.net you can see here at the top that it's now successfully installed so let's start implementing some code here we can do new firebase storage now it's probably not going to know this but we're going to use intellisense to figure that out for us see we need to add using firebase.storage it will add that here at the top and now we can use this new firebase storage and what we need to do is configure here a storage bucket so that's the thing that we just set up right and mind you the url has gs colon slash kind of like a web url but we do not need this so you just need the the rest of the url you don't need the little protocol thingy right here so now it will know what bucket to use and we're also going to specify some options which is going to be particularly useful whenever you are using the authentication so here we are going to say new firebase storage options um and we can just initialize it like this you can see it has the auth token async factory so that's where you can put in the auth token like i said let me know if you want to know about how to use this with authentication we can say throw on cancel we can say http client timeout so there's a couple of options here that you can use um let's just say we're going to do throw on cancel it will then throw an exception whenever you cancel the upload or maybe something happens so let's set that to true and from here it's kind of awesome because they implemented a fluent syntax to kind of upload your files so what we can say here is child and that will create a subfolder so that will create a folder inside of our bucket and now we can say did you subscribe and we can just do more children here so to my channel yet i don't know who wants to name their folders like that but i certainly would love you to subscribe to my channel so if you haven't done that already please do and then whenever you're done you can say well you still have to name the file so that's also a child and you can say my photo dot png you probably want to check if it's actually a png or a jpeg or something like that actually i think we can just say photo dot file name so let's just use that and what you can then say here you can see all the the other apis we can delete async as well we can get the download url for downloading the image again we can get some metadata whatever you know you cannot use this only for uploading but also for downloading and getting some some metadata but what we want to do is to do the put async so we're going to actually put that on our bucket and then we can just say await we need to do the stream so we can say await open greet async there we go so we need to do this and now it will get that stream from the photo and it will put that on our bucket uh i don't know why this is not happy we should await this probably so await that oh no we don't want to await that wait because what i want to do is put this into a task so we're not going to await it right now we're not going to run it right now because what is a really cool thing we can do is that we can also track the progress so we can say task dot progress dot progress change which is an event handler and we can add something to that now this is just another event handler so let's say well sender and i don't know args something like that and we can do that in line or of course you can create a separate method for that if that's what you want and here we can say do our progress bar dot progress is args dot here we go percentage or position or whatever so you have a couple of things here to track the progress of the file upload now in this case i think it's going to be pretty quick because i have a good upload here and the image is not going to be that big so it's probably going to be super fast but this will just give you an idea on how it's going and so we have that in place and what we can then do is say var download link is await task so now the task is actually going to run and i think our task will automatically return kind of like the download url so we can do now our download link oh the naming is a little bit confusing but this is my label that i put on my page dot text is download link whoops the other link see this is very confusing but this is a string and i think this will return the the link that we can download the image from so maybe you have a use case where you immediately need that link and you can capture it this way but you can get it later as well if you um you know from the apis here from the firebase storage um we could get the download url as well now we have implemented all this so let me quickly stop and restart the application and see how this app actually works in action so what we expect to see is a very simple ui where we can just click the upload button we can pick an image and it will upload that image to our firebase bucket easy as that easy peasy right it isn't a very complex little piece of code here our app is coming back up and i'm going to click the upload button right here it will come up with the images so let's do these lovely flowers right here we're going to upload that you can see the progress bar fills pretty quickly and here you can see the download url for our image as well now let's quickly hop over back to our firebase console here i'm going to reload this and you will see that here in our bucket that we just mentioned we now have subfolders with did you subscribe to my channel yet and here is our image that is how you can upload images from xamarin forms or dotnet maui or any other c sharp program to firebase storage i already mentioned it but there is a couple of things to consider here so this plugin is a couple of years old um so i'm not sure if it's still maintained i see there is still activity on the repository but you never know what that means and i i really couldn't find any other libraries that do this and then you have to do all kinds of advanced stuff with rest apis google has some c sharp libraries out there but they're not that easy to use if i missed any library that you know is there please let me know in the comments because i would be glad to learn about some new stuff here and the other thing of course is we need to use the authentication so let me know in the comments if that is something that you're interested in but other than that i mean this plugin still works so you know as long as it works then it's fine right um and um yeah just just use it and whenever it stops working then you'll have to worry about it then but at least now you know how to upload files to file based storage thank you so much for watching again one of my videos please click that like button if you have liked this video actually please check if that subscribe button is already lit up if not please click it so you'll be subscribed to my channel and my content will come to your feed automatically now like i already mentioned i have videos about other firebase stuff it will pop up on your screen somewhere here so be sure to click and check that out and i'll be seeing you for my next video keep coding [Music]

Channel: Gerald Versluis

Views: 1,114

Keywords: xamarin forms, xamarin firebase storage, firebase tutorial, xamarin tutorial, xamarin 101, xamarin forms tutorial, xamarin.forms 101, firebase storage, xamarin firebase, xamarin upload image to server, xamarin upload image, xamarin upload file, xamarin forms upload file, file upload in xamarin forms, firebase storage - upload and retrieve images, firebase tutorial for beginners, xamarin forms 101, FirebaseStorage.net, Xamarin Forms 5, firebase xamarin forms tutorial

Id: IsbhleYMpsw

Length: 15min 45sec (945 seconds)

Published: Thu Nov 18 2021