Uploading Image with Angular and Firebase Storage: Angular Image Cropper Part 2

hey everyone so in my previous video we created the image Cropper control um but it was only giving back a blob to the parent component and this video we're going to see how to add Firebase upload functionality to this so that it automatically uploads the image as well for example we're going to select a photo here and let's say I select this photo and let's say I click done on this it's going to show a nice loader and it's going to upload it to Firebase and it's going to then show the image with the URL and then when we go to Firebase and we refresh this you'll be able to see the image has been uploaded here great so let's get started okay so let's start from where we left off so we created the image Cropper control here which takes in the width and the height we take back an image ready output which gives back our image blob that has been cropped so the first thing now to upload it to Firebase storage is for us to enable it on Firebase storage so let's go back to our Firebase console here console. fire. gooogle and you'll need to log in with Google with your Google account here and you can add a project here let's call our project image Cropper demo let's continue with this disable Google analytics and let's create the project but let it complete itself great so it says that your new project is ready let's continue and then it shows you that you can make a new web app here so we need to click on web here let's create a new web app we're going to call this image Cropper control upload and register app okay and then it gives you some information here about the configuration for the app now this is for JavaScript but since we're using angular fire we just want this Firebase config and we're just going to copy this in here and go in our app.config and just copy this here because we want we would want to use this later on okay so next we want to continue to the console and next what we want to do is we want to enable storage on our app here so let's enable storage here let's click build storage and we see that we get a get started button here let's click on this and it says that we need to start in we need to set some ground uh security rules so let's start in test mode so that we can do this quickly let's do test mode and let's do next it's going to show us our location that you need to set it just set it to the closest to your um app and it's going to be fine we click on done and now it's creating the default bucket so that we can use the storage API great so this is all done and this is our bucket so we're going to see any images uploaded here okay so this is done now now let's get back to our angular app and let's install angular fire which we're using as a rapper library on top of the Firebase JavaScript SDK so to install that what we're going to do is we're going to do npm install angular fire save and I'm going to let this complete great so this has completed the installation let's go to our package.json and see what has been installed so you can see angular fire has been installed here with version 7.6.1 great now let's add some initialization of the Firebase app in our providers here in the app.config file so to do that what we're going to do is we are going to to add import providers from this is an angular core function which allows us to specify our providers or any modules that we are importing the providers from in uh in the form of an array so the first one we want to do is we want to use the Firebase app so let's import that here and what we're going to do is we are going to use angular fire app and from here we get two data structures one is provide Firebase app and the second is initialize app okay and here then we are going to do provide Firebase app and inside of it we going to return the initialize app function now this initialize app is going to take in this config that we copied in from the Firebase console okay then we also need to initialize the storage app and you need to do this for any extra feature that you use from Firebase so let's import that from here as well and let's do angular fire storage and here we get provide storage and get storage and then in the second array entry we are going to give provide storage here and we're going to return get storage and this function okay so this is all we need to set it up let's save this and let's see whether we getting any errors great no errors our app works great okay so now let's move on to the changes that we need to make in the app so we're going to go in our app. component first and let's see how our inputs and outputs are going to change here so currently we only take the width and the height now what we need here is we also need to specify a Firebase image path or the image path in where we want to store our image this so here we are also going to give a path input and let's say we give the path input as my Images slash image great and then the image ready function should give back the uploaded image to Firebase which will be in the form of a URL for that image so what we're going to get here will be a bit different so let's change that we're not going to get a blob here we're going to get a string which we which would be an image URL and let's just show the image control gave back this URL this URL and we're going to just say image URL all right and obviously it gives an error because the type here is wrong so let's now go back go to our image control component the meat of the app and see where we need to change these things so the first thing we need to do is we need to add the new input that we added so let's say we are going to add on the same pattern as before we're going to add a signal since this will be string we're going to call this empty and in the input now this is also going to be required because without a path we can't really upload the Firebase image so so we're going to use path and we're going to give string and then we're just going to set the value of the signal as we have done with the other inputs above okay so this is done now let's also change the output where is the output here so the output needs to be a string okay okay now we get a string of errors and that is because the final thing that we are storing here is the cropped image and it is in the form of a croper dialogue result or it is undefined now in our case now the final image is going to be a URL so let's refactor this let's rename this and let's name this to cropped image URL and this type is going to be a string or undefined so undefined will mean that we don't have any image set yet and uh string would mean that we have the URL ready after uploading to Firebase okay so we have a couple of issues here so if this cro image URL we just need to send back the URL not the image URL property for it and in fact we can make this even shorter by doing this this. cropped image URL if this is undefined we're just going to use placeholder so this can be really simple and in fact we can just remove this as well we can just give back this great now obviously we're getting a couple of errors here and let's see those errors one by one then the other place where we have changed is that the cropped image URL does not return return a blob anymore so we just going to return the cropped image URL in the effect for the output okay so this should work and the last error is this so this is where we need to make our changes because this is where the CER dialogue is closing and we get the result result of our image cropped so now when we get the result of our image cro what do we want to do we want to call another function which is going to upload that image or that blob to Firebase so let's create that function and let's say we call this upload image and here we going to just pass in the blob that we get great okay now we need to create this image so let's create this image here uh let's create this function here upload image Let's see we have a blob here okay now what do we do in this image this this will contain the meat of our functionality of the Firebase uploading so first of all what we need to do is we need to make it into an async function because it contains some multiple asynchronous operations and then obviously we need to inject our storage app instance that we initialized here in our app. config so to do that we're going to do storage is equals to inject we're going to do storage now this storage is something else so we need to make sure that we have the correct storage here so we are going to import it from angular fire storage so we are going to do storage from here okay great so we have the storage here what do we need to do to upload an image now the first thing we need to do there is to actually just create a storage reference this storage reference basically refers to a location in the bucket itself our storage bucket itself so this takes in the path and this uses the ref function from angular fire storage and the first thing it takes is the storage instance reference and the second thing would be the path where is the path we are storing it in our signal here great and the next thing we need to do is to upload our blob so we're going to use the upload bytes function again from angular fire storage and inside of this we are going to give this dos or rather we can just give the storage reference and the last thing we can give is the data which is our blob okay now this is an asynchronous function so this returns a promise this needs to have a weight and this going this gives us back an upload task now when this upload bites completes we're going to get the the upload task through which we can get the download URL for our image so how do we get that let's see we give download URL is equals to await get download URL this is another function which we can get from angular fire storage and here we can just use the upload task that we got at the top there and use the reference within it okay so we get the download URL here now what do we do with the download URL once we get that all we need to do is we have our cropped image URL signal we can just set it to that great okay that's it okay let's test this out to see whether this works so let's do select photo here and let's go in our photos here and let's this and let's see done here and yes after a while you can see that the image has been uploaded here and let's go to our fireus console here and see whether we get this so you can see here my images we get the image on the same path that we wanted great so this works but one issue you noticed was that there was a pause while while the image was uploaded we didn't actually know what was happening so let's add some ux to it by using a material progress spinner or loader here so that our user knows when the image is being uploaded and so that the user Waits so for that we'll need to change our templates a bit more and so let's change those templates a bit uh currently we have a div here let's call the container div as control container okay and then then we add a subd inside of it which is going to contain only the image now we doing this because we want the material progress spinner to appear right in the center of that image placeholder so this is going to help in that okay so this inside div will be the image container or in fact before styling let's add the mat progress spinner is so to add the mat progress spinner let's import it from here angular material progress spinner and once I do that I do get the auto correct so I can just use mat progress spinner module and then I get this helpful thing and it's automatically added here okay so Matt progress spinner and let's add this mat progress spinner in this image container diff so we're going to do matte progress spinner and inside of this mat progress spinner we're going to give some properties to it okay so the first property would be the diameter now this diameter actually tells you how big of the loader that is so 50 pixels is fine for us then we need to set the mode which tells us the mode in which this loader is going to operate so we want it to be indeterminate and that's it so now when we use this we are going to see a sort of very weird layout so what do we want to do here now we want to change the styling a bit so let's first change this div to be the control container okay then for the image container it will be similar but the image will be inside of it first of all in fact a child of it and the Border radius here we are going to give both of them we're going to inherit this border radius from image container and let's give the Border radius here instead this looks fine now let's style the matte progress spinner we're going to Target the matte progress spinner component Direct ly so in that case we don't need to use the dot here which is for class names so for the mat progress spinner we need to absolutely position it within this so we need to make the parent as relatively positioned let's make it position relative and for the mat progress spinner we're going to do it position absolute this is going to make the progress spinner on top of the image itself okay it doesn't because we haven't given it any top or bottom as yet so let's give the top as 50% and the left as 50% as well to make it in the center and now you can see that it is somewhat in the center but that is because the progress Spinner's height and width are not taken into consideration so to do that what we're going to do is we're going to use a little trick CSS trick using the transform and we're going to translate or move it by about half of its height and width on the left and on the top great so this ensures that the spinner is in the middle now we need to do another thing because this doesn't look that good we would we would need the background image to be a bit uh dimmed so that that it shows the loader more prominently and it sort of uh Heralds to the user that something is happening to that image and it's not really um ready to be used so we also going to add a style opacity here or opacity here and let's call this 5K so yes it gives us a faded look so that the loader is more visible but of course we don't want to show the loader all the time when do we want to show the loader now how do we control that so to control that let's store its state in the form of a signal let's create a new signal here and let's call this signal as uploading this will be a Boolean signal and the initial value will be false and how do we change this and when do we change this so as you can see in our upload image before starting the upload we are going to do uploading. set true and then when we have set the image we are going to hide that is we going to do uploading do set false and of course now we want to add the conditions here so we're going to add an NG if this will only show while the uploading has a truth and also we need to change this opacity based on that as well so if for example uploading is true we are going to give it 05 otherwise it's going to revert back to one great now let's try all of this out and see whether we get the right values okay we're going to select the photo let's select this one let's select a very close crop of this let's click done and you can see that the loader appears and when it's uploaded it shows the picture here and we can go back to our image again and we can see if the new image has has been uploaded great you can see the new image has been uploaded and we can also check whether our component is giving back our URL so yes the image control gave back this URL and this is the URL and we can access it as you can see we get the image here as well great so short and sweet this was an image Cropper control which actually uploads to Firebase storage and then gives you back the URL so this component can be used anywhere that you would like and of course you can add any configuration for the configuration that you require for your app here now you can store this URL the image URL um in your app in your form as part of your form or as part of your database and you can make any use for it as you want so I hope you like this video and U if you haven't please subscribe to my channel so that I can keep bringing you such videos like this thanks for watching and have a nice day

Channel: Zoaib Khan

Views: 1,801

Keywords:

Id: wrDKVgeGWnw

Length: 15min 17sec (917 seconds)

Published: Fri Oct 06 2023