React JS | Firebase Storage - How to upload profile picture using Firebase Storage in 9 minutes

in today's video we're going to be creating this middle project it's called a profile uploader so we can choose a file and then select an image let's say this one and then i'm going to submit and then there we go so let's get started so first we're going to create our rack files for npx great rack app and i'm just going to call it prop picture and there's two packages that we need firebase and a material ui so create a project and i'm just going to call it profile picture and then continue and then here i'm going to go cd prof picture npm install firebase then material ui the reason why we're material ui is so that we can use this avatar a rounded profile picture so let's go to getting started installation and then these three uh packages so let's go back to our command prompt npm install firebase and then the three packages from material ui perfect so i'm just gonna call that if you're using vs code you can code that to open this code so i'm just gonna do code dot so i'm just going to remove the files that we don't need those files delete i'm going to remove everything inside index.css and also for update css i'm going to go to index.css and i'm going to select all elements and then apply a padding of zero and a margin of zero margin of zero i'm gonna go inside public folder and then delete these files delete i'm gonna go inside index.js and i'm gonna delete this code i'm gonna save it and then up the js delete the header tag and then the logo from logo svg okay so everything should be working i'm gonna just gonna do h1 then hello world save and then here i'm gonna do npm start to make sure that everything is working if your fabulous project is ready so just click continue and then select the website and then here i'm just gonna call it prof picture register out and then here we're actually going to get our config so we've already installed our firebase all you have to do is get our config and then create a firebase.js file inside your react app so firebase.js and then i'm just going to paste in the the config i'm just going to delete the comments and then there's actually one thing that we need to import inside firebase.js and that is the storage in this tutorial we're going to be using firebase storage i've already went over identification and real-time database in my past videos if you haven't watched it yet i'm gonna leave links in the description so cloud storage for firebase i'm gonna select website here and then get started so we need to import git storage right here so let's go to our privacy.js and then import git storage and then export on storage and then get storage and then we're going to pass in our app right here so app so that's all we need in inside of firebase.js i'm just going to uh close this and then here we're going to create a storage get storage next done once that's done we have to go to rules and then change the files to true publish and then three things that we need here so avatar and then input and a button right and for bond i'm just going to call it submit and for type it's not going to be text it's going to be file right and then here unchange handle image change and then here on click i'm just going to call the function handles and then i'm going to save this and then we need to create the two functions so it will be handle image change and then here handle submit and then we need to also import use the from rehab save now so we need to save our image filename so what we need to do is comps image set image equals and it's going to be you know initially inside handle image change or we have to do this if we're going to pass in our e if e left target the files the first one which is going to be our file name if that's not empty then we need to set image target e-target.files zero now if we actually consolidate image if we go to our website and then let's select image so say for this x right here and if we look at our console log we'll actually get this object right here right so this is what we need so i'm just gonna let's go back to our code i'm just gonna remove this line and also i'm gonna remove this h1 so you're going to import storage from our firebase file import storage and here i'm going to also import three functions that we need to upload the image so first is that reference and then upload right and then get download url it's going to be from firebase storage save and then here inside the handle of the submit we need to create a reference so i'm just going to do fonts image graph equals ref and then we're going to fasten our storage and then the name of our file sound image so this image is actually going to be the name inside our storage upload a picture the name is going to be image if we click submit we're going to create a reference and then here we're actually going to upload the file so upload bytes and then we're gonna pass in our image ref and then here we're gonna pass in the file that we want to upload which is going to be the image right here so image ref and then image then if that is successful we need to get the url right so get download url here we need to pass in the image ref one more time and then if that successful we will get the url then here we will set url url then here we just need to create the state variable so url and then set url equals use state uh let's do a catch here so catch if then there's an error we just need to also lock the error i'm just gonna and here i'm going to be there getting the image url saved and also i'm going to do one more catch which is going to be for the upload bytes which is going to be right here i'm just going to copy this and paste that right there and then here i'm just gonna i'll cancel out the message error message save so everything should work perfectly one last thing after we submit we actually want to set image equals null so right here so after we get the uh url all we need to do here is set image and then i'm just gonna put now so here one more thing that we need is the avatar so let's go back to uh material ui and then i'm just gonna copy this make sure that you import w ui from material avatar and then grab this last avatar element which is going to be this one grab that and then paste that there and then here for the width and height i'm just going to make it 150 pixel and make it pixel and that photo source is actually going to be the url and then for all you can leave that blank or i'm just going to remove it and everything should be working so let's go back to our website and let's test it out so i'm just going to select the wall check picture which is right here and i'm just going to click submit perfect so i have a challenge for you the problem here is we also can upload uh mp3 and then submit and then there you go so that's that's the part over here so we don't want to upload any uh mp3 or anything like that we just want to upload images so that's a challenge for you so and one more thing if we if i'm going to upload this feature i'm going to click submit and then also upload this this x picture i'm going to click submit if we go to our firebase storage and files and i'm going to refresh we only get one image file right here so we actually want to get uh if we are building like a facebook social media we actually want a folder here for every user and then their profile picture that's the challenge for you i'm actually doing a project right now which i will be uploading in the future uh so i'll be making a messenger app using react and firebase authentication firestore and storage so if you like this video please consider subscribing i'm going to be posting more videos like this and you don't want to miss it don't forget to like subscribe and i'll see you guys in the next video

Channel: not a hacker

Views: 16,253

Keywords: firebase storage, react firebase storage, firebase tutorial, firestore, react firebase storage example, react firebase storage download, react firebase tutorial, firebase project, firebase, firebase developers, react firebase hooks, cloud storage, react tutorial, storage, firebase storage - upload and retrieve images web, getting started with cloud storage, product: firebase, upload profile picture, react upload image, react firebase upload image, firebase storage upload file

Id: IbHfZSiQdqU

Length: 9min 22sec (562 seconds)

Published: Fri Jan 14 2022