MERN File Upload using Firebase 🔥| Upload Files & Images to MongoDB | Firebase Storage

so hey guys how's it going on today in this video I will be telling you how you can upload files to your mongodb database like if we had to do that earlier we had to use AWS storage bucket or something like that but in this video we will be doing it using fires Firebase storage bucket which is absolutely free we don't need to add any car details or anything for it so what we're going to do let's see an example first so if I choose a file here I select an image you see the image will be uploaded and as soon as the upload is complete you will see an image URL here if I control a copy this and if I paste it here you see the image from our firestore database now you can see this image is right here right it's a cool image and now what we're going to do is set up like how we can actually do it so let's just go to console.firebase.google.com I will add this link in the description and create a new project like I was working on a portfolio and I figured out like we can do such things for free so let's create a project and let me just say an example project okay my limit is gonna get completed okay let it be create project now I'll meet you as the project creation is complete so now the project is complete so let's just click on continue and what I'm going to do is set up a web app and within this web app let me just give it a name that is example again I don't need fibers hosting right now registered app all we need to do is while it's happening what we are going to do is we need to install our Firebase so we are going to say npm IR Firebase okay let me just show you we're gonna say we're going to say CD client and within this what I'm what you have to do is npmi Firebase this should be good enough you do it I've already done it so I'm not going to do it again so everything is done it says to do this and just have this virus config with you okay and continue to console now after you continue to console what's gonna happen is go to the build and then click on storage and then just click on get started and I'll be starting in production mode click on next then let this be it I'm I won't be changing it and let's just click on done and it will create a default bucket and then we have to change one thing within the settings I mean the rules for this Firebase storage let's do that right after this so now the loading part is completed now we just need to change one thing within the rules go to the rules section and we need to change one thing just a little minor change that's all if false change it to if true and hit publish and it will publish and you're good to go now what you have to do is set up your Firebase within your react app all right so now what I'm gonna do is go to index.js and show you how to set it up so first of all you need to import this import Firebase from Firebase slash compact slash app this combat has to be added after the Firebase Version 9 SDK upgrade all right and paste your Firebase config right here I've removed it because it's it shouldn't be shared and then what you need to do is firebase.initialize app and pass in this Firebase config with the net and that is it within the index.js now one thing is important here we will go to app.js there is nothing here like we are just doing it like I want to add project to my portfolio I will I'm using it right here like I have given for some functionality within my portfolio that is I can either add an image URL which is already hosted somewhere else I can just grab that image URL and paste it here or if I choose file it's gonna host upload that image to my storage and then within the storage it will resend me its download URL and I will paste that URL here after that function is done and I can add that image URL to my mongodb database that was that's what I was doing so let's just do how let's just see how to do it so I have an input type file here on change I am calling a function we will write that function right now it's not written right now and here we have an input within value of image URL which is a use State and on change we are just setting this thing now what I'm going to do is write a function called handle file upload but before that we had to import some stuff here we have to import Firebase again that is import Firebase from Firebase slash compat slash app and we also need to import Firebase slash Compass Storage because we are going to use the storage bucket right so now let's just come here and this is the function we have to write I will just remove everything right now and we are going to write it again all right so what I'm gonna do is here we have handle file upload which is running when we change this file input so what I'm going to do is grab the event from here so let's write the function right here all right so let's do it I'm going to say const handle file upload and let's just create an arrow function with an event within it and I'm just gonna say like this this is an arrow function right now let's select the file which has been uploaded let's say const selected file we are selecting that file is equals to this event dot Target dot files we'll say files and within that we need to grab the first file all right we need to grab the first file fine and after this what we will be doing is we will be checking if the file is there so I'll say if selected file is there I want you to do something let's just create a storage reference first so let's say const cons I will just say storage ref is equals to let's just say Firebase dot storage we need to grab the storage here now we'll say storage and within the storage I want to select a reference we have selected the storage left now now what we are going to do is let's say const file ref file ref is equals to this storage ref which we have created above dot child we will be selecting a child from there and after selecting the child we will be passing in like this selected file dot name we are just passing in the name of this within the storage report we are going to do is we will be creating a file whatever I mean whatever file we have uploaded it will have a name right and we are setting that name to this child within this storage rough that's what is happening here now we will upload this file ref okay so we'll say file ref dot Port we'll say put and then we will pass in the selected file here and after this we'll say dot then dot then what you do is okay not this dot then we will select uh something here a parameter it will be snapshot like after change like after upload after changing the storage bucket I want some changes within my app as well so that's why snapshot is used within the snapshot we are going to say the snapshot dot reference dot get download URL we are getting the download URL here right that is it now after this we are going to say dot then okay this dot then should not be here it's not after this we're saying here so after we have downloaded the download URL then what we're gonna say is within this we will have a parameter that is our download URL so let's just have it and after this after having this download your url as a parameter we are just setting that download URL let's just log it also I will log it I will log this download URL as well as I will just set my image URL to be the download URL all right that is it now we can do one thing here this is an if condition if there is an error I'm going to say else just log no file selected no file selected so select one that is it that should be fine right now that is it our function is complete everything is that's it that is nothing nothing else to do that is it now as soon as I upload something everything will be fine just right there so now as we are done with this what we are going to do is go here now something important I have already added my in a Firebase config within this index.js which I have removed earlier so I've added it and everything is fine now the we have imported everything we need we have created the function we have created the input to select the file now let's just test it if I click on choose file and click on this let's say Kakashi this time as soon as it is uploaded we will see the URL here Ctrl a control C and paste it here you should see the image you can see it here and if I go to my storage and hit refresh here Ctrl R it should refresh and I should have one more image that is kakashi.jpg right in my storage bucket you can see here Kakashi if I click on it you should see this image right open image in new tab you should see the image so this is how you can do now you can simply grab this URL which you have added here and send it to your database using API fetching post request that is fine you want a tutorial on how to do that you can let me know in the comments below and that is it for this video guys we'll meet soon again with an awesome video thanks for watching

Channel: Ashish Nallana

Views: 2,406

Keywords: firebase, firebase tutorial, MERN File Upload using Firebase, how to upload files and images to mongodb, firebase storage, reactjs, mern stack, how to upload files to mern project, multer, mongoDB, react file upload, mongodb file upload, cloudstore, firebase cloudstore, reactjs tutorial, how to upload images to mongodb, image upload, mern stack project

Id: Op5LkZiAn2E

Length: 10min 42sec (642 seconds)

Published: Tue Aug 01 2023