How to upload image in React Node and Mongo db using MULTER | Node JS + MULTER | Upload & Retrieve

Hello Guys,
Check out this amazing cloud platform:
ZEGOCLOUD SDK provides easy video call SDK, voice call SDK, live streaming SDK and chat SDK for real-time interaction.
Get ZEGOCLOUD SDK for 10,000 free mins: bit.ly/3OznGu6
Pre-built UIKits in low codes: bit.ly/3SN4Ja1
Create docs sites with Docuo now: bit.ly/3SOF5S0
Top 10 video conferencing SDKs for you: bit.ly/3Sx6mHg
#zegocloud #uikits #sdk #api #react
In this tutorial I have shown you that how can you upload an Image from react to mongo db by creating an api in node js + multer and fetch it again and show it to your React Js application.
Thank You.
GitHub Link:
github.com/the...
Node Js and Mongo Db tutorial.
• #1 Explanation about h...

[@idreamgames]

Amazing video but if you had saved it like baseurl/filename in database instead of getting it from local dir (src/images) that will be very helpful.

[@AkshayaBatharaju]

please help i pasted the exact code that you provided but when i run localhost:3000 i am getting site cannot be reached. when i run localhost:5000 backend output I am getting. What might be the error

[@doloresmampoko2463]

thank you but its not working for me , the bug started when i put the url front in multer stockage , can i have help plz ?.

[@nagaBhushan-pb6gu]

Disk storage is not working after deployment

[@iganic7574]

is we can't save entire image in mongodb in binary form ?

[@thedebugarena]

We can store in base 64 check previous video in that I have done using base 64.

[@friday077]

@@thedebugarenai think it just encode the filename but he ask about the is it possible to upload a image direct with out any create folder like upload

[@afifnusada4712]

bruh, your grammar is a disaster💀💀, this is the first time i see a person using “is” and “can’t” at the same time💀💀.

[@thedebugarena]

@@afifnusada4712 sorry about that. Will improve.

[@maheshbhatt1505]

Hey im getting this error Uncaught ReferenceError: require is not defined. why is it not defined or do i need to install some packages for that . Im using src={require(`./images/${data.image}`)} Please help at 16:45 part of your video

[@thedebugarena]

Ideally it should work. I don't know why it is giving you error but still try this solution

[@DennisIrungu-dx8md]

I'm also getting a similar error

[@OnlyMagdy]

using import image from 'image/path' instead and use 'image' aka the path of the image in the image element instead also the error happens because your npm config is using npm modules aka type in package.json is set to module instead of commonjs

[@malikbhai2285]

thank you soo much for this video for me very helpful..lot of thanks

[@rajeshramjibanswal1277]

Suppose we get image outside the project folder using API then what should I do

[@thedebugarena]

Then we might have to use an external package which will allow this

[@thedebugarena]

The solution is given in my next video in which i have shown how to upload pdf

[@jumbo999614]

Since both Base64 image file and regular image file have data type of String in MongDB, can we display both images at the same time using the same schema? Right now I'm able to upload both Base64 and regular filename to MongoDB using the same Schema. It would be great if there is some codes to check if the image is stored as filename or Base64 in MongoDB and display them properly.

[@thedebugarena]

You can check my other video on the same but using multer. In that I am storing image name only

[@jumbo999614]

@@thedebugarena Thanks again for replying. I have more questions. If you deploy the project onto the internet, where will the actual images be stored? on their server's storage disk? and on the Register page, you hardcode Admin secret key. Isn't security risk? The server that store your code will have access to this key? And the secret key will be able to update? Let' say someone accidentally finds out the secret key and you want to change it. What would you have to do? I'm just curious.

[@gauravbhagat2506]

What if i want to host this app. Now it will not work right?

[@thedebugarena]

Yes it will work. While hosting you just have to give that folder read and write access.

[@xeniyadobro380]

Thank you!

[@thedebugarena]

You're welcome!

[@malikbhai2285]

ok Bro, thanks image done..now make video for pdf file upload or download or video upload or play in mern stack wtih next.js

[@thedebugarena]

Sure will try

[@thedebugarena]

Video is out you can check

[@ramkrushnaparkipandla411]

Thank u❤

[@ShanuKhan-jx4xy]

How to Validate form-data before using Multer ?

[@malikbhai2285]

sir i want to upload pdf file or video then video play and pdf file download

[@mario_luigie4593]

Good Job! Thank you!

[@thedebugarena]

Our pleasure!

[@meow3065.]

what will happen if i host my website will the uploads folder still contain the images for particular user or how does it work

[@thedebugarena]

There you have to manage the folder structure accurately but it works there

[@LukmaansStack]

how to manage that folder structure please tell me @@thedebugarena

[@thedebugarena]

@@LukmaansStack While hosting there are few things we have to do 1) To whatever folder you are adding the image it should have access to read and delete. 2) You have to specify proper location to upload the image.

[@Lieutenantsab]

Bro mene frontend & backend ke liye alg se folder bana rakhe hai 2, and backend me index.js hai java multer laga hai and fronted wale folder me react hai. Problem: Multer destination cb(null, ".../fronted/src/component/") frontend path dalne per image phoch nahi rahi hai image folder me. Please help ❤️

[@thedebugarena]

In that case you can put them in same folder or you have to use some external package to achieve them

[@Lieutenantsab]

