How to upload image in React js Mongo db and node. Display image from Mongo. Convert image to Base64

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 and fetch it again and show it to your React Js application.
Thank You.
Node Js and Mongo Db tutorial.
• #1 Explanation about h...

[@michellejanay4704]

Great, straightforward explanation! Thank you so much!

[@maazshaikh2953]

Thanks a lot man. Searched so much for this finally understood now

[@ApataHitz]

Just what I was looking for. Thank you.

[@mathewuy527]

awesome tutorial new subscriber here, the upload use cases in your channel are awesome, God bless you

[@rabi7331]

You have great playlist for beginners that wants to learn about MERN stack 👍

[@vijayr5530]

i wasted one day for this storing image as base64 in mongo finally completed tq very much

[@adi411b]

1k complete congrats 🎉

[@patelaryan0914]

Thanks For considering my request👍👍

[@rajatshukla2605]

Thank you this was extremely helpful!!

[@devanshkapoor3179]

Thanks a lot bro! Really helpful video and great explanation as well!

[@padmanabhmalwade2750]

Very Helpful Brother Keep It Up 💯

[@victortemple6665]

i want to thank you so much for this explanation. it help me a lot!

[@thedebugarena]

Thnx

[@thedebugarena]

You can checkout other videos too

[@codingforyou]

Thankuu so much you saved me🎉

[@ayush1344]

Amazing explanation

[@philipsjose6210]

thank you bhai ek din nikal gaya dha ise solve karne keliye tere vajah se chutkiyo me ho gaya

[@JS_shorts_dev]

Nice, thanks bro

[@mainakmukhrjee6328]

Thanks man this helped a lot

[@thedebugarena]

Thnx Make sure to checkout other videos too.

[@user-jf1xd3fj9o]

Thanks for explaining in easy was!!

[@thedebugarena]

Glad it was helpful!

[@marvelworld5210]

Thanku man ❤️

[@shobinsebastian7745]

Yes please do the efficient way too...

[@ameeribrahim13]

Thank you

[@erfanebrahimi2731]

NICE❤

[@ankanbasu7381]

thanks. it's really helpful.
and how do i serve the image directly from url ?
for eg at 12:01, if we go to that url, i want it to display the image instead of base64. (so that inside our front end i can just do
instead of calling the api.)
how to do this?

[@thedebugarena]

Yes same way you can store that url in state and pass that state in src

[@ankanbasu7381]

@@thedebugarena no no
I'm not talking about front end
i want the backend to serve the image directly.
for eg if i go to
localhost:5000/image/xyz.png
i can see the image xyz.png.
how to do it ?
😓

[@k.ashutoshbaitharu3964]

Please do a video on efficient way of storing and retriving image in mern app.

[@thedebugarena]

It is uploaded

[@k.ashutoshbaitharu3964]

​@@thedebugarenathank you.

[@sh44ko58]

Please sir, make a video where we can storage the images like this way, but just in more efficient way, and maybe with Firebase !

[@thedebugarena]

More efficient way
th-cam.com/video/j_EAwG9Rwd4/w-d-xo.html

[@EdwardYambasu]

Thanks

[@vernevens1598]

I would like to know how to download the base64 image and display it in an image tag from next image

[@muratyagc8441]

thanks

[@sajalmangal4113]

Sir make a video on efficient approach to store images in mongo db

[@thedebugarena]

Made it
th-cam.com/video/j_EAwG9Rwd4/w-d-xo.html

[@patelaryan0914]

Also need to know the efficient method (using Multer)

[@thedebugarena]

Sure

[@piyushrai1966]

Please do the efficient way too

[@ayush1344]

brother pls make video on most efficient image storing

[@thedebugarena]

You can check in this playlist that video is already available

[@nucmd1433]

i don't quite understand the base64 to image conversion, base 64 will be automatically converted back to the image upon transfer and the src attribute of the img tag?

[@thedebugarena]

Yes it will

[@investandcyclecheap4890]

do you know a way to compress these on the backend? I am trying to do the same thing but my file size is ~4 mb or so for each file. It would be awesome if I could shrink it down. I unfortunately have to use PNG type because I need my background transparent

[@thedebugarena]

Better will be you use multer check the video after this in that you don't have to worry about anything.

[@venugopal-km4hf]

@@thedebugarena it's better using multer, but it is not working when using with deployed url string bro , images upolading in backend upload folder only when using localhost from client side

[@thedebugarena]

@@venugopal-km4hf It will work, you just have to mention that particular folder nme in which your image is uploaded as public static inside your node js code.

[@abdulmomin2243]

CORS error on Base64 images with large image size how to fix it

[@ramodsasanga6169]

Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
i got above error.please help me

[@thedebugarena]

Where you are getting this send me code ss on instagram

[@ramodsasanga6169]

​@@thedebugarena I was give an value attribute to the like this. That's why I got this error. I removed the value attribute then the error was gone.

[@akeelaameer9006]

Hi!! I need to upload and image and detect the object in it and then extract that object and download how can I connect it with the mongodb and node js.

[@thedebugarena]

Watch this video in this I have shown how to connect mongo and node with react
th-cam.com/video/8zCZqGLHQQ0/w-d-xo.html

