Angular 10 Firebase Cloud Storage Image Upload Using AngularFire Library Full Project For Beginners

uh hello friends today in this tutorial i will be telling you that how to upload images to firebase client cloud storage in angular 10 application so for this i will be using the angularfire library which is specifically available for angular applications so this is a short demo you can see that there is a choose file button and here inside this i can select this png file and let me show you this firebase console this is the storage tab if you go to it so you can see that no images is uploaded here so if i click the upload image button and now if i refresh it hopefully this image will be uploaded so if i refresh it so you will see a image being uploaded here so you can see that this is the image if you click this image you will see the short preview of the image alongside with the information the name of the image size type of the image you can see image slash png and the date is also there so july 15 2020 so in this tutorial we will be building this small project all the source code of this tutorial is given in the video description you can check the video description and go to my blog this is a link all the step by step instruction is given to you with screenshot and the code is also given so let's get started so first of all as i already told you we will be making use of this library which is angle of fire so this is the official angular library which is kind of inter interface library to firebase so first of all go to your command prompt of your newly created angular project and you need to execute this command which is npmi add the rate angular slash fire and also you need to install firebase library so enter it and install these two libraries so i have already installed it now i will just delete all the code from all the files and start from scratch so let me delete this code here and let me also delete all this code and also from my app.module.ts file let me also delete this code and start from scratch so basically if you have created your brand new angular project first and the foremost thing that you need to do you need to go to app.module.ts file so here you need to register your dependencies so first of all you need to import two dependencies that we have configured first is the let me just import from add the date angular slash fire slash storage so inside this what we want is that we want the angular fire storage module this module we want and the second module what we want is the again you need to write this line which is angular slash fire and from this you need to import uh angularfire module so just import this module these two modules and now we also need to add these two modules inside the imports array so first of all we will add the angular fire storage module and for registering this module which is angular file module we need to go to firebase console here so go to your go to your firebase project create the project here and then you need to go to this project overviews section go to settings and if you drag down you will see various kinds of apps which are registered with your project so let me take this and then you will be having these options which are api key authorization domain database url all that stuff so for this we only need we just need to copy paste all these things here so inside this angularfire module just right angle of fire module and there is a function inside this which is which is initialize app and inside this disk takes these options so pass these all options here so let me just format the document here so basically all these options are different for your app so don't copy mine so this is api key authorization domain database url storage bucket so basically this is a storage bucket on all your images will be uploaded so after making these changes close this app.module.ts file now inside your app.component we will make a simple label this will be image file so after this we will have a simple input type of file and we will be giving a change event handler so whenever the value changes this event will fire which is upload and this will have this event object passed to it so after this we will have a simple button when we click this button we will execute this function which is upload image and the label of the button will be simply um upload image and additionally attribute you can pass here except so it will only accept dot png or you can say here star png jpg so it only expects these extensions dot png and dot jpg so after this you can go to your app.component.ts file and first of all you can initialize these two functions which are upload and upload image so if you refresh the application so it will automatically compile this you can see that compiled successfully so if i open the application so you will see this is the choose file button if i choose this you will be redirected to the screen here so here you can select your files and there is upload image button so now what we want is that we need to declare a button a path variable here which will be of the type string so it will be holding the path of the file so in order to get the path of the file it is pretty easy you can store it inside this we can access this dot path so this will be equal to event dot target dot files 0 and now if i click the button here i can console log this path here of the image so if i refresh it and for this you need to open the console here so right click inspect here and go to console and now if i uh choose any sort of file here let me select this file and click upload image so you will see that this object will be rendered on the screen so here this is a path of the file this is the name size and type so all this information is there inside this object so now what we want is that we need to upload this so for uploading this we need to import a module which is important which is there inside the storage module which is angular fired storage not module angular file storage storage module is different which we have imported in app.module.ts so this is different from that so this is only angular file storage so now we just need to pass this as a in the constructor to make a constructor and make a private variable angular firebase and it is a type of angular file storage closed constructor and now inside this upload image after we console console log the path now we can make use of this uh you can see that af variable and there is a method inside this which is upload so now we can upload this image file so here you need to provide the directory name so here i can provide here let's suppose files and then you can concatenate with the random string math.random and followed by the path name so basically every time this will give you a unique file name and then you need to pass the actual path of the file that's it so the first argument is the file name and the second is the actual path to the image so that's the single line of code which will automatically go to firebase and upload this image to cloud storage so now we can test this application so before moving on we can go to storage and we can delete all the previous files which are there and start from scratch so this was the file let me delete it so click the delete button so now you will see no file is there so if i upload this here if i choose file here let me select this file png file if i upload image and now hopefully if i refresh here you will see this image will be uploaded and now you will see that this is a name is given to you it dynamically and this is the image you can also click it and it will open it in new tab where you can download this image onto your local system so this was the very simplest of tutorial on how to upload images to firebase cloud storage using angular 10 application using the angularfire library and for the source code just go to the video description and go to my blog and download the source code please like the video share the video and i will be seeing you the next video

Channel: Coding Shiksha

Views: 14,978

Keywords: coding shiksha, angular firebase cloud storage, angularfire, angularfirestore, angularfire save image to firebase, firebase angular upload image, angular image upload and retrieve with firebase storage, how to upload angular project on firebase, how to upload image to firebase storage, how to upload image to firebase storage in angular, angular image upload and preview, angular image upload and crop, angularfire image upload

Id: 2Vg3ri8WENE

Length: 11min 28sec (688 seconds)

Published: Wed Jul 15 2020