Upload Images / Files to Firebase Cloud Storage using Node JS

hello everyone in this video I will show you how you can upload your documents or Firebase as we know Firebase is a platform and that is powered by Google that gave us variety of services that we can use in our application I am on the official website of Firebase that is firebase.google.com firstly you need to create your account here as I have already created a account I just need to click on get started and it will take me to my console firstly you need to add a new project by just leaving giving the name of your project here I have already created some projects I need to select any of my project hmm on the project over your screen you can see large number of services and that Firebase providers it provides us services for authentication for storage for storing for real-time database for testing and large number of others firstly you need to add a new application and you can you can connect your iOS application your Android application or your web application in this video I will show you how you can connect your web application with it you just need to click on ADD register a web application and give the name of your app here like app demo and you need to register your application when you click on the register app Firebase will provide you with your API key your oauth domain your project ID database URL storage bucket messaging center ID app ID and measurement ID all these parameters will be given to you after registering your application you need to click on storage as we are using the service for uploading our documents and you need to modify your rules first change the rule to allow read and write to all users as I am creating the app for testing purpose so I can allow our users to read and write to my storage service when you are creating the application for some production use you can modify these rules to restrict everyone from four to six some specific users to accessing the storage service click on files and here you can upload various files using your web application so let's jump into the vs code this is my configuration file and this is my server.ts file that is my typescript file and we're just I just initialized my server here in my controller file I need to import or install some packages first you need to install Express Firebase and motor Express is for web application Firebase is required for for getting in touch or for uploading your documents on Firebase and malter is another package that npm provide and that help us to deal with form documents as we are uploading our documents like images Json file or PDF file so it is required to import multi in it I have imported melter and imported from initializer from Firebase app after that you need to import and get storage reference or get download URL or uh and the upload by it is resemble from Firebase storage firstly you need to initialize your Firebase application by providing it with a configuration uh object that I have written in configure config file I have placed over my private variables in the environment variable file after initializing your application you need to initialize the closed storage and get the reference to the closed storage service by calling the get storage method after that you need to you need to pass the storage object to multit and set up the motor as a middleware as we are using the motor to grab all the documents that we uploaded through form this is the API that will be called when the user click on the upload photo button and I am passing the request to the multimeter way and grabbing the file name this is the reference to which we need to pass the storage and the foil I am appending that date time with my original and with the name of my file the purpose of doing this is that uh when I upload two documents or two images with same name the Firebase replace it when I append the date time with it it will not be replaced and every new document will act as a new document or unique document after that we need to create a meta file and that contains the type of the file because the file can be image or the PDF file or the Json file any file so we need to pass the type of the file with it also so we are now uploading our file to the Firebase storage we need to pass the storage reference we need to pass the buffer of the request file and the metadata we need to update for this function to execute when it is successfully I execute it will upload our document to Firebase storage and give us your the URL of the uploaded file so we can get our URL by calling the get download URL and I am sending the response to it this is a function that I am using to get the current date and time so I need to run this so it is ending without any error so let's jump into the postman and send that request so I am first I need to select some file I am selecting this file to upload on a Firebase storage so this file is selected I need to send the request it will take some time to upload my document to Firebase storage and give me the uh the download URL that I can use so as you can see the github.png successfully uploaded to uh Firebase storage we can also verify it by refreshing it the storage so as you can see the GitHub images successfully uploaded on Firebase storage we can also view it by clicking on the name of the file so in this way you can upload your documents your PDF files your Json file your uh PNG jpg any file to Firebase thank you very much

Channel: Coding with Kazim

Views: 29,468

Keywords: firebase, nodejs, firebase storage, firebase tutorial, firebase tutorial for web application, firebase tutorial for beginners

Id: CgMD6VykQXQ

Length: 7min 40sec (460 seconds)

Published: Thu Feb 02 2023