Store Image in Base64 in MongoDB Using MERN Stack

แชร์
ฝัง
  • เผยแพร่เมื่อ 18 ธ.ค. 2024

ความคิดเห็น • 81

  • @bestrecipes3373
    @bestrecipes3373 2 ปีที่แล้ว +20

    BEST TUTORIAL EVER!! YOU HAVE SAVED ME!!
    i was stuck for 2 weeks and man! your tutorial help me to add the most important feature on my app!!! many many many thanks!!!!

  • @raymondmichael4987
    @raymondmichael4987 2 ปีที่แล้ว +17

    The timing couldn’t be better, thanks buddy

  • @Shrutikahilale
    @Shrutikahilale ปีที่แล้ว +2

    I don't generally comment on any videos. But yes, I am doing it because this video has helped me truly today. I can't thank much 🙏🙂

  • @parthkambli3339
    @parthkambli3339 ปีที่แล้ว +1

    Wow, what an excellent tutorial! 🙌 Your explanation was clear and easy to follow. I had been struggling with this for a while, but your solution worked like a charm for me. Thank you for sharing your knowledge and making it so accessible.

  • @murtuzakhan2275
    @murtuzakhan2275 ปีที่แล้ว +5

    thank you so much bro. This base64 stuff is way easier than multer!
    Made my day!

  • @urwrstntmre
    @urwrstntmre หลายเดือนก่อน

    Thanks for the clear explanation of what you're doing; great video!

  • @oualidnouari2660
    @oualidnouari2660 ปีที่แล้ว +1

    I was almost giving up to add profile functionality to my project. Thank you

  • @okereobinna5033
    @okereobinna5033 ปีที่แล้ว +1

    This is just wonderful. Thanks for the clear explanations. You are an asset to the Dev space👌

  • @aaqilkhan1289
    @aaqilkhan1289 ปีที่แล้ว

    keep it bro you gave me what exactly i was searching for? love from india.

  • @ashi1854
    @ashi1854 6 หลายเดือนก่อน

    Excellent explanation.. very easy to understand..

    • @DailyTuition
      @DailyTuition  6 หลายเดือนก่อน

      Glad you liked it

  • @martinemanuel8239
    @martinemanuel8239 ปีที่แล้ว

    I really like how to adrress this tutorial, good job man !

  • @HADASISRAELI
    @HADASISRAELI ปีที่แล้ว

    Thank you for this video! you saved me! I was stuck with this for 2 days!

    • @sai-lb7ii
      @sai-lb7ii ปีที่แล้ว

      i have a doubt
      after converting image in to binary how we call in react

  • @hit1222
    @hit1222 2 ปีที่แล้ว

    greet job always waiting to see your tutorial keep going thank you so much

  • @eliyahutarab4862
    @eliyahutarab4862 2 ปีที่แล้ว

    You are amazing the timeing of this video could not be in a bettter time

  • @izuodoh2909
    @izuodoh2909 ปีที่แล้ว

    Thanks a lot bro this helped me immensely.

  • @ManzurDeshTV
    @ManzurDeshTV 9 หลายเดือนก่อน +1

    Please mention the model of your Microphone. It's very clear. I need to buy a microphone.
    By the way, your this tutorial is very helpful for me.

  • @venkatasubbareddychundi
    @venkatasubbareddychundi ปีที่แล้ว

    Super Explanation. Keep it up.

  • @truongbang5028
    @truongbang5028 ปีที่แล้ว

    Thank you, it's very helpful!

  • @NoudvD63
    @NoudvD63 ปีที่แล้ว

    Fantastic! Thanks, helped me a lot.

  • @code-blasters
    @code-blasters ปีที่แล้ว

    thanks a lot very helpful and easiest way to do

  • @saurabhrajput5073
    @saurabhrajput5073 ปีที่แล้ว

    Thanks you for this clear explanation sir🙏

  • @antonstevens9090
    @antonstevens9090 ปีที่แล้ว +1

    Thanks a lot :))

  • @AbdurRahim-eu3zr
    @AbdurRahim-eu3zr ปีที่แล้ว

    Best 👌

  • @jefferyaaron3462
    @jefferyaaron3462 ปีที่แล้ว

    perfectly explained

  • @PTECHVN01
    @PTECHVN01 ปีที่แล้ว

    Thank you very much !!!

  • @Dark-ig7ce
    @Dark-ig7ce ปีที่แล้ว

    buen video bro 🔥❤

  • @prabhjotarora2740
    @prabhjotarora2740 4 หลายเดือนก่อน +1

    I do have a question 🙂, wouldn't this base 64 string increase the size of the database? If I want to use it in production, than it will take most space in MongoDb Atlas, for every user 🙂, for free tier 🙂, any suggestions, tips? 🙂

    • @DailyTuition
      @DailyTuition  3 หลายเดือนก่อน

      This tutorial is for understanding how to store image in base64 format in mongodb. If you have a production ready app then use S3/CloudFront store to upload images.

  • @anubhavgovind8990
    @anubhavgovind8990 7 หลายเดือนก่อน +1

    will the image persist ? I mean when the user logins next time whether he/she will be able to see his profile pic (maybe in the above code we have to add this )

    • @DailyTuition
      @DailyTuition  3 หลายเดือนก่อน

      yes. user can see his previous store images.

  • @Cysecsg
    @Cysecsg ปีที่แล้ว +1

    This is exactly what I need when i want to store in MongoDB. Not sure why most of the tutorial “mandates” multer.

    • @jumbo999614
      @jumbo999614 ปีที่แล้ว

      Large file size causes error in MongoDB. That's why.
      But multer is difficult to understand. You store just image's filename in MongoDB but actual image is stored somewhere else.
      Most tutorial says you store it inside project folder . But after the project deployed into the internet, you don't know where it is actually stored.

  • @muhammaduseram9405
    @muhammaduseram9405 10 หลายเดือนก่อน

    I just wanna ask you for our final year project our final year project this image matching lost and found system is this approach is a storage officiant because we have a lot of image as you talk about profile image but in our project we have several images so is this storage efficient and a speed time efficient for storing data number of photos in the database using the base64 method, i want real image in backend where image is processed by machine learning model in backend

  • @spondoolie6450
    @spondoolie6450 ปีที่แล้ว +2

    I'm getting the error "request entity too large" when trying to push to MongoDB. I have the Mongoose model type set to String ..... anyone have any ideas on how to get MongoDB to accept a large document?

    • @muzamilfootballer5682
      @muzamilfootballer5682 ปีที่แล้ว

      Same error plz anyone tell us how to solve large img error..

    • @chihaile3927
      @chihaile3927 ปีที่แล้ว

      metoo, i also got this error

    • @aurr690
      @aurr690 ปีที่แล้ว +1

      Don't try this it will exceed your db limit check after uploading check with uploading 10photos

    • @iMooStory
      @iMooStory ปีที่แล้ว +2

      app.use(express.json({limit: '25mb'}));
      app.use(express.urlencoded({limit: '25mb'}));

    • @abdulbasitimtiaz
      @abdulbasitimtiaz 11 หลายเดือนก่อน

      @@aurr690 sure?

  • @henryherrera5043
    @henryherrera5043 9 หลายเดือนก่อน +1

    Great tutorial. Am I the only one who's having problems with images larger than 100KB?

  • @talhakhan4423
    @talhakhan4423 ปีที่แล้ว +2

    it is giving me error while saving to database
    PayloadTooLargeError: request entity too large

    • @KingsleyOkeze
      @KingsleyOkeze ปีที่แล้ว

      Same here, been looking a solution for it.
      Let me know if you've gotten any.

    • @talhakhan4423
      @talhakhan4423 ปีที่แล้ว

      @@KingsleyOkeze i have changed the method because it was not working and now i am using multer, it is working properly

    • @KingsleyOkeze
      @KingsleyOkeze ปีที่แล้ว +1

      @@talhakhan4423 using Multer was quite confusing for me when I want to integrate it to MongoDb database, help paste the link to the tutorial you used that helped.

    • @iMooStory
      @iMooStory ปีที่แล้ว +1

      app.use(express.json({limit: '25mb'}));
      app.use(express.urlencoded({limit: '25mb'}));

  • @AbhinavKumar-ym9hj
    @AbhinavKumar-ym9hj ปีที่แล้ว +2

    PayloadTooLargeError: request entity too large
    at readStream

  • @ekonkargames
    @ekonkargames ปีที่แล้ว

    Hello Sir can u tell me ,which theme you are using..? in VS code

  • @gautamkashyap7532
    @gautamkashyap7532 ปีที่แล้ว

    Sir is it a correct way to start this project by fetching it's starting part from your Github repo ? Beacuse I am getting error while running the npm start command. Please help me out !

  • @abouteveryting4762
    @abouteveryting4762 ปีที่แล้ว

    It would be really helpful if you added subtitles to your videos

  • @shwethahb4309
    @shwethahb4309 4 หลายเดือนก่อน +1

    Sir how to run the server. its not start the server.plz help me sir

    • @DailyTuition
      @DailyTuition  3 หลายเดือนก่อน

      what is the error please tell me?

  • @naimahmed2816
    @naimahmed2816 2 ปีที่แล้ว

    Nice

  • @rsufiyand
    @rsufiyand ปีที่แล้ว +2

    Great Sir!Which font style and theme are you using in vs code? Kindly Reply.

  • @rohanloydsouza9675
    @rohanloydsouza9675 2 ปีที่แล้ว +1

    Storing image in mongo db is it good idea? Or we can store in public folder?

    • @DailyTuition
      @DailyTuition  2 ปีที่แล้ว

      use backend storage instead of public folder

    • @rohanloydsouza9675
      @rohanloydsouza9675 2 ปีที่แล้ว

      @@DailyTuition but the backend need more storage capacity right? Because next js doesn't support the production the public folder file serving is not available. So I asked this question.

  • @akshanshkaushal9422
    @akshanshkaushal9422 ปีที่แล้ว

    I m making a quiz application using mern and want to add some questions and options as images. So can anyone suggest me how can I do that?

  • @sebokd.h
    @sebokd.h 2 หลายเดือนก่อน

    Can i upload pdf file to mongodb?
    If(yes){
    Return process;
    }else{
    Return Null;
    }

  • @hafeedummer7858
    @hafeedummer7858 2 ปีที่แล้ว

    What if i have a name and phone number to store with it
    How can i inclube these things in react

    • @pradeepanime
      @pradeepanime ปีที่แล้ว

      const mongoose=require("mongoose")
      const userschema=new mongoose.Schema({
      username:{
      type:String,
      required:true,
      min:5,
      max:20,
      unique:true
      },
      email:{
      type:String,
      required:true,
      unique:true,
      max:40,
      },password:{
      type:String,
      required:true,
      unique:true,
      max:20,
      },photo:{
      type:String,
      }
      })
      module.exports=mongoose.model("users",userschema)

  • @JavedKhan-y7d9p
    @JavedKhan-y7d9p หลายเดือนก่อน

    6:41 image get api

  • @Shanmukh1234
    @Shanmukh1234 ปีที่แล้ว

    Hey can u please tell me the FONT NAME bro. It would be so helpful.

  • @lightsinvalues9856
    @lightsinvalues9856 4 หลายเดือนก่อน +1

    that's not how we use in production level. generate an url and show image based on that url

    • @DailyTuition
      @DailyTuition  3 หลายเดือนก่อน

      Yes that's true. or we can use S3/CloudFront store to store images. This tutorial is just for education how we can store base64 in mongodb.

  • @raymondmichael4987
    @raymondmichael4987 2 ปีที่แล้ว

    How to convert it back!?

    • @eliyahutarab4862
      @eliyahutarab4862 2 ปีที่แล้ว +1

      You dont need to , after you have the image in the base 64 you simply can put it in the src of the image like its a normal link

    • @raymondmichael4987
      @raymondmichael4987 2 ปีที่แล้ว

      @@eliyahutarab4862 , you saved my life today; but ,
      how much impact it have on storage!? As per mongodb document size limits (16mb),
      Can you create a tutorial on using cloud functions to remove the image from mongodb to AWS or cloudnary, and store the image url back in mongodb!? 😌.
      Your way of explaining is really good

    • @eliyahutarab4862
      @eliyahutarab4862 2 ปีที่แล้ว +2

      @@raymondmichael4987 You can store a good amount of it because its like a normal string so think about you are creating an app that has comments option so you can store a lot of comments so it taks some space but sould not be a problem even if it a big comment so there is no problem

    • @raymondmichael4987
      @raymondmichael4987 2 ปีที่แล้ว

      @@eliyahutarab4862 thanks for your quick responses brother.
      Pkease consider my request too

  • @manishsah8425
    @manishsah8425 ปีที่แล้ว

    Throws cros error

  • @thecircuit1359
    @thecircuit1359 3 หลายเดือนก่อน +1

    Easier than multer

  • @manimegalaiChellapandiyan
    @manimegalaiChellapandiyan 8 หลายเดือนก่อน

    It does not help to upload more than 100kb

    • @DailyTuition
      @DailyTuition  3 หลายเดือนก่อน

      That's true. You can use atlas cloud storage.