@@thedebugarena yes unfortunately now I'm using all the fronted and backend in same folder 🥲

[@thedebugarena]

@@Lieutenantsab Ohhh luckily now I got the best solution of this also in my next video I will show that

[@renzxstech1761]

how about my backend and react app is in the different directory?

[@thedebugarena]

You can do this by creating a static folder in your backend where you can store any files that can be accessible for anywhere.

[@sebastianmontoya7217]

Thanks for the video this seems to be great for working in local. In the case of deploying to a host, is there a way we can get photos uploaded somewhere so that way we can pass the url of the image? All done from within the app? Like upload image in frontend, backend gets it uploaded to a third party, creates a url , and then adds that url to mongodb .. when we call mongodb it will have url of images which we can then map through and show

[@thedebugarena]

Yes while hosting also we can use multer and it works. But, there is one more solution which totally suits your requirement is using cloudinary. You can upload image there it will return url and then you can store that in mongo db. Very soon I will be posting video on this but you can checkout others.

[@Shanky_17]

Do it fast bro@@thedebugarena

[@AbiRamABII]

bro in backend while store , what should define the path name for storing the images after deployment

[@thedebugarena]

After deployment if your backend folder is at same location then same code should work. You can access the folder like this './uploads'. But if your both the folder is at different location then we can do like this: Suppose your image is getting uploaded into "Uploads" folder at the backend using multer then in app.js we can add this line "app.use("/uploads,express.static("uploads")) this will make your uploads folder static and it can be accessed from anywhere. Then in your react you can access image using location like "localhost:5000/uploads/file.jpg". In place of localhost you can pass your url. For better understanding you can watch this video kzbin.info/www/bejne/fKfTZ3h6frWGebcsi=hPijFFEHqPgO4M1w at timeline 17:38

[@AbiRamABII]

@@thedebugarena tnx bro ,you're a lifesaver!

[@shahinrohaman6257]

I got network error: axios error how can I fix it

[@logicfy]

check endpoint

[@naseeriyat9241]

Thanks guru ji

[@gabrielaguilera2015]

thanks bro

[@xyz-y7v8m]

amazing bro

[@thedebugarena]

You can checkout for pdf also

[@pawanyadav4417]

what if frontend is at another place how to tell backend to use src

[@thedebugarena]

In that case what we can do is Suppose your image is getting uploaded into "Uploads" folder at the backend using multer then in app.js we can add this line "app.use("/uploads,express.static("uploads")) this will make your uploads folder static and it can be accessed from anywhere. Then in your react you can access image using location like "localhost:5000/uploads/file.jpg". For better understanding you can watch this video kzbin.info/www/bejne/fKfTZ3h6frWGebcsi=hPijFFEHqPgO4M1w at timeline 17:38.

[@sreenija3703]

i have a form which consist of personal details and image .How to set mongodb schema for this type of data.Can we send text and image data at a time to server

[@thedebugarena]

Yes you can in this in schema we have added only image you can add other things too. In front-end store all the different values like name, image etc in their particular state and on submit send them all to backend. It will work

[@sreenija3703]

@@thedebugarena can you please make a video on that type of form too

[@ranjitdevadiga6880]

will this work fine when we deploy it.

[@thedebugarena]

We will have to configure it properly but it should work

[@008ajaykumarpaswan6]

bhai here uploads folder is automatically made or have to made

[@thedebugarena]

Both will work

[@malikbhai2285]

bhai mere pass frontend me ja ker image save ni ho rhii..?

[@mustkeemkhokhar7030]

bro try both axios and and browser fectch api got same api error 404 page not found.. any help

[@thedebugarena]

Dm me on instagram

[@kuretinamahsivaya5469]

how can i send 2 or more images in array

[@thedebugarena]

I input tag there is option of multiple by using that you can select multiple image but In backend you will have to modify according to that

[@kuretinamahsivaya5469]

@@thedebugarena please tell me also that

[@digitaltanzeel1056]

how can we my backend app name is backend and frontend app name is frontend , how can we give image folder location in backend in place of upload file .. will it work , please let me know

[@thedebugarena]

Yes it will work. If you are having two different folders at different location then you might have too work hard and use some External package to achieve that

[@BsratWellerufael]

no need to use buffer as a datatype while we store an image to mongodb ???

[@thedebugarena]

Yes you can change your datatype to buffer but string is also doing the job so I used that.

[@deepikadeepu9534]

If you deploy the project onto the internet, where will the actual images be stored? on their server's storage disk? can anyone answer this please

[@NguyễnHàiNam-h6p]

Yeah bro

[@thedebugarena]

Yes it will be stored on Server's storage disk.

[@gamingarena5045]

I'm doing the same but it says require is not defined when I write require in my img tag.

[@thedebugarena]

Are you writing in{}

[@gamingarena5045]

​@@thedebugarenayes

[@KadamVaibhav-gn8pw]

where is your code

[@malikbhai2285]

bro same this work with next.js full stack make video?

[@thedebugarena]

Dm me on instagram

[@malikbhai2285]

@@thedebugarena what mean this?

[@Aben7331]

Hello can u please help me I get stucked🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻

[@thedebugarena]

Dm me on instagram

[@viveksoni7217]

bhai deploy bhi krne ka bana deta 🥲

[@ArdalanHosseiniBarzanji]

Pleas share source code in github repasetory

[@thedebugarena]

github.com/the-debug-arena/multer-image-upload.git