Angular & Firebase Cloud Storage for Image Upload Using AngularFire Library For Beginners

hello guys in this video I am going to show you how you can upload an image to Firebase storage after uploading the image to Firebase storage you will get a download URL so we will use set URL to show a preview of that image in our application so let's get into the video okay guys let's start building our application in order to create an angular project we need angular CLI installed so we need to use this command to install this package angular CLA package throughout our local mission I have already done that if you haven't done you can install the Hagler CLI you'll see this particular command so we can create an angular project using this command PNG new Under project name I'm going to name this project as image approach it will last for some questions whether I need the routing or not I don't need the routing I'm going with scss it's paid for this application to be installed package has got created successfully let's open this particular folder in vs Board using Code space Dot and open the integrated terminal you can click on the terminal and open a new terminal start the server application using that energy server for opening this particular application in Chrome let's wait for it to compile and open okay guys our application got uh compiled successfully let's go to the app component.html and make some changes let's have an input element of a file and then let's have a changeable for this and find this with the on file file change function [Music] and this will take the event argument let's create this function in the company [Music] it is event will be of type so this is and I will check if there is a file then let's cancel out that uh has a lot that file foreign successfully in order to work with Firebase we need uh these two modules let's import these two modules in this Imports declaration so first of all we need to like initialize the Firebase module so this angular file model we have initialize app function so we need to uh we need to provide the config like credentials let's go to Firebase console you see I have already created two applicants if you want you can create a new project by giving a name there so I already have I'm going to use this angular thread project so if you click on the build you can see the storage you need to click on the storage and uh if you are starting it for the first time it will ask you as that you need to create a a new like new storage so you can see like for now the storage is empty [Music] and also need to provide the credentials for this particular project we go to the settings where you can find the config data you can copy this data and paste it inside our environments so this is uh this object Network let's let's provide that uh let's provide a fairness config here you guys that's it like we have Engineers our address so what we need to do is whenever there is a change in file we need to upload this file to our Firebase storage so how we can do that is like first you need to initialize you need to create object for the Firebase storage service storage [Music] the import that storage [Music] foreign [Music] [Music] it's our part this part will be in this 20 slash something the file name which you are uploading with a file you will get the file name from this thing from this variable file variable inside this variable we will have that name also so we are using this name so on this Firebase storage will have a upload a function let's use that function to upload this file so let's uh let's have a variable called upload upload fast and this fire storage as a upload function we can upload the uh we can we need to provide the path as well as the data data transition the file which are which we are going to upload dot comma the file you guys since this is a promise you see this is an assistant task let's make this as let's avoid it waited and uh so this will return here download URL so let's uh let's get the URL from this upload task another one wait no task you can have a ref Dot okay download URL so when we upload an image this will return here download URL so you can use this so you can use this download URL when you are in your application to show a preview or to send or else you if you want to store this particular URL in your MySQL or any kind of database you can use this you want to store so if you see in the Firebase storage we have here we have a YT folder inside that YT folder we have this Firebase code.ng this is the URL which we got okay guys this is how you can upload an image to Firebase and get the downloading thank you for watching this video If you like this video please please give a like And subscribe to my channel thank you

Channel: Learn Programming With Uday

Views: 3,719

Keywords:

Id: RdHlm569jIU

Length: 9min 59sec (599 seconds)

Published: Sun Nov 27 2022