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

[@maazshaikh2953]

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

[@vijayr5530]

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

[@michellejanay4704]

Great, straightforward explanation! Thank you so much!

[@falgunsorathiya5361]

Thanks a lot. Your video was really very helpful. Keep it up!!!

[@devanshkapoor3179]

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

[@rajatshukla2605]

Thank you this was extremely helpful!!

[@ApataHitz]

Just what I was looking for. Thank you.

[@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.

[@rabi7331]

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

[@philipsjose6210]

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

[@adi411b]

1k complete congrats 🎉

[@shobinsebastian7745]

Yes please do the efficient way too...

[@mathewuy527]

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

[@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

[@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 ? 😓

[@padmanabhmalwade2750]

Very Helpful Brother Keep It Up 💯

[@vernevens1598]

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

[@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

[@Coder-d5n]

Thanks for explaining in easy was!!

[@thedebugarena]

Glad it was helpful!

[@patelaryan0914]

Thanks For considering my request👍👍

[@sajalmangal4113]

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

[@thedebugarena]

Made it kzbin.info/www/bejne/oJCocqp9breqmpY

[@patelaryan0914]

Also need to know the efficient method (using Multer)

[@thedebugarena]

Sure

[@irfanshahDesigns]

hi, i'm getting this error >PayloadTooLargeError: request entity too large when I convert image to base64String

[@thedebugarena]

You can increase the size in backend app.use(express.urlencoded({ limit: '10mb', extended: true }));

[@logesh.t9918]

how to add already having image in mangodb

[@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.

[@mainakmukhrjee6328]

Thanks man this helped a lot

[@thedebugarena]

Thnx Make sure to checkout other videos too.

[@abdulmomin2243]

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

[@codingforyou]

Thankuu so much you saved me🎉

[@BhanuPratapSingh-v2q]

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.

[@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 kzbin.info/www/bejne/bqumi6R9ga2Eh5I

[@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

[@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 kzbin.info/www/bejne/oJCocqp9breqmpY

[@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

[@ayush1344]

Amazing explanation

[@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.

[@ayush1344]

brother pls make video on most efficient image storing

[@thedebugarena]

You can check in this playlist that video is already available

[@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

[@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.

[@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.

[@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

[@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.

[@abdulmomin2243]

CORS error on Base64 images with large image size

[@Lieutenantsab]

Thanku man ❤️

[@JS_shorts_dev]

Nice, thanks bro

[@ameeribrahim13]

Thank you

[@supratiksarkar1195]

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

[@thedebugarena]

It gets deleted from database?

[@nitugiri8872]

can you show using mysql

[@piyushrai1966]

Please do the efficient way too

[@yashharitash2302]

Code for this ? \

[@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.

[@linda_erose]

how to do the same for react native?

[@thedebugarena]

Process is same and most of the coding also

[@linda_erose]

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

[@thedebugarena]

@@linda_erose Dm me on insta gram

[@EdwardYambasu]

Thanks

[@KadamVaibhav-gn8pw]

Can you share the github gipo

[@thedebugarena]

I don't have repo for this

[@Manu_krishnan]

after adding moer than 20 product it become very slow

[@thedebugarena]

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

[@erfanebrahimi2731]

NICE❤

[@kumarnishant6924]

how i can get your code??

[@thedebugarena]

There is link in description

[@kumarnishant6924]

Can you please provide the code🙏

[@muratyagc8441]

thanks

[@KadamVaibhav-gn8pw]

Or just give the codefile

[@budisai3616]

source 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 kzbin.info/www/bejne/oJCocqp9breqmpY

[@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