Upload Images / Files to Firebase Cloud Storage using Node JS

[@afiffahmi1274]

Thanks its works for me on Nov 2023. You saved me :)

[@CodingWithKazim]

Glad to know it helped 🎊 Please consider subscribing to the channel for more awesome videos.

[@saurodev8261]

Thank you so much my friend!

[@CodingWithKazim]

Glad to know it helped. Please consider subscribing to the channel for more awesome videos.

[@lucasgiunta8874]

You are using the client lib from firebase, usualy on the server side it is recommanded to use the firebase admin sdk.

[@CodingWithKazim]

I did some research on this, Then I came to conclusion that most Developers prefer to use separate library specialize for each Firebase service rather then using only firebase admin.

[@rnytpl]

Thanks for the tutorial, helped a ton!

[@CodingWithKazim]

Glad to know it helped 🎊

[@rizkijanuar205]

Can you help me sir ? My 'req.file' in 'upload-file.controller.ts' is undefined ?

[@CodingWithKazim]

In order to use req.file, you need to have a middleware function in your Express app that is capable of processing file uploads. This middleware function can be provided by a third-party package such as Multer, which is a popular choice for handling file uploads in Express apps. If you're still having trouble with req.file, it's possible that there is an issue with the way you're setting up your middleware function or with the way you're processing the uploaded file. You can try logging the req object to the console to see if req.file is present and to inspect the contents of the object. This may help you identify any issues with your code.

[@arnabsarkar5245]

Thank you so much sir. Just wanted to ask another question. Now if i want to make an api in which i want to update the image url in the database, then do i again have to initialize the storage ?

[@CodingWithKazim]

Nope, in case of updating the image url in database you don't need to initialize the firebase storage again.

[@vanly4]

Can I ask what databaseURL is? When creating a project, it's not there

[@CodingWithKazim]

In order to use database of firebase, You need to create a database on Firebase Firestore, and you will get a firebase database URL that you can use in your projects. I have place all these variables in the .env file.

[@zainulkhan8381]

How to save image path in a document so that we can show documents with images while we map over them. I am not able to do it in react

[@CodingWithKazim]

To save the image path in a Firestore document for displaying documents with images in React, you can: 1- Upload the image to Firebase Storage. 2- Obtain the download URL of the uploaded image. 3- Store this URL in the Firestore document alongside other document data. In React, when mapping over Firestore documents, retrieve the image URL and use it to display the images in your UI. This way, you can associate images with your Firestore documents and show them during mapping.

[@zainulkhan8381]

@@CodingWithKazim Yeah I did it my issue was I was not able to get downloadUrl as I was not passing the storage ref correctly. Thanks for your reply and help

[@pyaephyo1801]

omggg..thanks a billion for this tutorial

[@CodingWithKazim]

Glad to know it helped 🎊

[@syedhasnainraza290]

Very helpful. Thank you

[@CodingWithKazim]

Glad to know it helped!

[@hondaxblade2127]

Thanks you bro for valuable information. ❤ Actually I'm working on my production app that contains many images, I'm using MERN stack to build the app, on problem is that I can't store that images into base64 on mongodb as it increase the size of the images and reduces the performance of my app. So I just discovered your video and found that firebase gives the image link that I can store on my MongoDB database is it efficient to use firebase + mongodb?

[@CodingWithKazim]

Glad to know it helped you. And yes, it's very effective and best practice to store only images URLs in database i.e mongoDb and store your images/files in firebase or any other service like this. Always avoid storing images or files directly in database, As it also increase your DB size and will be more difficult to handle. Hopefully this information will helps you.

[@hondaxblade2127]

@@CodingWithKazim Thank you bro u helped me, happy to be your subscriber if you provide valuable content to us ❤

[@CodingWithKazim]

@@hondaxblade2127 Thanks. Will try my best.

[@diegoramirezguerrero1863]

Thanks! it was very helpful. However, do you believe Multer is deprecated?

[@CodingWithKazim]

If ‘multer’ is deprecated, then you use some alternative packages of Node like busboy, multiparty, formidable etc. ‘busboy’ can be used as an alternative to multer. It provides similar functionality for handling file uploads and is actively maintained.

[@ashishsharma__]

That's buddy, it was very helpful

[@CodingWithKazim]

Glad to know it helped 🎊

[@ndtmusic0504]

I got the error: "UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'byteLength' of undefined", how to solved it sir?

[@CodingWithKazim]

@NDT I haven’t used bytelength in my code, Try to follow steps I explained In video. However, This error message suggests that you are trying to read the byteLength property of an undefined object, which is causing the TypeError. This often happens when a required parameter or object is missing or not properly initialized. To fix this issue, you should check your code to ensure that you are passing all required parameters to the function, and that they are properly initialized before being used. Here are some steps you can take to debug the issue: 1 Check that you are passing the correct parameters to the function. Make sure that you are passing in the correct data type, and that the values are not null or undefined. 2 Check that the object you are trying to read the byteLength property from is not undefined. You can add a console.log statement to print the value of the object and check if it's undefined. 3 Check the Firebase Storage documentation for the correct syntax and parameters for uploading files to the storage. 4 If you're still having trouble, try searching for similar issues in online forums or Q&A sites like Stack Overflow. Often, other developers may have experienced the same issue and posted a solution that can help you. Hopefully it will help.

[@jasonbourne8566]

make sure you are sending the filename. Buffer in firebase uploadBytesresumable function. I was also facing the same error. It was occurring because I was sending the whole file, instead of file.buffer.

[@elijahlair]

Worked for me, Thank you so much

[@CodingWithKazim]

Glad to know it helped. Please consider subscribing to the channel, it means a lot to me.

[@twicelyn2600]

Thank you, helped me a lot! Good explanation.

[@CodingWithKazim]

Glad to know it helped 🎊

[@nazarukDima]

Thanks for your tutorial!

[@CodingWithKazim]

Glad to know it helped 🎊

[@randomclicks7152]

thank you for helping

[@CodingWithKazim]

Glad to know it helped.

[@deepanshadow3997]

Hi bro I need apk for Android how to create bro Img

[@CodingWithKazim]

Hi, To create an APK for an Android app, you need to have knowledge of Android app development and programming. You can use Android Studio to build your app, test it on an emulator or device, and generate the APK file by clicking on "Build" and selecting "Generate Signed Bundle/APK". However, creating an APK requires a significant amount of knowledge and experience with app development, so it may be helpful to take an online course or tutorial to learn the basics before attempting to create an APK file.

[@deepanshadow3997]

@@CodingWithKazim detail explain bro I need firebase connect

[@teeratphoowaborwornphimkul3501]

Your project Cannot run Master ,,, ==> but Thank you

[@teeratphoowaborwornphimkul3501]

Master I found issue that Pop : Change node version Thank Youuuuuuuu

[@CodePremier2000]

Thank you so much

[@kossei8096]

hi, is the source code on github, if there is very helpful

[@CodingWithKazim]

OK, I will try to upload it on github. Then add the link in the video description.

[@sagurah]

thanks

[@CodingWithKazim]

Glad to know it helped 🎊 Please consider subscribing to the channel for more awesome videos.

[@shivendrasingh3069]

Please provide code

[@CodingWithKazim]

Added the GitHub repo link in the description of this video.

[@luispernalete8165]

i love u bro