[@ayushgoel9948]

please make another vidoe if i wanna store it on large scale?

[@thedebugarena]

You can use multer I already have a video on that.

[@nitugiri8872]

can you show using mysql

[@user-zp1yi9ks1z]

At last u need to refress then the image is shown there , what we can do so that we donot need to refress??

[@thedebugarena]

I have shown that in the video but if you want you can do like this when you are uploading the image, image is uploaded successfully there call the function to get fetch the image.

[@talhakhan4423]

i have succesfully coverted image to base64 but while saving it to mongodb i am getting this error: PayloadTooLargeError: request entity too large

[@thedebugarena]

You can increase the value in mongo db

[@talhakhan4423]

@@thedebugarena I don't know how to increase please help me

[@sh44ko58]

@@thedebugarena but how ?

[@sh44ko58]

@@talhakhan4423 did u fixed it ?

[@talhakhan4423]

@@sh44ko58 no bro
I just used multer for now

[@anirbandas5852]

thankyou sir .. but sir how to deal with pdf of large size.?

[@thedebugarena]

For large size or large quantity this is not efficient way you can wither use multer method or stor image or pdf on firebase and then get url from there. I have made video on both this topics you can checkout that.

[@susmitapati2632]

Where you have written the choose file

[@thedebugarena]

In ui I have created a input which will take my file and send that to backend

[@logesh.t9918]

how to add already having image in mangodb

[@asmrjavascript_]

Hiii,
i face this error: PayloadTooLargeError: request entity too large
how to I fix ????

[@thedebugarena]

You can set the limit by your own

[@asmrjavascript_]

@@thedebugarena I set limit, then show error?? Please make video this topic

[@zakariaelharchi3699]

please , is that can work for excel files?

[@thedebugarena]

Yes it can. In react where you define file type as image you can define it onlly as file then it can take any type of file. Same goes for multer there also change file type to file it would accept all type of files.

[@abdulmomin2243]

CORS error on Base64 images with large image size

[@ApataHitz]

Am getting this erorr Error: request entity too large

[@thedebugarena]

Your file size may be too large

[@applelemon9371]

bro i got error Status Code:413 Payload Too Large, when i upload how can i fix this ?

[@thedebugarena]

add this in your code app.use(express.json({limit: '50mb'}));

[@applelemon9371]

@@thedebugarena thx dude

[@primefindz]

how to do the same for react native?

[@thedebugarena]

Process is same and most of the coding also

[@primefindz]

@@thedebugarena can you guide me plz I'm stuck on conversion from image picker to binary data

[@thedebugarena]

@@primefindz Dm me on insta gram

[@supratiksarkar1195]

when i logout form the account, the image gets deleted.

[@thedebugarena]

It gets deleted from database?

[@KadamVaibhav-gn8pw]

Can you share the github gipo

[@thedebugarena]

I don't have repo for this

[@malayali1305]

after adding moer than 20 product it become very slow

[@thedebugarena]

Yes this is not the recommended one. You can try using multer

[@yashharitash2302]

Code for this ?
\

[@kumarnishant6924]

how i can get your code??

[@thedebugarena]

There is link in description

[@kumarnishant6924]

Can you please provide the code🙏

[@vish814]

git hub ka bhi link de de yaar uska

[@thedebugarena]

It is already uploaded

[@shridharkandikatla]

Want in effecient manner

[@thedebugarena]

More efficient way
th-cam.com/video/j_EAwG9Rwd4/w-d-xo.html

[@dhanujayayapabandara384]

Dont use base 64 method.running process is slow.use firebase and generate url and .after generated url save mongo db

[@thedebugarena]

Yaa correct this is one of the way we can use to upload image, storing the image to firebase or any cloud platform is one of the most efficient way.

[@KadamVaibhav-gn8pw]

Or just give the codefile

[@budisai3616]

source code

[@innergrowthjourney701]

Your screen is tiny

[@thedebugarena]

Will zoom more from next video

[@vitorsanto1479]

pls help me!!!, how can i showing off these images in my handlebars-html( it´s does wrong).
app.post("/Data",(req,res)=>{
const novaPostagem = {
titulo:req.body.titulo,
descricao:req.body.descricao,
comentario:req.body.comentario,
image:req.body.image
}
new Postagens(novaPostagem).save().then(()=>{
console.log("salva com sucesso!!!"+ req.body.image)
}).catch((err)=>{
console.log("erro ao salva:"+err)
})
})
{{#each Postagem}}

{{titulo}}
{{descricao}}



{{else}}
nada encontrado!!!
{{/each}}
the image code is save this form in my mongodb:
image: BinData(0, 'bGy9nuyubzIuc99G5n')

[@thedebugarena]

Is there only one image?

[@erfanebrahimi2731]

Yes please do the efficient way too..

[@abdulmomin2243]

CORS error on Base64 images with large image size how to fix it

[@thedebugarena]

You can increase payload size in mongo db

[@thedebugarena]

You can increase payload size in mongo db

[@abdulmomin2243]

@@thedebugarena how increase payload size in mongo db

[@abdulmomin2243]

you can make video increase payload size in mongo db