Angular Image Upload and Retrieve with Firebase Storage

quick demo of this video tutorial in this video we will discuss how to upload and retrieve images from angular project in to firebase cloud storage for that we will create angular image gallery with firebase storage so here we have the final output from the tutorial so here we have listed all the existing images from firebase cloud storage into angular project in order to insert a new image you can click on this Demi navigation image insert new image here in order to select an image you can click on this to spell button here or you can click on this preview image also after selecting the image you can see the corresponding image preview here then you can enter the caption here and you can select the image category from this select drop down here finally you can submit deform the selected image will be stored in to firebase cloud storage and newly uploaded image URL will be saved into five base DB along with the metadata like caption and category now let me submit the form here after successful upload you can go to the gallery here so here we can see the newly uploaded image along with the caption I hope you will find this tutorial helpful for your upcoming firebase storage projects so please watch till the end of this video tutorial before starting this video I would like to ask you a favor if you found this video helpful please thumbs up this video if you are new here please please subscribe to this channel and click on the bell icon to get notification about my new videos most of the video LSN here also has a written blog post you can find the link in video description you can grab code from the as well what's up YouTube welcome to code affection in this video I will show you how to upload and retrieve images into firebase cloud storage using angular 7 before getting into this topic I would like to thank for your paypal donations for my previous books in order to make more helpful and quality tutorials like this you can support me through PayPal donations I have given the donation link in force command video description without further ado let's get started first of all we have to create an angular 7 application so we will create the project inside this folder directory here for that we have to execute few angular CLI commands from command prompt so first of all we have to open command prompt from this folder directory for that we can use this shortcut hold shift then right click on your mouse then here we have the option to open command prompt from this folder directory click on this option open command window here in order to create the angular project you can execute this angular CLI command ng new then application name I will name this application as image gallery with angular and firebase if we execute this command it will take long time to complete this command execution because of a number of NPM packages to be installed in order to skip the installation of unwanted NPM packages we can use this flag skip - and be hid under would you like to add angular routing type Y for yes hit enter which stash sheet format would you like to use a little stick with CSS hit enter so as a result of this command execution here we already have this project folder with project name image gallery with angular and firebase and here we are installing some default packages from NPM so it will take some time to complete this process please be patient finally I'm done with creation of the project now let's open this project inside vs core editor for that you can right click on this project folder here then click on this option open with code now let's open this brand new angular application inside the browser for that we have to terminal from this IDE so go to terminal the new terminal then you can execute this command ng serve then double - or it will compile and open this application in your default web browser so this is how the brand-new angular 7 application looks like as we have done in previous project I want to show the structure of the application that we want to build for that I want to create a new txt file I will name this as app structure dot txt I have already prepared the structure of the application so I will just paste that here this structure model or tree is typed by myself it will help me throughout the development of the application so inside this application we have the parent component images inside that we have two child components image and image lists and here we have this shared folder inside that we have the image service class which we have to inject inside these components here and then here we have the app module inside that we will configure firebase and here we have the app routing module for routing inside the application and here we have the default index dot HTML inside that we have to add CDN reference for bootstrap CSS and JavaScript files so first of all let's create the components and service class for the application for that I'm gonna open one more terminal here you can click on this plus button here in order to in order to create the component you can use this angular CLI command ng G for generate C for component and we have to create this parent component images so let me copy this and facing here if we execute this component creation command we will have these four files one component specific stylesheet we will have a component HTML file and we will have a test file with extension spec tortillas and we will have the component type script file we don't need these two files this component specific style sheet and this test file with extensions backdoor TS so in order to skip these two file creations we have to reset few flags here so first of all here we have to skip this test file for that you can reset this flag spec then we have to skip this style sheet file for that you can use this flag inline style is equal to false in short you can use this abbreviation - yes now hit enter so here we have created the parent component images with one HTML file and with one typescript file after this parent component we have to create these talc components image and image this for that you can reuse the previous command here just use the upward arrow so here we have the previous command now let's update this ng command for this image child component so we have to create this image component inside this images folder here so we can do this images forward slash image now hit enter so here we have the child component image like that we have to create this component image list so we can reuse the previous command here just hit upward arrow so here we have the previous command now we have to create this component image list inside images folder hit enter so here we have the corresponding component file image list now let's create this service class image inside this shared folder for that you can use this command ng G for generate s for service we have to create a service class v named image so we can type that here image and we want to create this image service class inside this shared folder so we have to specify that here shared forward slash image this service class command also creates a service test file with extension spec tortillas in order to skip that we have to use this flag spec as false now hit enter so here we have the corresponding image service cross inside the shared folder here now let's set up routing for this application for that here we have a separate module app routing module here inside this routes array we can add required routes so first of all I'm going to add a parent route so G's path is equal to image and corresponding component will be images component which is the parent component images component so this is a parent route into this we have to add two children routes so we can add this children over here inside that first of all we have a path for image component so path will be upload corresponding component will be image component so inside this route we will have a form to upload an image into firebase after that in order to list all of the inserted images we will have another route so path will be list then component will be image list component in order to access this route here we have to use this URL here image for slash upload in case of this route here we have to use image for slash list as a default out for this application I want to show this out here upload which will show the form to upload an image into five best toys and inside the second list we have to list or retrieve all the inserted image back into the application in order to as the default round I will have one more object like this part is empty because of default route then we have to redirect this into this route here image four slash upload which is throughout here okay it will show the form to upload an image and here we have to add this property path match full so inside this routes array we have specify a required route for this application in order to configure the application with given routes here we have passed this routes error for this function for route from router module so here we have done with routing for this application now let's check how it works first of all here we have the index dot HTML file inside that we have this component selector have route it will be replaced by the HTML from default component which is here app component so this selector app route will be replaced by the HTML inside this file app component HTML that is what we can see here so this HTML document is responsible for the default view of the application here instead of this default view of the application I want to show the text according to the route we have given here for that we just need to replace this with router outlet router outlet tag so when we navigate inside this route here image forward slash upload this selector router outlet will be replaced by the HTML from this parent component images which is here images dot component HTML inside that we have the default paragraph within this same we have the children route image component so we have to have another router outlet to display HTML from children components image component and image list component based on active route for that inside this or images component HTML here just below this default paragraph I'm gonna add one more outer outlet tag let me save this and back to the application here so by default we are inside this route image for slash upload if you remove this suffix from here then hit enter so we have the default route so it should be redirected to this route image for slash upload so for the current route we have parent component as images component so corresponding component HTML asleep is here and inside that we have another router outlet which is replaced by the children component HTML so inside that we have this text image works in same way if you navigate this route here image /list we should see the default paragraph from image list component also so here we have the paragraph image list works so these are the default components inside angular application now let's look how to customize them as per our requirement so first of all let's add bootstrap into this application so I will go to the corresponding official website get bootstrap comm then click on this get started button here and here we have the corresponding CSS reference let's copy this and then we can paste that inside this index dot HTML here you can do that just below this head end tag now let's grab corresponding JavaScript or friends then let's paste that just about this body and now inside this parent component HTML instead of this Deval paragraph here I want to show a heading for this application for that I will try to copy from this bootstrap documentation itself let's look for headings so I will use this same style here let me copy the corresponding row course HTML and I will replace that here instead of a normal paragraph I want to show this paragraph like a header so we can add this or class here or s3 so that it will have this style of h3 heading in order to style the head door I will add one more Clause display - 4 and inside this paragraph I just want to show this image gallery and inside this photo I just want to show this with firebase storage and let me copy this and pissing here with firebase storage and angular 7 now let me save this then back to the application here so here we have the title for this application image gallery with firebase storage and angular 7 now in order to align these components in respective positions I want to add grid system from bootstrap so first of all we will have a div with class row and then inside that we will have another div with class called md 8 and remaining 4 columns will be distributed over the left and right side so it will be offset md 2 now we have to enclose these black holes and router outlet inside this grid system so I will end the two divs here let me save all of these more if you creation so here we have the heading and based on the route we will show the component from corresponding children components here if it is upload instead of list we have to show a form to upload image into firebase storage so let's look how to upload image into firebase from angular form before that we have to create a firebase project for that you have to go to this website console dot firebase google.com Here I am already logged in with my gmail account now let's create a firebase project for that you can click on this add project button here I will name this project as angular image gallery at the bottom you have to accept these controller terms then create the project here we are inside the project overview inside this project we are going to use this firebase cloud storage and firebase real-time database inside this firebase storage we will store the image and in order to save the corresponding image details we will use the database here so first of all here we are inside the firebase cloud storage click on get started click on got it currently we don't have any image now go to this routes tab here as per the default permission in order to read or write we have to authenticate inside this firebase project using firebase auth system we don't need to implement firebase art system so I would just remove this if statement here then click on publish and back to these files you can dismiss this security rules warning message here when we upload an image into this vibe a storage related image details should be saved inside the database here for this application we will use real time database so you can click on this grey database here we will use this real time database interest so that we don't have any permission issue click on enable dismiss the security warning message here for not selecting any rules or permission for read or write operation so here we have setup the firebase DB with a real-time database and cloud file storage now we have to add this firebase Project connection details inside this angular project here for that go to project overview then pick on this web icon here just provide a nickname angular image gallery click on register app just copy this firebase config part here back to the angular application here then go to environment dot T is file inside environments folder here and we can just paste that copied property here instead of equals we have to use : in order to upload all the trip images inside this angular application we are going to use angular file 2 packets you can see the corresponding package github repository here just search for angular fire to click on this first link here the official angular library for firebase first of all we have to install these two packages inside the angular 7 application first of all we have to install this NPM package firebase and we have to install this angular fire package also so let me copy this installation command from here and back to the application I will open one more terminal here and I will paste that code here hit enter after a few seconds later we have completed with installation of the packages firebase and angular file now we have to configure angular fire module with the connection details that we have saved here for that open app module dot d s file here here we have to add imported meant for angular module we have to import that from angular four slash fire and we have to import angular fire module and we have to add this into this array here imports and we'll fire module inside that we have to call this initialize app function inside that we have to provide this connection details that we have saved inside this enviornments dot t as file so first of all we have to add the corresponding import statement here import statement and we have to import from environment folder inside that we have this file environment tortillas where we have a constant environment so let me copy this and paste in here now we can pass that here and we own men dot five base conflict in order to use angular file storage inside this application we have to import another module so let me copy this same import statement here and pasting below that we have to import this from angular fire four slash storage and we have to import angular file storage module now let's add the same module inside this imports array here in order to use real time database inside the application we have to import another module which is from fire database corresponding module name will be angular fire database module let me copy this module from here and pasting here so here we have done with configuration of this angular application for firebase project now let's look how to design a form to up load an image into firebase using reactive forms module first of all let's import the module so here we have the import statement we have to import that from angular forms and we have to import reactive forms module let's add the same module inside this imports array also in order to design the form we will use this component here image component so here we have to define a variable of the type forms group containing fields for the form so here we have the variable form template is equal to new form group inside this constructor we can pass an object containing fields of the form first of all we have caption is equal to new form control inside this constructor as a first parameter we can pass the default value of this field which is an empty string like this we have to add two more controls so let me copy this and pasting below that two times after caption we have category and we have image URL now using this form group variable form template we can design the form inside the corresponding component HTML here instead of this default paragraph I will start with bootstrap component card so here we have the deal with cross god for this do I want to set the width so I will add this style attribute here width is equal to 25 r.e.m inside this do I want to add one more deal so here we have the div with class god - now let's add the form element here we don't need this action attribute here instead of that we can add the directive form blue is equal to we have to provide the forum group variable here form template let me copy this and paste in here inside this form first of all I will add a control to select an image for upload so first of all I will have this div with class form - blue inside that first of all we will have a label we don't need this for attribute here inside the element it will display select file to upload after that we will have an input element of the type file you don't need this name or ID attribute here let me get rid of that we have to set the class as form - control which is from bootstrap after that as per the reactive forms approach we have to set this attribute form control name here we have to provide the property name corresponding to this field inside this object here so first of all we are going to add a field to upload an image so corresponding control name will be image URL so I have copied this let's paste that here after this I want to add an element to end our caption so let me copy this and pasting below that you don't need this label here we need a textbox corresponding control type will be 'text we don't need to set that here by default it will be of the type text so let me remove this class will be form control form control name will be captioned for this input control I want to set the placeholder placeholder is equal to caption just to identify this field is to end the caption for selected image now I want to add one more div with class form - group this is for category select drop down so we will have the Select control here select with class form - control you don't need this name or ID attribute here instead of that we can add this attribute form control name let me copy and peace here for this control we have to provide the control name as category we have added this select drop down in order to categorize selected images into various categories so for this set up drop down we have three options animal Whateley and bird so let me add corresponding options here value will be animal then value will be animal like this we have to add two more options vehicle learn after that we have bird by default this first option will be selected so we can add this selected attribute here so when this form is rendered this first option animal will be selected inside this drop-down finally we want to show a submit button for this form so I will add another div with same Clause form - group inside this div we will have a button which is of the type submit button text will be submit for this button we have to add few classes here so class first of all we will have the class BTN then we will have BTN - success then in order to move this submit button into right side we will have this floor right class floor - right so here we have almost done with the form design here actually we don't have to set the default value of this category select drop down here that we can set from the component type script file here itself that we can do in a bit for now let me save all of these modification here then back to the application here that's it here we have a form containing a file uploader to select an image for upload here we have a text box to enter the caption for selected image and here we have a drop down to categorize the selected image into animal or vehicle or bird category and finally we have the submit button in order to select an image for upload you can just click on this choose file button here and then just select the image selected image name will be displayed here along with that I want to show the selected image preview just about this control so let's look how we can do that for that I'm going to add a new control I am G we don't need this alt attribute here in order to show a default image for this control I'm going to add a new image into this assets folder here so here we have the assets folder inside that we need to add one more folder with name IMG and corresponding default image is here let me drag this image into this new folder i mg so here we have the image now let's set the corresponding image SRC here so it will be something like this for /s rc4 slash assets /img /a n corresponding image name for this image preview i want to sell width as 350 PX and height will be something 250px in order to align this image in center i want to enclose this control in another day with class text - sender let me move this into the new div here sorry we don't have to provide this SRC part here by default it will start from SRC let me save this and back to the application so here we have the default image preview so whenever we select an image for upload corresponding image preview should be displayed inside this IMG control currently we have said the image SRC with a static reference here instead of that we have to set this as a sea based on the selected image inside this file uploader here so let me cut this and I will use a variable here it will be IMG SRC this of the type string and is equal to I will paste the reference here and we can use this variable we have to enclose this SRC with square brackets and then here we just need to provide the variable name IMG SRC let me save this back to the application still it works now we just need to change this variable IMG SRC whenever there is a change from selected image now we have to show the preview whenever we select an image inside this upload a file uploader for that we can make use of this event change when there is a change from selected image we will call this function show preview inside this call we have to pass the event variable dollar event it has all the properties or state of this file uploaded now let's define this function show preview inside the component type script file here show preview with a single parameter event which is of the type in e inside this function first of all we will check whether we have an image for upload or not for that we just need to do this event dot target dot files and let me copy this and pasting here and we will check these files are if there is a event inside the force index in that case we can show the preview in IMG control for that first of all we will define a reader reader is equal to new file reader now for this free dog we will define a onload event so we can do this reader dot on load is equal to here we have to define a function so here we have the add a function with a single parameter e of the type in e inside this function we just need to update this variable IMG SRC for that we can do this this dot IMG SRC is equal to e dot target dot result in order to trigger this event we have to call the function read as data URL so we can do this reader dot read as data URL function can be called inside that we have to pass this exact file here event dot target dot files force image okay after that we have to save this selected image inside a variable for that I will define another variable selected image which is of the type in E and initially I will set it as null inside this function here we can reset that so we just need to do this this dot selected image is equal to we have to set this file here now if there is no selected image for upload we have to reset these properties IMG SRC and selected image it will happen whenever we select an image here after that if you click on the same button and then just click on this cancel here so here we have unselected the image in that case we have to reset these properties IMG SRC and selected image so here we have the else block inside that you can do this this dot img src is equal to here we have to provide the default image part reference which is here let me copy this and pasting here after that we have to reset the selected image file this dot selected image is equal to null let me save all of these modifications here and back to the application let me select an image for upload boom so here we have the preview of selected image let me reload this page by default here we have the image inside that we have this text click here to upload when we click on this image here we have to pop up another file explorer like this to select an image so let's look how we can show this our file explorer to select an image for upload when we select on this image preview here for that inside this component HTML here we just need to set a reference using the pound symbol file uploader and inside this IMG element here I will add a click event click is equal to file uploader here we just need to use this local reference file uploader from that we just need to call this click function here let me save this back to the application now if you click on this image here we have open the window to select and image okay so here we have almost done with this angular form with file upload now let's implement validation inside this form before that I want to add a submit event inside the form so here we have the form element now let's add the submit event here submit submit and we submit this form we will call another function on submit into this function we can pass an object containing current values of the fields for that we just need to do this we have this form group variable inside that we have this value property it contains T is an object with current values of the form elements now let's define this function on submit inside the typescript file here so here we have the function on submit with a single parameter form value we can define this on submit function later before that let's discuss how to implement form validation for that we need a variable is submitted so let's define the variable here is submitted which is of the type boolean initially I will set the value as false now inside this on submit function here when we submit the form we can set this variable to true so we just need to do this this dot is submitted is equal to true now let's look how to implement validation inside this form here we need two required fields first for this file which is to be uploaded into firebase and this caption text box also for that you can add the validation inside this form template of the type form group here in order to set this caption as a required field for the form you can do this we can just pass the validator inside this our constructor second parameter so we just need to do this validators dot required in same way we can set this image upload as required here so here we have configured reformed group variable with required validations now we have to show validation errors along with the corresponding contours if there is any validation so here we have the corresponding component HTML for this image upload we have to show the evaluation error just below this input file element for that I'm going to add a new div here div with class text - danger inside that we just need to show this this field is required we only want to show this validation error message when this input file has a required violation so in order to check whether this control has a validation error we have to check the evaluation errors of the property image URL from this form template variable in order to retrieve the corresponding property for this image URL from this form template variable we have to define another function inside this type script file here so here it is form controls inside this function we just need to return this return this dot form template inside that we have an array controls it has objects for each fields that we have defined inside this form group here okay now in order to call this function form controls from this component HTML file here we have to add this prefix get here now back to component HTML file we only want to show this error message when this file uploader has a required validation error so in order to show and hide this message based on the presence of validation error we can add this ng if detective here first of all it will check the property is submitted you only want to show this day after form is submitted so we can check this property is submitted and we have to call this new function from controls inside that we should have a property image URL and we'll check the errors if there is any error and which is required we have to show this error message this field is required like this you can add validation error message for the caption also so let me copy this and pissing below here for caption instead of image URL we have caption so here we have done with validation now let me save all of these modifications here and back to the application here if I try to submit this form without any of the required fields here you can see the validation error message these two fields are required okay now if I select an image this validation error message for image will be hidden now we have this caption as invalid if you try to endure' something inside that corresponding validation error will be gone now for this image uploader you can set the acceptable image type inside this application currently inside this window here we can see image files dot exe file PDF files if you want to restrict this file upload or only for images you have to do one more thing we can add one more attribute for this file uploader here it will be accept so accept is equal to image for slash star so it will accept any type of image whether it is the epic or PNG cetera if you want to restrict this file upload or only for few types of images you can specify the corresponding file extension here like this image forward slash PNG image four slash jpg for now I will allow all types of images so I will use star here let me save this back to the application click on this file upload oh so here we only have the image files now let's look how to upload selected image into firebase DB inside this application so here we have the on submit function inside that first of all we will check whether this form is valid or not for that we will add this if close here and we have to do this this dot form template dot value property sorry valid property can be checked if it is true this form is valid inside that we can upload the selected image into firebase cloud storage now let's look how to stow an image into firebase cloud storage first of all we have to provide the file path inside this cloud storage here if you just want to upload that image into this cloud storage directly you just want to give a name for that file or you can upload that into a separate file inside this cloud storage here so let's look how we can provide a file path in file storage here for that I will define a new variable here file path is equal to in this case I just want to give the exact name of the selected image in local file directory so I will provide the file name inside the backtick here then we have the dollar symbol now in order to get this selected image name we just need to do this we have saved the selected image inside this property here selected image so in order to retrieve the corresponding image name we just need to do this this dot selected image dot name if we do this we will have some duplicate file names in cloud storage in order to avoid that we will append the current date and time into this file name so here we have the underscore after that we have to provide the current date time so here we have the taller symbol new date dot get time function can be called so in this way we can avoid duplicate file name in firebase cloud storage instead of directly uploading this image into firebase storage I want to include that in another folder for example we can do this images forward slash so that newly uploaded image will be stored inside a new folder with named images instead of a general name images like this I just want to use the selected image category here ok for that you can do this Dola curly braces inside that we have to provide the selected category that we can retrieve from this property here form value dot category in order to work with a basic storage module we have to inject angularfire base storage class into this component here so inside this constructor we just need to do this private storage which is of the type angular fire storage so here is the class hit enter now let's look how to upload this selected image into firebase DB for that here we have already injected this angular file storage object into this variable storage now we can do this this dot storage dot upload function can be called as a first parameter to this function upload we can pass the file path that is here let me copy this and P thing here as a second parameter we have to pass the actual object which is selected here that we have saved inside this property here selected image this dot selected image as a result of this upload request we will get their response in order to work with that response we have to call this snap shortchanges function okay so this will return a stream of data which is basically an absorbent of the type upload task snapshot now we can subscribe to that absorber here by calling this subscribe function so basically this observable or stream of data will be sent from the firebase cloud storage at various stages of the file upload it might be like after five percentage of upload then 10 then 15 20 like that so we have to work with that response from firebase for that we have to use the pipe and finalized function from our X J's so here we have called this pipe function inside that we can use the finalize method from our X J's finalized actually this is a function inside Eric's days so we have to add the corresponding import statement here import statement we have to import that from Eric's js4 slash operators and we have to import finalize inside that we can define an arrow function or callback function so this finalized function will be called only when this upload is complete or 100 percentage complete so inside this callback function we can work with your response which is perceived as a result of complete upload of the file or image for example we want to retrieve the URL of uploaded image for that first of all we have to declare a new variable here which is file Ref so here we have the variable fire ruff actually it is a reference of the image which is to be uploaded so in order to get that reference we can do this this dot storage dot ref function can be called inside this function we can use this file path so that we can uniquely identify the image now inside this callback function here we just need to do this now let's retrieve the uploaded image URL for that we can do this file ref dot we can call this get download URL function actually it will retain and absorb so we can subscribe to that absorb will here subscribe inside that we can have a callback function with a single parameter you are L and here we have the function body inside this URL parameter we have the URL of newly uploaded image that we want to save inside this form value object property image source that we have specified inside the form template here so there will be a property image URL inside this form value property which is returned from the form value so that we can update after uploading the image so here it is inside this we will have a property image you are L and we will update that with the uploaded image URL now after a successful upload I want to reset the form that we have here for that I'm going to create a new function here reset form first of all we have to do this this dot form template dot reset function can be called so that the form controls will be reset to its initial stage after that we have to separately call another function set value inside that we can pass an object with initial values of these form controls here okay so first of all we have caption is equal to an empty string after that we have image URL I will set it as empty string after that we have category by default I will set it as animal after all I want to reset few properties first of all I will reset this IMG SRC here instead of assigning that here I will set that inside the function here this dot image SRC is equal to the default image path then we don't have to set the value of e submitted here that we can do inside this here this dot is submitted property can be reset here along with that we have to reset this property here selected image to null so here it is this dot selected image is equal to null now we can call this reset form function inside the ng on a lifecycle hook here so that when this component is shown the function reset form will be called they said for you can call the same function after uploading a new image so we can call the function here inside this get down URL subscribe function now let me save all of these modification here and back to the application here so here we have the form and we have reset the form its initial set since we have provided default values of the controls in reset form function here we have animal category as by default I will select an image from this images folder here I will select this bike image and I will give a caption something like bike then I will select the category as vehicle and submit this since form is reset to its initial State it should be uploaded into firebase let's check that inside the firebase project let me refresh this boom so here we have the uploaded image inside this folder vehicles sorry here we have added an extra square bracket let's remove that from here so inside this folder vehicle we have newly uploaded image if you want to remove this extension part from this file name here we just need to do this first of all here we have the name we want to split that with a dot so we will call this split function inside that we can provide the period symbol so this will return an array of items the last element of that array will be the extension of the image we want to remove that so we can call this slice function we want to start this slice process from 0th index and we want to remove the last item so we can use the backward direction so we will provide the minus 1 here after that we have to join them back and we will do that with period symbol now back to the firebase project here now along with this image we have to store data related to this image in real time database of this application that we can see here now let's look how to save details related to this image into real time database so first of all let me remove this image folder vehicle here let me select this click on delete now back to the angular application here in order to save currently uploaded image details in to firebase DB we have to define few functions inside this image service cross here first of all inside this this class we have to inject angular fat database class so we can do this private firebase which is of the type angular fire database along with that I will define a new property image detail list image detail list which is of the type angular fire list of the type in E now in order to insert image details record into five s DB I'm gonna define another function insert image details for this function we have a single parameter image details inside the function we just need to do this this dot image detail list or push function can be called inside that we can pass the image detail object so when we call this push function from this angular file list object here corresponding record will be inserted into a real time database of the project in order to work this approach first of all we have to initialize this property image detail list for that get image detail list inside that inside that we just need to do this this dot image detail list is equal to this dot list function can be called inside that we have to provide a node name it will be image details now we have to call this get image details list function before calling this insert function here so I will do that inside the parent component images here so here we have the child components image and image list and here we have the parent component images before displaying any of these components this component will be rendered so I'm going to call this get image detail dysfunction inside this pattern component first of all we have to inject that here so I will do this private service which is of the type image service now inside the entire lifecycle hook this dot service dot get image detail this function can be called so that this list property will be initialized now we can call this insert function inside this image component here inside this finalized function upload operation will be completed and inside this finalized function we have retrieved the URL of newly uploaded image after that we want to call the insert function that we have defined here into this parameter here we will pause caption image category and uploaded image URL so first of all we have to inject that service class here service which is of the type image service clause and here we just need to do this this dot service dot insert image details inside that we can pass this object form value so into this function image detail is we have passed newly uploaded image URL along with that we have passed caption and category of image now let me save all of these modification here and back to the application here here we have some problem let me check that inside the console it says get image detail list is not a function it is a function that we have defined inside the service class sometimes you will have such errors even after defining the function in natural project in those cases you just need to restart the process so here we have running our server in order to stop this execution just use the shortcut trol see then tag why and we just need to use the same command in this double dash or hit enter so here we have restarted the application currently there is no error previously we have this error after restarting this process we don't have any error now let's try to upload a new image first of all let me select an image so I will select this cat image from this window click on open so here we have the selected image preview now we have to provide a caption I will set it as cat category will be animal submit the form since form is reset to its initial state it should be uploaded let me check that here he load this page so we have stored that inside this folder animal so here we have the corresponding image with updated name now let's check that whether corresponding image details is saved in database for that let me open this database in another tab here we are inside the real-time database and here we have the node image details inside that we have a new node with caption category and corresponding image URL so here we have the image URL which we have just uploaded if you copy this image URL from here and then paste that in another tab hit enter boom you can see the image that we have just uploaded after a few seconds I have uploaded few images into this firebase project here into various categories like a vehicle bird and animal let me upload one more image I will select the category as bird submit corresponding image can be seen inside this bird folder here so here it is corresponding image details will be saved inside this real-time database here so here we have done with this angular form for uploading images into firebase cloud storage now we have to retrieve those images back to this application for that we have a separate route image for /list inside this route here we have to list all of the images that we have just uploaded for that first of all I'm gonna add a navigation from this form into the list route so back to the component HTML image component HTML here for that I'm going to add one more to just about the submit button do with class form - group inside that we will have an angle element which classes BTN then BTN or primary and we want to float this button to write so we can add this class float:right we don't need this href attribute here instead of that instead of that we can add router link attribute from angular and which is equal to image /list and inside this hyperlink I want to show go to gallery since we have two buttons here I want to enclose them inside another div I want to show them in a single draw so I will add a new div here div with class form - - raw and we want to enclose this deal with these two form groups div here each of the divs should take half of the width so I will add this class called MD - 8 we have to add the same class for the second div also in order to expand these two buttons to the parent div I will add one more class BTN block we have to add the same class for the submit button here sorry instead of corn md 8 we have to use call MD 6 so 6 plus 6 12 that's fine let me save all of these modifications here then back to the application so here we have the navigation to list route if you click on that we should navigate into 4 / image 4 / list but it is not working let me check that here yes here we have to provide the 4 / let me save this back to the application click on this go to gallery so here we are inside the list route here we have to list all of the image that we have just uploaded in order to retrieve and display those images back to this list route here first of all we have to retrieve these records from our real-time database first of all inside this image list component here first of all I am going to inject the survey's class so here we can do this private service which is of the type image service class and inside the service class here we have this list image detailed list which we have already initialized from our parent component image component now we can just do this this dot service dot we can access this property we can access this less image detail list from that we can call this function snap shortchanges it returns an absorber so we can subscribe that here so while subscribing to this observer return by calling this snap shortchanges function it will turn all the records from this real-time database under this node image details and inside this subscribe function we can have a callback function like this with a single parameter list inside this function we just need to return all of these three properties caption category image URL from all of these records for that we can use this map function list dot map and inside that we can have a callback function like this item from that we just need to return this return dot I jump dot payload property can be accessed from that property we just need to call this Val function so while calling this function it will return a JSON object containing these three properties now we have to enclose this inside a curly brace like this so this will return an array of objects containing properties caption category and image URL and we have to save that inside another array so I will define the array here image list it will be of the type an array so the return array from this map function call can be assigned to this array so this dot image list now using this image list array we can display the images in order to display them we have to define one more array draw index array row index array in order to display the uploaded images we are going to use an HTML table and corresponding table row indices will be saved inside this row index array so that it will help us to render the table in our component HTML now let's generate the raw indices before that I want to make this array of any type and we can initialize that here this dot raw index array is equal to I will just paste the expression here now let's look how it works first of all we have called this array function inside that we have given this expression here basically we are trying to divide the number of elements inside this image list array by 3 because we are dividing all of the items in three columns so if we divide the number of elements inside the array with 3 we will have the number of rows finally we have to round that to next maximum whole number so that is what we have done with this function call from math suppose if we have five elements inside the array 5 divided by 3 then we will have one point something by rounding that to next whole number we will get 2 so in total inside the table we will have two rows so we will pass that to inside this array function so it will retain an array containing two elements within thisis 0 & 1 in but inside that array value will be null we have called this keys function here so it will return a collection with values 0 & 1 in order to convert that into array we have called this from function from array I hope you understood this is how we can generate the raw indices now you think this array raw index array we can show those images inside this image list component here instead of this default paragraph we need a table so here we have the table we only want to show this table only when that array image list is populated that we can see here so here we have the array we only want to show this table when we fetch items into this array so you can use this ng-if directive here stock ng F is equal to image list inside that we are going to iterate the TR element for that we will use the detective in g 4n d 4 is equal to let i of this array image list sorry here we have to use this array row index array means we are going to I trade through this TR element as much as rows we have then we will have a TD element for 4 cell inside that we will have a div with class image box inside this day we will have an IMG control to display the image with a single class img' - fluid these classes are custom process which we have to define in our custom CSS file now we have to specify the SRC of this element and we can retrieve from this array image list image list and here we have to provide the index so it will be 3 into index this is just mathematics for the fourth column and for the first cell 3 into first time it will be 0 so 3 into 0 it will be 0 for the second row it will be 3 into 1 so it will be 3 so it will work fine as expected this is pure mathematics inside that item we will have an object from that object we have to retrieve this image URL property it contains the URL which we have saved here in the tail it will display the image from this cloud storage here ok you don't need to show this alt attribute here then below that we want to show the caption that we have provided for that I will use this span element with a single class image box - this inside that you want to show the property using string interpolation so I will just copy this expression from here and from that we have to show caption we have not completed yet let me save all of these modifications and back to the application here boo so here we have shown first image from each of these cells in total we have uploaded nine images now let's show remaining two columns for that I will just copy this and pissing below that two times and we just need to increment this index by one and here it will be two plus two now we have to define these classes custom classes image box image description etc for that I will update this Stars door CSS file here let me save all of these modifications back to the application here sorry we have to add them so we have to add them in separate TD cells so let me correct that here let me save all of these modifications here boom so here we have the image gallery that we have expected so here we have shown the images along with their caption now I want to do one more thing for cells which are inside second and third column we have to check whether that element exists or not so we just need to do this let me copy this and we will check the presence of corresponding element with ng-if directive on TB cell element so ng if if this corresponding or index is occupied then only we have to show this TD cell like this we have to add ng-if directive for the third cell here in this case index will be added by 2 so finally here we almost completed with angular firebase image gallery I want to do one more thing inside this application in our previous code we have added a navigation into this list route that you can see here so here is the navigation from this image file upload form into this gallery here like that I want to add one navigation from this image list into this form here so let's look how we can do that here we have used an anchor element while in case of this image gallery I am going to add a dummy image when we click on that we will navigate into this form here so let's look how we can do that so back to the vias code editor here we are inside the image in this component HTML let me duplicate this div here in our tab this TD cell will be the four cell on each row so I want to use this deal as a navigation from this list component into this form component here so I will add this ng-if directive here star ng if we only want to show this do whenever the index of this row is zero so if I is equal to zero then only we want to show this deal otherwise we can show this dip here so let me copy this and paste in here if it is not equal to zero and we want to show this for this navigation dip here I'm gonna use a dummy image so here is the image let me drag this and then I will move that into this IMG folder in our assets folder so here is the image now I want to refer that image inside this SRC attribute here for slash assets for /img /a odd jpg image description will be insert a new image insert new image now when we click on this image we have to navigate into this route here for slash image forward slash upload so that I'm going to enclose all of these two elements inside an anchor element so here is the anchor element and I'm going to add the router link attribute here forward slash image forward slash upload we want to enclose these two elements with the anchor element so I will cut this angle end tag and then I will paste that here since we have added this deme image for navigation purpose all of these images here should move one pace forward so this first image will be displayed here and the second one will be displayed here so we have to adjust the index accordingly so for this second image here corresponding index will be 3 into I okay and index of images in third column will be three into I plus one and for the images inside the first column index will be 3 into I minus 1 now we have to do one more thing inside this equation here we have to add one more element because we have added one dummy image for navigation so I will increment this length by one let me save all of these modifications here then back to the application we load this page so here we have the navigation image and rest of the 9 images are displayed as expected now if you click on this insert new image here we will navigate into the upload route here we can upload new images if you want to see all of the uploaded images you can click on this navigation go to gallery so that's it guys in this video we have discussed how to upload image from angular into firebase and how to retrieve them back to angular from firebase cloud storage you can download this project source code from the link given below in video description in order to make more helpful and quality tutorials like this you can support me through PayPal donation I have given the donation link in force command and video description please like and share this video with your friends and colleagues so that they can benefit from this have a nice day bye

Channel: CodAffection

Views: 36,925

Keywords: upload and retrieve firebse image in angular, angular 7 image upload to firebase, get image from firebase storage, angular firebase image upload, firebase cloud storage in angular, angular upload file to firebase, how to upload image to firebase in angular, angular 7 image upload, angular firebase storage, angularfire2 upload image, angular form for image upload, CodAffection, upload files from angular to firebase, angular firebase image gallery

Id: SZlt8VdWAIE

Length: 85min 47sec (5147 seconds)

Published: Mon May 20 2019