How to upload a file to firebase storage with React Native Expo

we are going to see how we can upload files to firebase storage using expo and basic and obviously react native so let's get started so go to your favorite browser and type in firebase console if you don't already have a firebase account you need to create one oops you need to create one and i already i already have multiple projects and i have a file base basically you can use your google account but you need to find sign up on firebase and create a new project by clicking on this add project plus sign and then whatever you'd like your project to be called i'll simply name it as firebase expo firebase storage example and continue check this off wait for a couple of seconds so this is now done click on continue and you have your new firebase project create a new click and click on this web the the arrow sign which says web click on it and create a web web app since we are making a react native app so it's a web app so we need to create a web app if you are working on a bare workflow you would need to create separate ios and android projects but that's beyond the scopa video so let's name it whatever we want so that's limit similarly expo firebase expo file base storage example click on that tab don't check this and it will pop up with this just copy this bar config object wire firebase config object copy and continue to console go to storage oops i'll go to storage get started these are the rules this keep the default this will create a storage bucket for your app to be used to be used by your app so as you can see there is nothing but let's go to rules we need to edit some rules for to be able to use app without authentication if you have authentication enabled you know what to do just edit out the if part and keep it layer publish and this is done you can get your you can go to here and if you did not copy it earlier you can copy it from here so let's close this bring out your terminal i have a terminal here i'll create a new terminal [Music] and go to your directivity store and click if you don't have expo i assume you have expo installed so i won't go into the details of how to install the expo cli so if you have the expo cli if installed have the xbox cli installed click expo in it it will create a new expo project give it a suitable name i'll just name it same as our firebase project x5 expo firebase storage example it will ask us it'll ask you whether you want a blank workflow or a template so just select the blank workflow and wait till it installs all those javascript dependencies okay it uses yarn to install the packages but you can ins you can change it to npm by exploring the name of the file and adding this flag dash dash npm to the end but i'll recommend beyond this faster let's wait for this to finish ready so we can just copy this cd cd into this directory and go to and do open your favorite id if you use visual studio code you can do code.org to manually open your project in the id so you can see this is a empty project we have our app.js get rid of let's get rid of this by the plate and we need two third-party libraries the first one is the first one is expo the first one is firebase and the next one is expo image speaker so what expo image speaker does it lets us pick an image from our gallery and which we can use later to upload it to firebase so that we can test if our project works or not so go to expo image picker you can check this out i'll put it in the description so so if you use yarn you can use yarn or you can use npm so if you use yarn it's yarn add or if you use npm it's npm install the name of the package which is expo image picker and five the next file next package is five is so when we want a specific version that is seven let me check oh yes f5 point zero so for this at the rate seven point nine point zero click enter and it will install the packages and its dependencies wait for a few minutes let's install let's get back when this finishes so we let's go to the editor and you might remember we copied the firebase config and just which which will be used now so let's create a firebase dot js file in our root directory root directory project and paste and paste the stuff we copied earlier and we need to export this so add export and we can change the wire to constantly and this done we don't need the status for we don't need the text so here we need an image to display what we picked from the image picker we need two buttons you have to import the button and the image so the button itself is important and i'm putting the image here like this copy the button once more we'll name the one button [Applause] now take choose picture on press and then next being upload now we will import firebase import everything as capital f5 base from quotations small firebase we also need to import the expo image speaker library so if it's the import is similar input everything as image picker [Music] from expo image picker yes thanks image picker from expo image figure so we need so let's go to the image picker with the image picker expo the docs expo box and go to image picker you can go there just by typing image speaker expo image picker this one the expo image picker so it works on everything and we need this part you can just copy the entire beginning from const image till above return so we copy those parts and paste it here so what this does is the first one is a this used effect the function in the use effect requests permission so that we can access the library which is which is stored in status we await the image speakers request media library permission space link and if it is not granted we alert saying that we sorry we need camera permissions we need to agree to this and we have another function called known as pick image which we have named picked image pick image and this is the main function which allows us to open up the gallery view from where we can pick images to be uploaded to firebase so here we have we we use await instead of promises with the then and catch blocks so we use image picker dot launch image library async with media types you can read about this in the docs and if the result is not cancelled we'll store the the images url uri in the image state and we are using use state hooks this because this is a functional component so and choose picture let's put pick image and then on press well [Applause] let's keep it empty for now and test star and test if i if the open your favorite simulator save a simulator and type in expose start this can be your android simulator or your real device with expo installed will open the localhost here plus press i if you're using the ios and simulator or a if you're using the or if you're in the android simulator and w7f which is not a concern so we press i and it will shortly open on our simulator here give it some time if you're using it this if you're using this on a real device you need to be connected to the same wi-fi as all be on the same network because for this to work but since we are on the simulator it doesn't matter because it's on the same network it will take some time building up the bundle so it's almost done if you launch type in uh oh we have an error so we did not import you use date you need to make sure you import your state and use effect you state this effect and press save to reload the package and ask to reload the project again and here we go so if you close this up it will ask for for us to ask permission to for the media library or the gallery allow it and you can see there are the two buttons if we choose a picture the gallery pops up and these are the sample images choose anyone choose and we see here that it's working properly now let's display it so in the source type image type use source and uri and we will url the image state and give it a style without style it won't display your image so style this let's give it a width of 300 and a height of 300 oops oops yes 300 as well we see the image now so our image figure works properly so now let's get to the the fun part the main firebase part so we'll create a function called what should we name the function the function the function as upload image to firebase upload image to firebase or simply upload image ui upload image until this is an asian function we will use async you can use [Music] if you go and so there's an issue with expo which is mentioned in this link as i mentioned in this link so let's go to that link and we'll get to know what's wrong so this link was an issue that typo network failed when fetching file you are right because file uri does not work react native expo does not support file uris for making blobs so what you need to do is just copy this part put it there so this will create a blob for us because react native because react native does not do that for us we need to create a block for us for ourselves so now comes the main part we need to create a reference in the firebase difference in the firebase storage so type firebase dot storage expensive function firebase.storage.ref to create a reference in the firebase storage database and dot child so that it creates a folder inside the main database and we'll and we'll call it and we'll give it the present date so that it remains unique and we can upload multiple images because there can't be two same date strengths so we'll use the date constructor so new date dot to iso string this will give us a unique string every time so let's use that so that's done we and we nee next we need to create a snapshot so what's the snapshot snapshot is nothing but it puts the puts or yeah we can say put the put our image into that reference so for that we use refs.put the foot function which takes the which takes this blob which takes this blob as that's the image we need to upload so next we need snapshot dot on where snapshot dot on takes three parameters or rather for parameters the first one is firebase dot storage without dependencies dot task event dot state change so that when the file starts uploading we know it has started the next parameter is further where the file starts uploading so we will just create a new state call it uploading so we get a spinner we can use it as a state for this activity indicator spin the loading scanner and then the initial value which will be the initial value which will be false and then and type in set uploading to true and the next parameter next parameter will be the error parameter the error that a function supposedly an error occurs so that we can console the error console log the error and the last one is the success function so here we need snapshot dot snapshot dot the snapshot is this reference here where we put the blob or the image the snapshot dot snapshot dot ref dot get download url which will give us the url of the image we uploaded to firebase storage which is our end goal so url oops okay so this dot will use the then block here download download url or just name it url the console log the uri on the url as download url then we'll close the block because blobs need closing otherwise they'll leak and that's a security concern and without this the app will crash so let's just do close the block and return the download return the url the download url fine and we need to close our blob here as well close our blob if an error occurs as well and return we also need to stop the uploading if an error occurs so that's it and we need to stop it and if that's success so we have completed everything just so let's put this upload image here and so that we need to for the spin it appear we need conditional rendering so we'll use the image if that's the if no not image sorry we need uploading so if the image is not uploading it's not uploading then we'll show the button and if it's uploading will show an activity indicator activity indicator is basically a loading loading spinner activity indicator it will auto import or you need to import it here so this takes two properties um the first one is size you can keep it large or small let's keep it large and the color sorry color will keep it hash triple zero which is black now let's test the app do command r to refresh that choose picture choose any picture we get the picture and upload oops we have an error so what's the error it can't find uri so where's the error it can't find uri let's see where the error is uri it would be image because why ms because we have we stored the image in this state when we pick the image from the x4 image picker library so with that let's refresh the app again that isn't working so we'll go to and do i again this time you'll see it here click it so let's choose an image again let's choose a different image let's take this image choose we get the image and upload we have another error it can't find five ways oh we did a mistake so it wouldn't be small capital small that of firebase but firebase as f this because we imported firebase as imported firebase as capital f so let's see if there are other firebases no we are good reload the app upload try uploading it again another error no firebase app so here's the problem we'll fix this by using by writing this firebase dot apps whether it's dot app store length or firebase dot app.lens let's see it's it's firebase if not firebase.apps dot length this checks if there are no firebase apps yet initialized in this project and it do firebase dot initialize app and you remember the firebase file we created earlier we'll use it use that now just type import firebase config or whatever you named your variables from dot slash firebase and put it here five is config this should fix our error let's see yeah there you go it's uploading let's see if it works since this is a big image it will take some time if it were for a small image this would have been faster just go to our console and check if it's up if it gets uploaded so let's go to our tutorial section there's no file set because it's still loading it has ended so let's see if the image is uploaded it is uploaded it will be the same image we get the time and the year of the imaging bit you can see these are the same images so we have successfully uploaded an image to firebase using expo and the firebase library you can use this library with any file string or basic base 64 uri b64 encoded uri or simply any image do try and let me know if you like this video like it comment below if you have any issues and subscribe see ya peace

Channel: Voldy

Views: 3,623

Keywords: react, react native, firebase, firebase storage, expo, upload images, databases, firestore, realtime database

Id: XxZO7151HYc

Length: 32min 43sec (1963 seconds)

Published: Fri Feb 26 2021