Angular with Firebase course - Firebase Storage - 02 Image Uploads

[Music] all right welcome back uh so we've got a placeholder uh to start doing some image uploads uh the first thing we've got to do is we've got to add uh angular fire um so I'm going to go look at my my book links and see if I can't find a little bit of advice for angular Fire 2 setup um and so this is the same as it's always been no real change to this guy uh so I'm just going to come over here to terminal open up a new window terminal sorry I guess I should open up a new tab of terminal uh and I'll paste that in let that happen um so far angular fire has been pretty stable throughout the course with the setup uh you can see that you're going to need your environment uh so I guess I should go over and get my environment so I go over to the overview um and I kind of grab this chunk there uh and I'm going to put that into both my H prod and my also Dev environment just makes life easier uh whenever you're just kind of doing simple stuff so this is my fire base config uh and this is my uh API key information and then I like trailing commas so I put a trailing Comm on there as well uh and then I'm going to do same the same thing in my Dev environment so I've got those two set up uh next thing it wants me to do in the instructions uh is it wants me to go into the app module I can do that and it wants me to add those two Imports go over into my app module and add those two Imports uh and then it wants me to add uh this right here initialize app I can do that uh these these steps are unchanged by the way uh angular material changed a bunch lately uh but these steps are all pretty much the same uh after you do the high level uh you've also got to get the individual ones we're only using the database this time um and since we're only using the database we don't have to worry about the off import so I'm just going to grab the database there uh and then the database line from right in here cool so I think that'll do the uh the Firebase setup uh and then the other thing I want to do is I want to do um angular Flex layout set up we're not going to do angular material to this time um it's a pretty simple app and we just we don't really need it um and angular material or sorry angular fire uh and angular Flex layout are both pretty quick installs uh so I'll do them with you if we're doing angular materials install I might make do that all by yourself we'll grab the import here uh things you're pretty accustomed to uh and then the last one we have to add here is the uh Flex layout module great so I could probably test those a little bit but I feel pretty good about those things uh so I'll just say add angular Fire 2 and flex layout so now we've got those in our app next thing I had to do is I had to go uh play with some HTML so right now my htmls all the boiler plate stuff don't need any of that uh so goodbye to all of that instead I'm going to start typing uh just some of my own stuff here so I'm going to have this top area which is going to be for Featured photos so I'm just going to make it an H1 inside this H1 I'm going to start off with an input element uh of type equal to uh file so this will be our first time we've ever used an input of type file but that's kind of a neat thing to do uh and whenever it changes so it it changes when somebody uploads a file uh we'll call a function and we'll call featured photo selected and we're going to pass in the event uh so you pass in the event it turns out that the only thing that the that typescript really needs is it needs a reference to this input element so you're passing at the event uh just so that you can pull the the Target off of it which is which is this element uh so you pass that thing in uh I guess technically with inputs you should end them with Slash um less than but but to be honest it doesn't matter I'm G to try it without it um and then I'll just stick on an HR after that uh cool so let's come over and see what this looks like uh looks like I accidentally closed my Local Host um so this says featured photos and it says choose file um it's kind of neat what you get for free so if you click on choose file it actually open opens up like a photo picker uh which is cool now if you pick a photo and you hit okay uh it's going to crash your app uh because you said to call a function uh which you haven't made yet right so it obviously crashed so featured photo selected it's not a function so what I want to do is I want to copy this uh and go put it over in my typescript um and so instead of title app I just want to put it right here um and so here's where it gets uh you know more interesting so we're starting to do things in typescript um so something got passed into this let's go ahead and call it an event uh and the type of this event just because I've looked it up once upon a time is an MS uh input method context uh which is of course a mouthful uh but that's what it is um bear with me with some of these crazy types and then we'll we'll show you a way to clean it up later and the only thing I care about um is the target uh and the target is an HTML input element we could be more specific than that too uh but I'm just going to stick with um you know HTML input element and that's coming from the event.target now it yells at you because event.target isn't necessarily an input element uh so really you should cast it uh to say that it is an HTML input element uh which is exciting and then from that input element what I want is I want a list of files uh and it's of type file list list uh and it's equal to target. file list just files and then from those files all I really want is a singular file so I really just want a singular file and so this is files um array element zero and then what I want to do is I just want to print out uh selected file name um and I'm just going to print out what the uh what the file name is so file. name is what I'm going to print out uh cool so let's go ahead and try this uh and then we'll see if we can make it kind of a little simpler after that so what this should do uh once it's recompiled uh is when you click on choose file I'll just say7 here um and it just says selected file name7 uh which is a JPEG kind of a crazy file name but that's fine now what we've done here is totally functional um but really we did a lot of work just to get the file um and you'll notice that we we knew what type this was and we knew what type this was and we casted it um and to be honest like whenever it gets that complex I just I just cheat right so I just say event uh you're an any right um and then I just cut to the chase I just say event. target. file zero and this is one thing that I like about typescript is if you ever like find that the types are getting in your way um you can just get rid of them right because it really just trans files to JavaScript and so I'm just going to say hey this event is an any which means hey don't don't mess with me type Checker um I happen to know that an event has a target a target has files um and those files are going to be an array and I'm going to grab the zeroth item I it'll be a file now maybe there's some error checking like if they cancel that I should be careful about uh but I'm not too worried about it for this app so I'm just grabbing the file name off there let's make sure it still works so I click on choose file uh and I'm grab number 43 here and it says you selected file number 43 which is great all right so we're actually getting um the information about what file the user selected in typescript but we're not doing anything with it yet uh and so it's time to start putting things into Firebase now whenever you're using the Firebase uh either the database um or or storage in this case um you really do want to always do dependency injection uh for the angular fire database uh and the reason for that is because it'll do some initialization things right so even if you're not using uh the database you're just using the Firebase SDK directly it's still good to do this because it does some initialization things what we're going to actually do is we're going to use uh Firebase directly uh what this import does this is the import we've used a lot we've got a snippet for it is it Imports um the Firebase standard SDK um and by saying slash app um it doesn't import everything in the Firebase um JavaScript it only Imports the pieces you said you wanted um and the pieces you said you want if you go over to the app module um is that you know you need the initial setup stuff uh and then you need the database you don't need authentication that's all well and good most of the time uh but we're going to be using storage um and storage um is is currently not supported um when me go to a tab here uh yeah this is the page I was looking for um at the time of this R this filming um like middle of the summer 2017 storage doesn't exist so there is no angular fire storage yet it's a work in progress there's people that say oh it's going to be done by the end of the week or things like that but but to be honest thus far it doesn't exist um and so what we're going to be doing is we're going to be using the standard Firebase uh JavaScript for all of our storage work since we want to be using the standard uh Firebase storage we actually have to delete the word slash apppp and by deleting the word slash apppp what that does is that Imports the kitchen sink right so all of the Firebase JavaScript is imported which to be honest really isn't that much but it'll bring in the storage things even though we didn't ever say we needed them um it's just how storage works right now as soon as they they have it as a first class citizen uh it will work out a little smoother uh but as of this filming it does doesn't exist which is fine all right so now I've got Firebase ready to go so now what I want to do is I want to actually store this photo so there's a couple pieces that I need from this one thing I need is I need some metadata um and so the metadata that I'm going to make is I'm going to get what type of content is it uh so there's a field called content type and that content type is just the files. type so I'm going to need to tell Firebase hey what type of file is this like is it a JPEG is it a PNG things like that to be honest you can get away without it but I saw somewhere where it was best practice so I do it now too the next thing we're going to need is we're going to need a storage reference uh so I'm going just say storage ref here and what we're going to do is we're going to say Firebase do storage um and much like the database that's actually a function call uh give myself a little more space here um and then I'm going to Sayre uh and then it kind of works a lot like the the database and that you can say like child on things um and so the child that I want is I want photos um and then after that I want features and then I want URL one I could totally just say child. child um and just kind of keep putting them on here uh but if that's to verbose uh you can actually do it shorter just by saying um when you say ref you can actually put in the path right here so I'm going to say photos slash featured slurl one so I'm eventually going to have two um two photos so I'm going to say photos featured URL one and photos featured URL 2 this gives you an object um and I like to specify my object so the type of object that this thing is uh is it is a Firebase storage um and now note over here there's no parentheses it's not a function call it's a name space b u and it's a Firebase storage reference uh so can't quite get it all on the screen there but hopefully you can kind of work it out on your screen so that's the uh the piece we need uh oops I misspelled the word storage there storage with the X3 uh we're going to say dop put and we're going to put in the file uh along with the metadata um and it's kind of interesting that that's really like all you you need to do uh to put something into your storage um I'm GNA go aad and move this log down here to the bottom uh and we'll go ahead and change the log to say uploading cool and so what this will do is this will actually upload the file nobody will know about it but it'll it'll actually be in my storage which is kind of cool uh so let's go try this guy out uh so now I'm clicking on this thing I'm going to go grab some small pictures I'm going to grab just a picture of me that I know is small um and it'll say uploading um that's all the feedback you get that's where it's done uh but we can go see it um in your Firebase uh storage area so if you go back over to storage now uh you'll notice that there's a thing called photos here if you were on this page previously you will have to hit refresh I think it's funny that Firebase doesn't automatically refresh anything in the console which I just think is funny but you go into photos uh you go into featured uh you go into URL one uh and you can see that it successfully uploaded the photo uh so that's cool right now in order to actually use this in your app what you're going to need is you're going to need the files location uh you're going to need the download URL just this one time we're going to cheat um and so what we're going to do is we're just going to copy this I'm just going to click right here to copy it so it says copy to clipboard and we're going to save in our database um the download URL so like where to go to so here's what I'm going to do uh you should do this too so photos uh featured uh URL one is going to be this value right here you'll notice that kind of best practice is to to keep your storage uh paths uh and your database paths kind of like you know in in lock step it's just it keeps things more organized and you can remember what goes with what so what I'm saving in the database is the download URL to the photo so it's kind of interesting that it doesn't matter where this photo is on the Internet it's just somewhere on the internet it just it just so happens that you're the one who saved it um really you're just pointing to it um just because it's a photo that's on the internet I think that's kind of neat so here's what we want to do we want to um display the photo right so our goal is to display the photo under here so that's what we're going to do to do it um we're gonna um create an interface uh so just bear with me for a second and then it'll all come together so it's going to be an interface called featured photos featured photo URLs and it's going to have a URL one uh which is optional which is a string and then a URL two uh which is also optional which is a string and the reason I'm making this interface um is so that I can use uh angular fire uh to look at this object right here so it's going to have a featured it's going to have a URL one and URL 2 and what I'm I'm going to do is I'm going to make a stream connection to that guy so I'm going to say public technically the word public is optional uh featured Photo Stream and my featured Photo Stream is a Firebase object observable um so we haven't used object observables a lot but they're really not hard and it's of type uh featured photo URLs which is why I made that thing it says Firebase object observable what are you talking about you just need an import uh and then we'll actually make it in the Constructor so we'll say featured Photo Stream is equal to this. DB doob uh and then we'll specify what path it's on uh and the path that it's on is uh photos featured um oh and that's the whole path so it's the object that's at photos featured so it's going to make a connection to this area and whenever it changes the stream is going to know about it great so now we can use that stream in the HTML notice I said public here but really that's the default so you could take off the word public if you wanted and what I want to do is I want to show that image uh over here in my HTML so I'm going to say image and it's going to have a source I'm going to be using JavaScript so I put it in Brackets this thing is in in JavaScript um and I've got my featured uh Photo Stream uh pipe to async and that'll give me the entire object but really I just want one piece of it and the piece that I want is the URL one part of it um also whenever you use uh streams they come back null the first time like instantly they're null and then they come back good um and so what I'm going to do is I'm going to put a an Elvis operator here so the question mark um and this is a an optional which says Hey assuming that this thing is not null give me URL one from it and then best practice uh is to always add an ALT which is just a description of what this thing is and so this is just a featured photo I guess I could say featured photo one uh so here we've got an image I happen to know that uh inputs and images both like flow onto the same lines so I'm going to stick a br between them here just so they kind of look a little better uh great so in theory this should work I kind of feel like have done something wrong so I bet it doesn't uh but hey press do looks like it worked um the downside is of course is that if you say choose file um and you know you choose a different file uh there's a chance that the the the upload URL is is different right so it uploaded this new picture uh so if I go into my storage it should have changed the photo now so I go photos featured uh URL one uh you'll see that it's a different photo but the the download URL changed right and so I'm going to click on this download URL again here and then I'm going to go dump this new download URL into my database um and then now it should switch over to the new the new image um you'll notice that this particular image is is huge so I need to add a quick CSS rule uh that's that's no problem and I'm just going to say hey all images get a Max height of 300 pixels there we go and so now my image is not colossally large so obviously we don't want to have to manually grab download URLs like that that that's not the goal um but we are not going to fix it this time uh so we've got a couple things we still want to do we want we want two of these things uh and then we want to not have to manually grab the download URL um I think we've done enough for this time though uh we're up uploading photos um we're manually getting their download URL and we're displaying them on the page good enough for now all right we will see you next time [Music] bye

Channel: Dave Fisher

Views: 11,068

Keywords: angular, firebase

Id: 4vgrEByJjck

Length: 20min 14sec (1214 seconds)

Published: Fri Jul 14 2017