Uploading videos and images to Firebase Storage | React Native Tutorial

hello everyone welcome back to code with veto super excited to be here back again with you guys with another video and in today's video we are going to learn how to create this minimalistic application that it's going to allow us to upload videos and images to Firebase storage okay so let's see the demo here I can select as you can see we have two icons or images and for videos so that means that we support both I'm going to select images for now and one thing that I want to show you guys before I select one of these images is that if I reload the application you're gonna see that we don't have anything but if I select an image let's select this one let's just drag and drop a little bit choose this image we're going to see this nice blur effect and the uploading status of the image and I have here a scroll view I didn't want to put um this inside the safe area view I think it looks cooler like that when it's when there's a lot of images and as well we are we are following a design that was provided to me and I'm going to show it to you in a moment but now let's choose a video I'm going to select the video icon and as you can see I'm just filtering everything just showing videos and I'm going to select this video of the time I went to um the the Mercedes-Benz Stadium here in Atlanta Georgia I can play this video for a little bit as you can see and once we are sure that this is a video that we want to upload we can select choose and this is going to take a little longer and we don't see a video as well here in the preview but as soon as the video is finished uploading you're gonna see that the video is here in the video it's automatically playing it's gonna play just once but let's continue and select more files so I'm going to select this image I'm going to choose it we're going to say that the images are upload quickly um let's select this one we can also edit a little bit these images for example if I want to zoom in and then choose this image is going to be safe like that so you can see here uh and yeah we can select the other video here I'm going to just choose the video and this is going to take a while now important thing to notice here is that all these files are being saved in our Firebase storage account so now to to make sure that they are saved let's reload the application and you're gonna see that in a moment we have the files that we just saved okay let me show you here my Firebase account and as you can see I have this project and if I reload here you're gonna see that now we have um it's five five documents here in this In This firestore Cloud and as well we have five files here so I'm saving this in a folder called stuff as you can see here I'm going to make this a little bigger select the folder stuff and as you can see we have uh six I mean five files which are the files that we just upload now um this is basically what we're gonna be doing guys so we can continue uploading more and more photos here but you have to be careful because Firebase has a free limit of one gigabyte per day of bandwidth I believe so let's go back here again and let's go to the usage as you can see here I have used um 16 megabytes but my bandwidth is 1.3 gigabytes so you have to be you want to be careful with this because if you go beyond 1.3 gigabytes if you are in the pre-tier like me uh your project is going to be shut down and you are not going to be able to keep saving files but if you are paying you are going to start paying more after you pass a 1.3 gigabytes okay and you can learn more about the build the billing um process and how the price is working with Firebase and the plans in their official um in their official website Okay cool so now um before actually before we actually start with the video I just want to tell you guys that if you want to download the code of this application you can do so in codewevet.dev this is the localhost as you can see here uh and I and I'm showing you the localhost because here is a project that we are going to be building today so as soon as I release this video this is going to be available in production um so let's select this Firebase project and this is another video so don't pay too much attention to that but an important thing here is that you can select between Spanish and English if you speak Spanish you can select the video in Spanish and English um if you didn't know I have two channels one in Spanish one in English but if you scroll down here you're gonna find all the dependencies that we are going to be using for this project so make sure that you come here and just copy them if you want to follow along with me if you just want to download the the code you can select this um GitHub button or simply download it directly from here okay cool and once you are here as well I want that you check out the react native course if you want to truly Master react native check out my react native course here at coded.dev um and yeah we are um I mean in their course we learn many many things uh we learn how to use Firebase as well we have a completely section for Firebase and yeah this is basically what I wanted to tell you guys before we start and another thing is that we are going to be using this template and this design to create our application I'm going to leave this link here if you go to projects and then Firebase you're gonna see that we have this figma design link so you can come here if you want to play with the design and you can simply um duplicate this project or just check it out here here we have basically the screens that we are going to be using and if you want to use this SVG as well you can come here and duplicate this file that was provided by Me by the echo Studio Sim Eco Studios it's a software agency and I have here their landing page it's really cool if you need a design or an application a web page you can go to ecostudios.dev and contact contact them and they can help you to build your project so they provide me with this nice design as you can see here so we are gonna try to make this application to look as this as possible okay okay and now that all this is out of the way guys we can actually start building this project okay guys so for this application we're gonna be using react native Expo so let's actually start creating by creating a new project so I'm going to say MPX create Expo app this is the command to initialize a new application and now we can specify the name of this application for this tutorial I'm just gonna say tutorial storage and hit enter this is going to start our project now um I want to go ahead and while this is being done I'm going to bring here my Firebase account so let's start by creating a new project if you don't have a Firebase account you're gonna need to create one so you can access this I mean so you can connect your application to your backing account and then start uploading images and uh in videos Okay so let's hit add new project here and for this project I'm just gonna save tutorial storage and hit continue I'm going to deselect this um let me just bring this here so you can see action I'm going to disable this Google analytics for now and hit create project this is going to take a moment or two and while this has been done we can access here the folder that we just created which is going to be CTE tutorial storage hit enter I want to clear my my terminal and now we can run this shortcut which is code. to open this folder on Visual Studio code so let's hit enter okay guys and here we have the new project already working and as you can see we don't have anything here just a simple project brand new and if I go back to my Firebase console you're gonna see that the project tutorial storage is ready so I'm gonna hit continue and I'm going to be redirect back to this specific project okay now here you're going to need to abilitate or activate the the features that you are going to be using in your application so as you can see or as you know if you have used Firebase before you can have authentication firestore real-time database storage hosting functions and many things more so for this tutorial I'm going to be using storage and for storage we just need to select storage and then get started and here if you are going to have this project already working on production you need to select production mode and set some rules here so no one is going to hack you and for now I'm just gonna start this on test mode which is going to put the default security rules uh to be just to allow read and write to anyone okay so just you just gotta be careful with this so once this is done I'm going to hit next here and we need to select the cloud storage location in which we want to have this project so I'm going to just leave the US Central I think it's the closest one to me and hit done and this is going to activate this in our project here in Firebase so it's going to take a couple of seconds while this is done I guess we can actually go ahead and copy the dependencies that we are going to be using so you go to Kobe better.dev and copy these dependencies and come back to the project and actually paste them okay raise them here now I'm going to explain to you what each of these dependencies do so Expo AV and I can actually show you if I copy this and paste it here Expo AV basically allows us to have video audio um and many things here here you can see what else you can have for example audio sound uh and basically work with media okay so for the videos that we're going to be displaying here we're gonna need this Expo AV and apart from that we're gonna need Firebase we're gonna be using the SDK uh and then of course Expo also has a really nice um oops Expo Firebase a really nice guide of how you can install and use the Firebase SDK with Expo so you can come here and just follow these instructions this is basically what we're going to be doing to connect the Firebase application with the react native project okay we also have Expo Dev client because we are going to be using this community blue dependency now we are going to be using big mouth to reference the design that was provided to us by Echo Studios so um yeah as you can see here in this part we have this nice blur effect and this is not easy to achieve without using any third-party dependency with react native so that's why we need to install this react native Community blur dependency but this blur is gonna use native code so that's why we need to make the build of our application or in another word don't we're not going to be using Expo go but we're gonna make the builds of the application so we can use this blur and test everything as it was as it was in production mode okay I hope that that makes sense we're gonna need as well react native SVG because as you can see here in the design we have this cool SVG when we don't have anything yet so we're gonna be copying this SVG and then translate this to work on react native as well we're gonna be using export image speaker which is going to allow us to open the library of images in the device okay so now that we know what this dependencies uh are for we can hit enter and wait until this is installed cool so now uh let's actually go to the Firebase project and as you can see here the bucket or the storage is ready okay so now let's open this sidebar as you can see here we have this storage activated now we need to activate parabase um Power store database okay now one important thing to notice here is that you don't really need to have a firestore cloud activated for this application but you I would recommend that you keep track of everything that you save in the storage so you can reference it later okay so we are going to be creating a document every time we upload something to the storage so we are gonna need to create a database okay so let's select the start this with the test mode hit next and the selection the location of my cloud firestore is going to be United States and hit enable okay now this is enabling the database for our application now uh this is just a warning that is telling me that we are not going to be able to change the location of this cloud storage once we select it but that's okay don't worry you can select just the one that is closest to you and hit enable okay now this is going to take a little I think okay something went wrong actually I don't know why let me try to reload this okay and as you can see here we can see that this project is set up to use cloud by ReStore in data store mode I believe that because we activated storage before cloud firestore this was like this was created in the Google Cloud console so let's hit this this button that says go to Google Cloud console and here because we don't have anything we are going to have this like alert that says that since we don't have anything in this database we can still switch back to the cloud firestore in Native mode and get more features so let's select here switch to Native mode and hit switch no modes and that's it got it so now we can close this and come back here and reload okay and the cloud firestore it's activated and working perfectly cool so now let's go to the project here the dependencies that we need are installed and now I can run this project now one important thing is that like I mentioned before when I clear my terminal like I mentioned before we are going to need to build this application because we're going to be using the blur library that uses native code so how can we build this project we can simply run MPX Expo or build this what it what this command does it's basically going to generate the native project for Android and for iOS so I'm going to select the identifiers that they give me by default okay we select these identifiers and now like magic we have this Android and iOS folder in the Explorer okay so basically we have the native iOS project and the native Android project now once this is done we need to wait a little bit because it's installing the cocoa boards for iOS okay and that's that's ready that was a little quick now we can actually build this application so now we can run the command npx export run iOS because we are going to be working with iOS but you can use um Android if you want and I'm gonna say no here I'm going to actually cancel this because I'm using this server here I'm going to stop it and now we can actually run this again so we use the word 8080 it doesn't really matter but yeah you can use I don't want to have two brakes running at the same time now this is gonna take a little while so I'm going to minimize this for now and while this is working we can actually start working on the application for now the first thing that I want to do is actually connect my back end with my front end or with my react native application and we can do that by hitting this little icon and go to the project settings and here if we scroll down we can actually connect our application an application okay so there are no apps in here but we can connect one by selecting this web icon you can select an iOS or Android if we were using native iOS or native Android development we need to select these icons but because we are using react native we are going to select this web icon okay and the name of my application is going to be react native client or you can name your app as you want now let's hit register application and this is going to give us the credentials that we need to connect our react native application to this back-end project and they also give us this command to install Firebase and everything that we need okay so I'm going to copy this uh of course you gotta make sure that you don't share these keys with anyone otherwise they are there are what they are going to be able to upload stuff to your to your bucket so be careful now copy these credentials and now let's go back to the Explorer and as you can see here um as well the build is done so that was quick and now I got this alert that says that if we want to open this application I'm going to say yes and this is going to start loading the app okay I'm gonna minimize this for now and the application is working but a cool thing is that we are using the export Dev client and you you can see that because here says Expo development client which means that it's like this application it's already on production okay so let's get got it let's just close this model and we have this text cool nice now let's connect or actually let's use this um these inputs and keys to connect to our backend for that I'm going to create a new file called Firebase you can it it can be named Firebase config or Firebase just Firebase it doesn't really matter and let's paste here all the things that we need for our application okay now all my credentials are going to look like this um and yeah hit save for now now another thing that we need to do is that if you go to the Expo docs you're gonna see that after you paste uh your configuration you have these three step which is configure Metro and for that we're gonna need to run this command so we can be a so we can so we are able to modify these Metro config file because um well if you if you didn't build your application you won't see this Metro config file but because we build application this metroconfig file it's here so we can simply paste this code that I paste here it's gonna look something like this once that is on that's all we need and I believe now we can actually just just make sure that everything is going to work we need to restart the server because we made a change into the Metro config.js so we can just simply say MPX Expo run iOS again and wait a little bit until this this is done again okay so now we can close this and um I think this is all we need here okay the application is running so I'm going to make this a little bigger so we have some space and now um we're gonna be using search right so let's import something from Firebase storage because we install Firebase we can access all these from the dependency and now here we can say get storage with cheese which is a function that is going to allow us to instantiate the reference to our storage on firepies okay now we're gonna be using as well something from Firebase firestore we are going to be creating a record of every file that we saved okay and we're gonna need get firestore which is basically gonna do the same now these two things need to take the application as a parameter in order to initialize everything so we can say export cons storage equal to get storage and as you can see here we need to pass the app as a parameter and this app it's this one here that has our predictions okay let's do the same for the DV or the very sword you can name it as you want I'm going to say justdb for now and get power store and pass the app as well okay now we can import this storage and DB in any component and start saving records and start uploading stuff cool now we can close this Firebase config file we don't need to do anything in there anymore and let's actually go back to the app and just to give things a little cleaner I'm going to create a new folder here which is going to contain the screens that we're going to have although I think it's just going to be one but that's okay uh so it screens and inside screens I'm going to create a new one which is going to be home.js this is going to be my main screen and for this screen I'm going to have some cool stuff here okay now um let's just export the full function this component it's going to return for now let's put a view from react native and let's create a text from react native that says oh just for now okay hit save let's go back to the app.js file and actually delete everything we are not going to be using all these things that come by default and I'm just gonna put my home component that I just created and it's going to look something like this and if I hit save as you can see if I make this home a little bigger when let's say font size I don't know 32 you're gonna see that this is out here but yeah it means that it's working now the the next thing that I want to do is actually go to my big map and in my design I'm going to copy this SVG now in figma you can do this just by um by clicking here with the right click and then copy and copy as SVG now another cool thing that I want to show you guys is that there's this nice website called svgr that can help you to transform svgs to be compatible with react native once you install the react native SVG dependency of course okay so here I'm going to select on the left side react native and we can remove these dimensions select react native and now delete this SVG that we have by default here and you don't need to delete this we can just paste down here the SVG that we just copied and now on the right side we can copy this component that is going to be available or compatible with react native so let's copy this make sure that you support gray this is the creator of this really nice tool um and yeah so let's copy this and go back to the code and inside my assets I'm just going to create a new file which is going to be svg.js just like that I don't want to overthink everything and I'm going to paste this SVG component just like that okay this is going to be using guys if you don't know the react native SVG library that we installed earlier so now if I um if I go back to my home and instead of rendering this home I render my SVG component and hit save wait a little bit okay and there we have it just like that we have an SVG working perfectly with react native okay guys so I want to have this SVG component elsewhere because we're gonna have all the logic or the business logic inside the home screen so we can extract this in a component so let's create a new folder here here all components and I'm going to put this out of the screens there we go create a new file and I'm going to call it empty state.js cool now this empty State it's going to be very similar to the home screen I'm just going to rename this to be empty State and everything is going to be exactly the same okay hit save and now if I go back to my home and instead of rendering the SVG I can render my empty state and delete this import itself this is going to look exactly the same but we can actually start adding some Styles here so I'm going to say like so one you take and then align items Center hit save and justify content Center okay now um I'm not sure why I'm not seeing my my empty state to be honest okay guys now we cannot see this SVG and I believe it's because this is missing the width and height properties I think that's because I unchecked that box but yeah if I provide these um this width and height we can actually see um this SVG up here okay now let me just make sure that I have this the correct way okay so I added this now let's um let's try to delete this okay let's add a flex of one line items to the center and justify content to the center okay now something weird is happening and I believe it's because this is inside this view in this view it's uh too small so let's add a flex of one okay there we go that was a problem nice now let's add a text here and my text it's going to basically if we go back to the sigma file it's gonna say no photo uploaded yet but this um this text is going to have a color gray so I'm going to put it down here like this okay just like that this is this is going to be our component for the empty state now we can use it here whenever we need it cool now we are going to need another component guys whenever we are uploading a new image we have this blur effect right let's go back to the design we select an image then we have this uploading screen everything in the back it's blur and they're uploading it's a blur as well it's like an alert but with blur and it has a little image uploading and the bar okay now the progress bar is going to be another uh cool component that we are going to see in a moment so inside this give me one second yeah so yeah let's actually start by creating the progress bar so for that I'm going to create a new component inside my components and I'm going to call it progress bar dot Js okay now this progress bar is going to be a really fun component of course there's many libraries that you can use if you want to have a loading state in your application but this progress bar it's homemade and that's what's cool about it okay so let's actually start by importing react react from react I'm going to be using an SVG for this and A View From react native okay so let's import SVG and as well we are going to be using a red rectangle from SVG okay so react native SVG cool this is all we need to create this bar so let's export the full functions progress okay now some important thing is that these programs component is going to take a progress right which is going to be a number between 0 and 100 so we know when um or how much progress do we have from everything from anything that we are measuring right okay so now let's define some variables but actually before I do that I want to put my return this is going to be a simple view nothing crazy but inside this view I'm going to have my SVG and inside this SVG I'm going to have a rectangle which is going to have a width and as well this SVG is going to have a width so now we can declare this with declare this with here I'm gonna say bar width and this width is going to be equal to 230 you can play with these values as well and we are going to need another variable which is going to be the progress with so we are going to be using basically two rectangles one on top of each other one is going to be gray one is going to be blue and the blue one is going to be moving on top of the gray so it's going to have that effect okay so for the width we are going to grab the progress that we are passing as a property and where then we're going to divide this by 100 and then multiply this by the bar width okay so we are going to start at zero and then when the progress is 100 we are going to have 230 as the width of the progress bar okay now let's pass this bar width to the SVG and we're going to need a height as well so the height is going to be 7. and the width here is going to be bar width as well in this rectangle height of now the height of this rectangle because it's inside this SVG we can say that we want to take a hundred percent okay now we can hit save I think and if I go to my home screen and just down here we can put the progress bar hit save now remember that we need to pass a progress which is going to be a number so let's say 50 for now okay now the width of this rectangle is going to be um 230 but we don't see anything because I haven't passed anything any any quarter so I'm going to pass a gray color which is going to be this hex color okay and let's try to let's try to reload these Maybe I think we should be able to see this um base progress bar I don't know why we don't see it oh yeah I know it's because we have this empty state that is taking everything right so if I Center this align item Center and justify content Center okay there we have it okay that is your bar products progress bar now I want to duplicate this one and we're gonna have one on top of each other one on top of another but now this is going to be the progress width okay and hit save and an important thing here is that we need to change the color so we can actually see the difference and yeah that's it now if I go to my home screen and change this 50 to a 30 or 90 or a hundred is gonna be completely filled if I say 100 and 28 is going to be the same so we don't have to worry about that let's just leave it at 60 for now okay now I want this bar to be around it and we can do that easily just by adding a rounded X of 3.5 which is half of the height I think so and are Y which is going to be 3.5 and copy all these and paste that down here hit save and now this is a really nice progress bar that we can use in our application very nice now another thing that we're gonna be using is gonna be the uploading screen or the uploading overlay that has that nice background blur now for that I'm going to create another component and this component is going to be called uploading.js now this is going to be a a little complicated in terms of UI component so let's start by importing some things that we're gonna need of react native which is going to be an image button stylesheet view button in a Dodge wallpapers now um as well here is where we are going to be using the blur so the blur dependency react native Community blur comes with a blur view which allows us to have a blur view basically and this vibrancy vibrancy a view that allows us to have like an overlay of lure which is basically exactly what we need for this tutorial now we are going to need as well the progress bar and the progress bar it's the one that we just created now let's export this component it's gonna be called uploading and it's going to be a function component okay and this component is going to take some things as properties remember that when we are uploading a picture or a video we want to show the image or the video in a little thumbnail and then show the progress right so we're going to need to pass the image the video and progress as well so we know how much progress and once the once the progress is ready we can stop rendering this uploading component okay so now let's return this View and this view is going to have uh basically just the vibrancy view so the vibrancy View can be put like this and then we can add a style so we want this by versus vibrancy view to fill the whole Space on screen so I'm going to say Style and we can say from stylesheet of react native here we can access this method that it's called absolute feel this is going to fill the whole screen no matter what okay this is like a shortcut for giving it a position absolute and then with a hundred percent height 100 this is like a shortcut that comes with Slash sheet from react native okay now we're gonna need something similar in the container so I'm going to paste this here and then I want to have everything that I have inside this view centered so we can say align item Center but I'm going to need to open another curly braces because I have an array of styles here so let's say align item Center then justify content Center and I believe that's all we need for now uh I'm just gonna give it a z index of one okay now if I hit save and let's see just let's just put this uploading component here just to see what happens if I put this component in my home you're gonna see that we have this blur now everything that is behind this progress bar it's going to be blue now we can choose between many type of blurs that comes with this vibrancy uh bill so let's actually play with the Styles so we can say blur type and I'm gonna choose uh you can choose between all these Styles you can play with them but for now I'm going to choose the the one that is ultra thin material dark and hit save now this is a little clear as you can see you can also select for example light and this is going to be a very light blur effect we can barely see the progress bar in behind this view but yeah we have this really nice view now after this virus View I mean on top of this Vibrance view we want to have another view that has another blur uh let me show you the design here we want to have this view okay so this little blur view is going to contain the progress bar the cancel button the uploading text and then the image okay so now let's actually do that I'm gonna use a blur view for now for that sorry and this blur view is going to have an image okay so I want to validate if we have an image we want to show an image okay and this image is going to be passed as property now this image is going to be from react native now I don't want to waste too much of your time guys I'm just gonna copy this image here just I'm giving it a width of a hundred height of 100 resizing modes contained and Border radius 6. now let's hit save and actually let's pass an image to this um to this image okay so this component so how can we do that well we can select an image and then pass it here okay but before we do that I want to render a video if we have a video okay and for that I'm gonna use this video from um from AV okay so this is a video player basically from AV X4 AV and whenever we have a video as property it means that we are uploading a video so we can show the video in this little View so yeah I'm giving it this um this size but I can change it to be 200 for 200. like this okay and um I don't think I need the native controls okay now just uh try to try to see guys that we are rendering an image if we are uploading an image and we are render a video if we are uploading a video that's why we have this validation here cool now we're gonna need as well a text after this so let me just scroll a little more and this text is going to be saying uploading and for the style of this it's going to be font size of 12. if I hit save you can see that we have the uploading and the blur effects now this view it's too small we don't see anything but now I'm going to create a cancel button uh it's just a touchable opacity as you can see here we have a text that says cancel phone weight 500 color blue font size 17 and um I'm gonna need a separator okay so we need a line to draw a line between these views but before I do that I want to give a styles to my blue review because we cannot see anything at this point so inside this blue view I'm gonna say Style and for the width of this view I want to take 70 of the screen okay now the height of this view can be set manually but can also be said by the by the con by the items inside this view for now let's say height of 200 just to style everything and we can say align items to the center and padding vertical of 16. safe okay everything is looking good now I want a gap of 12. you say we have that nice spacing between items um and yeah so this blur effect it's uh super black we don't want that for this for this specific View so we can select a blur type and for now I'm gonna say light okay that's light but we don't see anything and that's because it's the same color as the vibrancy blue so I'm gonna change the vibrancy blur to be ultra thin material dark so now we have this nice effect now I forgot to add the Border radius of 14 here and now we can add the space between the cancel button and the uploading for that I'm going to use a simple View that I'm going to push put right before this console this view is going to take a style it's just basically a border border width of hairline width which is another property that we can take from statue dot her language and the width is going to be 100 border color it's gonna be um like a black with 20 opacity if I delete the 20 you're gonna see that line there but I want to have that nice opacity cool now this is looking like that because we don't have an image at this point but I want I don't want to have this height hard-coded I want to have this height to be dynamic changing depending on the items that we have inside the Explorer so for example if we have let's say that this text has a font size of I don't know let's say 40. it's going to change the size okay let's say 100 the the height of the window or the height of this view is changing dynamically depending on the things that we have inside of it okay so let's put back this to 12. let's just leave it for now when we pass the image it's going to render the image we already know that okay so let's go home again and now we can actually start implementing um everything we need to start I don't know picking up some images okay so to start picking up some images I'm going to create a button and for this button I'm going to use a touch for opacity and some icons so let me just copy this icon that I have here and when I'm using iron icons from the icons of Expo Vector icons okay and I'm going to be using a total opacity and all that good stuff from react native so let's add those Imports here and delete this one Okay cool so let's use this totual opacity to create this nice button so actually to to save some time I'm going to copy these buttons down here and paste them hit save um and yeah of course we don't have these functions for now I'm just going to comment okay now as you can see something happened we have something behind this blur view let's comment this uploading okay and there we have it so I created these two buttons they are not doing anything at the moment but I created created them using a touchable opacity they have a position absolute that's why they are positioned at the bottom 90 right 30 and the other one is going to be bomb 150 bottom 150 and right 30 okay background black and they have an icon inside of them this one is going to be a video cam of size 24 color white okay this is what we are seeing down there okay so now we can minimize these buttons for now okay now let's actually start selecting some images okay so for that we're gonna be using um Expo image speaker okay and we added that dependency at the beginning as well if you remember I'm going to paste here this import from react native now inside these we can create a function that is going to handle to pick an image okay now uh if I make this a little bigger you're gonna see that we have this big video and then Big Image so let's create this function big image function is going to look like this function Big Image and then this function it's going to just request access to the library of the device so we're gonna save the result of the access here I'm gonna say await which means that I have to change this um this function to be asynchronous so let's wait for the result let's access the image picker dot launch image figure async and this is going to take some properties that we can specify uh so for example the media type and this is going to be something important for this application because we only want to select uh images so we can say mediatype options dot images and we have the option to select images and videos but because we cannot render a video in within an image component we need to separate these two right so we know that we are selecting images or we are selecting videos and we can handle these files accordingly okay so let's select images then we can say allows editing equal to true then we can specify the aspect ratio of the image basically you're gonna see most of the time you're gonna see three or four and then we can also select the quality so if you don't want to handle really heavy images you can down put down the quality a little bit so for example you can say 0.2 which is going to load the quality of the image if you want the max quality you can set this to be one and yeah I'm Gonna Leave This like that like that for now now everything that happens inside here is going to give us this result and now we can access this result and then uh we can check if the result wasn't canceled so I'm gonna say if the user didn't cancel the Picker we can set an image so I'm going to set an image using react use State okay so let's say image and set image so this is going to return us a URL that we can use to render the image so let's use your sustain from react and for now let's just put an MP string so I'm going to duplicate this because we're going to need one for the video as well the video guys is going to be a link as well so oops B deal okay so it's going to be a link so we need to reference that link so later we can grab this file uh and upload it to upload it to the store cool so now here and we can set the image from the result now the result is going to come inside these assets and the recent assets it's an array it's because we can select multiple images at the same time if you go back here to the options you can select multiple allows multiple selection uh for now I'm just gonna go simple with just one file but you can select multiple that's why I'm going to select the one at the position 0 because we only have one okay then this is all the information that we can access from this file height type URI with file uh duration um I believe we also have the file size which is really cool to know I would recommend guys that you save all these um information in your database so you can reference uh everything that you need of each file in in the record that you are saving okay anyways I'm gonna need the UR right for now and the URI and then after we got the URI we can upload the image okay and we're gonna see how we can do that in a moment let's hit save for now and let's try to pick an image okay I'm going to press this button and if I wait a little bit you're gonna see that the library it's opening cool now we are setting an image whenever we press continue right so that is going to trigger this uploading okay because we're going to upload the image after we select the image we are going to start uploading which means that we want to show this overlay blur and start showing the progress of the upload so I can put here if I have an image then I want to render this uploading okay so let's select an image let's select this one we can choose it it's uploading of course we don't see anything at the moment because um because we don't have because we don't have anything right and now I was forgetting in the uploading uh thing here we are not seeing the progress bar and we need the progress bar here so let's add the purpose bar and let's say um progress to be hard-coded 59 for now now um this progress is going to be passed as property now that I remember so we can change this progress to be progress so it's going to be empty for now now after we finish uploading the image we want to set this image to be no or to be an empty string so we don't keep showing this um this uh blur effect forever so let's reload now um the image is going to be an empty string so that's why we don't see the blur effect but now let's actually upload the image how can we upload an image well we are going to be using the same um the same what's the name the same function to upload videos and images and you can basically use the same function to upload anything but for now just imagine some videos I'm going to call this function this is going to be an asynchronous function is going to be call of love image equal to well it's going to be a function now this function needs to difference between images and videos because we're going to be generating a video and and I mean we're going to be saving records in the database so when we pull these records from the database we know if the link of this resource or this file it's an image or it's a video if it's an image we are going to render a basic image from react native but if it's a video we are going to be using AV from X4 AV to play the video okay so yeah we're gonna need to pass the URI the file type which is image or in our video and then we can upload these two verbs now a cool thing that we can do here is to a patch request so I'm gonna say await pitch and using the URI of the image that is saved locally on the device I'm going to get a response now here you can have uh I would say a better validation here so if the response it's okay and all that but I'm just going to assume that everything is going to work perfectly for now I want to change this response to be a Blog what is a block and I want to write it here this is a Blog above it's a file like object of immutable raw data so blov stands for binary large object that it's frequently used when we are dealing with images videos and whatever large file like PDFs as well so you want to change these data to Via blur so you can send it to anywhere through HTTP right so I'm gonna say cons block I'm going to change this response or this image to be a blob which is going to be a bunch of data numbers uh or just characters and we can simply do that by saying response dot blob like we do when we do the Json in this case it's going to be block so we can send this Bluff to the storage now we need a reference to the storage so I'm going to say storage ref and we are going to need a ref now we're using the SDK if you remember so we're gonna need to import some things from uh Firebase and I'm going to do that down here I'm gonna import something from Firebase in this case it's going to be Firebase storage now we are referenced referencing the bucket here but we're gonna need as well to reference the database so I'm gonna need to import from firestore some things okay now let's start with the storage we're gonna need the reference we're going to need the upload bytes resumable then get down sorry get download URL okay and this is that's it so ref is going to help us to reference the bucket then upload by its reasonable it's a really nice function that is going to help us to upload an image or video and it's going to give us information of the upload like the progress or if something goes wrong and then get download URL it's going to give us the Ura that we can use to reference the data or the images or videos okay okay so now we want to create a record every time we upload something to uh to the storage right so we're gonna need add document because we want to add a document to a collection and then we need to know when we add something to the database so we can show it to the user right away so this on snapshot function it's a really cool function that allows us to subscribe to events so whenever something happens in the database or in a specific collection of data that we have on firestore we can do something on the code so whenever we add a file I want to add that new file to my array of images and videos that I'm showing to the user so it seems that it happened instantaneously okay instantly sorry okay so now that we have that we can actually upload the image so let's go back here we need the reference to the start right so let's call Red now rep is going to take my storage if you remember when we created these Firebase config we generated this storage which basically is a reference to our Storage storage so we can import this storage and use it here from Firebase as you can see here hit enter now URL the URL in which you want to save this data now I want to say this in a folder called stuff so I can specify a name like this now I want to um add something unique for each record that I'm saving so I'm going to say new date dot get time like this okay so this is going to give me a unique number and then I want to uploads so I'm going to say upload task it's going to be equal to we have the reference we have the name so we can call the function upload by presumable we are going to pass the storage red which is this thing that we created up here and then after that we are going to need to pass the actual file so while we want to upload we are going to pass the block this is the block and it's looking like this okay cool so now we are uploading at this point we need to listen or events so we can give feedback to the user of what's happening okay so we can access the upload task variable that we just created and this has a lot of methods that you can use and you can check out the documentation if you want to learn more about this um do these functions that you can call whenever you are uploading something so we are going to be using on and on has an estate change and this is going to allows us to do some things right so I'm gonna say Snapchat this is going to be a callback function which is going to retrieve or give us the progress of what we're doing right so let's say progress is going to be equal to and here we're gonna say snapshot byte bytes transfer so I mean bytes that are being transferred um currently okay and then snapshot Dot photo bytes so we are going to divide device that are transferred between the bytes in total Okay so we divide that and then we multiply by 100 so we get the percentage okay now after that we can um just let's say Consular progress progress like this and then we pass the progress cool now this progress is going to be a percentage so we can write it like this I'm just going to copy this line from here yeah so upload is percentage dar then uh another cool thing that we can do here is like set progress now yeah I forgot to create this variable up here so let's duplicate this we're gonna need a progress bar and set progress so we can pass down this property to the progress bar so the progress bar is going to animate so let's start the progress to be zero let's put the progress um down here in the uploading let's pass the progress yeah and I'm going to delete this progress bar that I have here just to play with yeah so uploading has a progress and we are going to be uploading the progress here so I'm going to say set progress equal to progress Dot I want to fix this because it's going to come with a lot of decimals so I just want to have a fixed number so we can save to fix now this is what's on dos okay now we can access another method here uh and I'm going to do that here so I'm going to say comma and then error so we can have a a callback if something goes wrong candle error for example and then finally complete so we can have another collab function when everything is complete the file was successfully uploaded so we can do something now we can call this function get downloads URL we are going to pass the upload task Dot snapshot.rev then we can have a callback function that is going to be asynchronous that is going to return us the download URL so I'm going to create this callback like this and the URL is going to come here so download URL yeah so yeah this is going to return us the URL so we can save it in the in the Firebase in the Firebase documents right in our database okay so we can say uh save record of course we're gonna need a function for that say breaker and then what we want to do is set the image to be an empty string and then set video because it could happen that we are uploading a video so if we set this to be an empty string we are going to stop showing the blur View okay now let's just skip this for now let's just put down here a console log that says file available at and then we put the download link okay and let's actually see if this works so let's just double check that we have the image here we are going to need to pass the image as well here and we're going to need to pass the video as well if we have a video hit save now uh let's just double check that everything is done correctly I believe so so let's select an image uh let's select this one we can actually do some editing because we said here that we want to allow editing uh and yeah so let's just choose this photo you're gonna see that we are uploading the image but now uh something is happening so nothing is going on I don't know why um um I believe that I'm not even calling this upload image function that's funny so let's upload the image here yeah after we select the image we want to upload the image then we need to pass the URL the URI so the URI is here as you can see and then we need to pass the file tag now in this function we know that we are uh in we are selecting images only so I'm going to say image this is the type of this file okay now um this is going to be um so this is going to be an async function so we need to say await yeah so let's reload this and select an image let's select the same one make some Zoom here so we can choose this one yeah and as you can see lagmagic we have these locks down here that says 0 23 20 71 and 100 done we saw the uh loading image or the loading blur effect and then we can actually we just need to save the reference because after that we we could just grab this link and save it somewhere locally or I don't know but it's best that if you save this URL somewhere else so now for example if I just copy this and let's come back here well we can just hard code it here if I paste this on the image hit save you're gonna see that we have the image but this image is going to be it's going and I mean it's being pulled from Firebase from the bucket okay so let's remove this now let's go back to Chrome let's go back to uh the project go to the console here if we go to storage you are going to see that we have this stuff folder and then inside this stock folder we have this image which is pretty cool right now let's actually see if we can do this on with videos let's try to upload a video so for that we're gonna need a function really similar to this one so I'm going to copy this one and paste it here now I'm going to minimize my console and if you remember we have this button here that says big video so let's copy this name and you see it here so now we are picking a video instead of selecting images we're gonna select videos allow editing everything is going to be the same but an important thing here guys is that when you are uploading videos usually videos are heavy so you can access here some properties that yeah call video quality that allows you to set the quality of the video so if you put a low quality you are not going to deal with super large files cool so now everything is going to be the same here we don't need to change anything but when we upload the image here it's going to work the exact same way but now I want to say that this is a video okay of course we are not using any this uh yet but let's just leave it like that okay now let's select a video okay it's working we just have videos here uh we can play this we can even edit these videos um we can cut it let's just cut it for like this and select it now this is going to take a lot more time you can see we have these events and once that is done um we can go to the Chrome and reload and there we have it so we have this video and you can see the type here as well and you could actually grab the type from this response but yeah um I would say that our approach to to save the type file could be better um or I'm not sure but I think it could be better just for this small project because now then we can validate if the file it's an image or video uh but yeah so we are saving videos now now the only thing that we are missing is that we need to save the record okay so so how can we do that we are going to need to create a function that is going to create a new document on our firestore database this is going to be an async function and I'm going to call these functions save record this is going to take the file type it's going to take the URL of the image or video that we are saving and they created ads okay of course you can save many many many things like the name of the image the name of the video uh the place in which the picture was tooked or I don't know whatever uh but yeah let's do a try catch let's try to do this the correct way if we have an error we can just put it on console for now and inside the strike cache we can actually upload the stuff so I'm going to say Doc reference we're gonna need a reference wait add Doc and this uh add doc if you remember we imported all these from Firebase uh firestore yeah there we go so um let's go back here we are going to add a document to a collection then here we need to provide the database so from my Firebase configuration I'm going to import my DB then I'm going to just save files because I want to save this in a collection called files now an important thing to notice here is that if you don't have a collection here in your database for example you can start a collection here manually but if you know if you don't have one so for example here I could say stuff and create my collection and then put things inside that collection but if I don't have anything specified uh it's going to be created when we add the first file there okay so it's going to be called files then we can specify what we want to save right so I'm gonna I want to say the file type the URL so we can reference this image or video later and then the created at so which is the date or when the file or the picture was tooked okay we can say console log um document save correctly for example and then we can also add the dog ref.id uh and yeah that's it so hit save and this function should save the record now let's try to do that here after we upload the image we can say await say record we can pass the file type which in this case is going to be an image then the URL and the URL it's going to um yeah so this is going to be a little tricky because we cannot access the URL at this point because here we are just picking uh the video so the the the place in which we want to save the image it's in this function upload image after we save the record okay so here I'm going to paste this function and yeah so the file type is going to be changing dynamically remember that we are getting this file type as a parameter up here and then we are getting the URL so the URL is going to be this download URL so I can just paste it here and then I can specify the date now the date is going to be just a new new date so I'm going to say new day to ease of string and hit save okay so this should actually save a record every time we upload an image or video now let's minimize this let's try to upload another image let's choose this this one it's uploading let's wait a little bit it's done now uh huh okay so check this out guys we have a missing insufficient permissions let's go back to Chrome let's select the database let's come to rules and I think that I can change this and loud to be true and then publish Okay so let's come back here select another image choose let's wait okay so it worked so we needed to change the rules uh and now if I go to yeah to my firestore you're gonna see that we have this record and now we have the URL here cool so this is working as expected now guys another cool thing that we can do with my favorite function of Firebase uh on Snapchat it's basically listen listen to be listening for events okay and for that I'm gonna be using a use effects ROM react use effect it's going to take an a function a callback function and then an array of dependencies that is going to allow you to specify yeah I'm importing these things here and I'm going to put it up here it's going to allow you to specify um I don't know variables that whenever those variables change you can run the code that is inside this function okay so let's create a subscription here so we can listen to when to when we add uh stuff to the database we right away pull it back and show it to the user so let's call this unsubscribe as convention on some some subscribe I don't know how to write unsubscribe yeah then we can say on Snapshot which is a function then we need to pass a collection so I'm going to specify my DV and then my collection which is files then we need to specify an observer an observer is going to be a callback function basically that is going to return the snapshot so let's say Snapchat the snapshot is the information of the record or whatever is happening that happens so they are going to give us the snapshot from the snapshot we can access the doc change function and then iterate for each change and if change it's if change DOT type it's equal to edit what we want to do is say a simple console log that says new file now we can also put in the console there change.doc.data and this is going to consult the data but we want to save the files as well so we know that the files are going to be URLs so I'm going to create this array of files using user state and then here I can just simply say set files equal to and I want to upload I mean to update this right away so we can do that by accessing the previous files and then put everything that we had before in the previous files plus the change dot dot data okay so if I went too fast here let me just explain a little bit what we are doing here we are subscribing the changes on the files collection which files collection these files collection okay so when something is added to this collection we want to grab that in this snapshot we want to iterate over the files that were added which which should be one at a time then we want to add this file that was added to my array of files that I'm going to be displaying to the user yep cool now this subscription is going to be running all the time that this component is mounted but whenever we unmount these components we need to clean this function otherwise this on this subscription is going to be running on the background and it can can cause bad performance issues okay so we can run a clean on clean up cleanup function here and I'm going to say unsubscribe okay and that's it cool so now we can simply show the files that we are going to be getting right and to do that we can use a flat list so I'm going to minimize this a little bit and I'm going to put my flat list here plot list if you are uh if you don't know what is flat list I would recommend that you check my react native course or the react documentation react native documentation but basically it's a scroll View that contains data okay so the data that we want this scroll view to contain is going to be the files we need to specify some things here like the key extractor the key extractor is going to return us the item so we can specify with attribute which attribute we can use as key so as key I'm going to use the URL then we can render an item actually so for that we can we actually get this item here like this we are destructuring this item and then we are going to return a component for each item now this component is going to be a simple image from react native and the source for this image is going to be a URI so we can open vocal curly braces then say your URI and from the item we can grab the URL cool cool now I'm going to need to specify a style because we need to specify a width the width is going to be 34 you can play with this of course and the height is going to be 100 now if I hit save nothing it's going to happen and um I believe that this should show something at this point let me see if I'm missing something of course yeah um remember guys so the items that we are going to be grabbing let me just put it on Console here reload the application yeah so we are getting the files that we have in the uh database but um something it's happening here we are not displaying this I believe it's because we have this style so let me remove it yeah there we have it okay so yeah something to notice here is that the every time we hit save we are creating these requests which is going to duplicate the files right so yeah there we have it now we need to add some style here and another thing is that we are not seeing the video that we uploaded and yeah a funny thing here is that we need to validate if the item um file type remember that we created the file type it's equal to image we want to render an image right but otherwise we want to render a video now I'm going to cut this return and paste it here and then we can actually just copy this or well just to don't make this video too large I can just copy this which is going to be just the video as you can see here and this video we need to import this from uh AV of X4 so let's go up here and import the video from X4 AV um so yeah so another thing that we are missing is that load image yeah when we pick a video oh yeah we are doing that so we are picking a video we are uploading this is type video yeah everything is working fine sure so I think this should be working okay guys let's try to reload everything I'm going to oh yeah something is wrong with our style so yeah I think I need to provide this style blacks that we had here before okay yeah there we go so we have now these buttons I'm going to select a video choose this one this should create a record of these um of this video now don't pay too much attention to the Keys oh yeah there we go okay so now we have the data cool okay and if I reload we have those two items okay now let's select a couple of images just to show that this is working perfectly let's try to upload as many files as possible um of course guys you need to make some improvements when like for example with the subscription maybe you need to validate that well this is going to work perfectly with the user because they are not going to be restarting the application every two seconds um and as you can see this is working perfectly but whenever we change something here in react native the component is re-render that's why we are doing the pitch every time uh but yeah maybe you can do something about that let's actually select another video and I believe my gigabyte of data is going to be used soon um so before I actually run out of memory I want to add some styling to my to my flat list so here we're going to specify the number of columns columns and I'm going to say three then we can also specify a Content container style and I want a nice separation between items so I'm going to say gap of two and then column for each column I want the same separation so I'm gonna say column wrapper style equal to Gap number two hit save now this is going to give us an error that's expected because we can now change the number of columns in the air but now after we re-render this is going to look like this cool this is pretty nice and it's working perfectly we can keep uploading videos and images um and yeah everything is working as expected yeah okay now you can build a really cool application with this uh this technology and the cool thing about this is that we have this nice and beautiful blur view whenever we are uploading an image let's check this out you can see the background images behind the blur which looks amazing to me um and yeah guys I think this is all um we are going to be seeing in this video okay guys that's it that's all we're gonna see for now let me know in the comments if you have questions if you want me to uh touch every anything that I didn't mention here I remember that if you want the code you can go to code with beto.dev and check out the projects check out the react native course if you want to support this Channel Please Subscribe give it a like and leave me a comment down below and otherwise I'll see you in the next video thanks for watching bye

Channel: Code with Beto

Views: 8,110

Keywords: React Native, Firebase, Tutorial, React, Beginners, ios, android, google cloud, Storage, Cloud Storage, Firebase Storage, Upload Videos, Upload Images, Firestore, Expo

Id: cq5TGA6sBQQ

Length: 93min 45sec (5625 seconds)

Published: Sat Jun 24 2023