Store Image in Base64 in MongoDB Using MERN Stack

Поділитися
Вставка
  • Опубліковано 9 лис 2024

КОМЕНТАРІ • 80

  • @bestrecipes3373
    @bestrecipes3373 Рік тому +19

    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 Рік тому +17

    The timing couldn’t be better, thanks buddy

  • @urwrstntmre
    @urwrstntmre 17 днів тому

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

  • @shrutikahilale
    @shrutikahilale Рік тому +1

    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.

  • @oualidnouari2660
    @oualidnouari2660 Рік тому +1

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

  • @murtuzakhan2275
    @murtuzakhan2275 Рік тому +4

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

  • @aaqilkhan1289
    @aaqilkhan1289 Рік тому

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

  • @okereobinna5033
    @okereobinna5033 Рік тому +1

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

  • @ashi1854
    @ashi1854 4 місяці тому

    Excellent explanation.. very easy to understand..

  • @ManzurDeshTV
    @ManzurDeshTV 8 місяців тому

    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.

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

  • @izuodoh2909
    @izuodoh2909 Рік тому

    Thanks a lot bro this helped me immensely.

  • @eliyahutarab4862
    @eliyahutarab4862 Рік тому

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

  • @code-blasters
    @code-blasters Рік тому

    thanks a lot very helpful and easiest way to do

  • @truongbang5028
    @truongbang5028 Рік тому

    Thank you, it's very helpful!

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

  • @hit1222
    @hit1222 Рік тому

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

  • @venkatasubbareddychundi
    @venkatasubbareddychundi 11 місяців тому

    Super Explanation. Keep it up.

  • @saurabhrajput5073
    @saurabhrajput5073 Рік тому

    Thanks you for this clear explanation sir🙏

  • @NoudvD63
    @NoudvD63 Рік тому

    Fantastic! Thanks, helped me a lot.

  • @henryherrera5043
    @henryherrera5043 8 місяців тому +1

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

  • @prabhjotarora2740
    @prabhjotarora2740 2 місяці тому +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  2 місяці тому

      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.

  • @antonstevens9090
    @antonstevens9090 Рік тому +1

    Thanks a lot :))

  • @anubhavgovind8990
    @anubhavgovind8990 6 місяців тому +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  Місяць тому

      yes. user can see his previous store images.

  • @ekonkargames
    @ekonkargames Рік тому

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

  • @AbdurRahim-eu3zr
    @AbdurRahim-eu3zr Рік тому

    Best 👌

  • @abouteveryting4762
    @abouteveryting4762 Рік тому

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

  • @muhammaduseram9405
    @muhammaduseram9405 9 місяців тому

    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

  • @jefferyaaron3462
    @jefferyaaron3462 Рік тому

    perfectly explained

  • @PTECHVN01
    @PTECHVN01 Рік тому

    Thank you very much !!!

  • @AbhinavKumar-ym9hj
    @AbhinavKumar-ym9hj Рік тому +2

    PayloadTooLargeError: request entity too large
    at readStream

  • @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 !

  • @rohanloydsouza9675
    @rohanloydsouza9675 Рік тому +1

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

    • @DailyTuition
      @DailyTuition  Рік тому

      use backend storage instead of public folder

    • @rohanloydsouza9675
      @rohanloydsouza9675 Рік тому

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

  • @Dark-ig7ce
    @Dark-ig7ce Рік тому

    buen video bro 🔥❤

  • @thecircuit1359
    @thecircuit1359 2 місяці тому +1

    Easier than multer

  • @rsufiyand
    @rsufiyand Рік тому +2

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

  • @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'}));

  • @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 10 місяців тому

      @@aurr690 sure?

  • @sebokd.h
    @sebokd.h Місяць тому

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

  • @naimahmed2816
    @naimahmed2816 Рік тому

    Nice

  • @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?

  • @shwethahb4309
    @shwethahb4309 3 місяці тому +1

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

    • @DailyTuition
      @DailyTuition  2 місяці тому

      what is the error please tell me?

  • @Shanmukh1234
    @Shanmukh1234 Рік тому

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

  • @hafeedummer7858
    @hafeedummer7858 Рік тому

    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)

  • @manishsah8425
    @manishsah8425 Рік тому

    Throws cros error

  • @lightsinvalues9856
    @lightsinvalues9856 3 місяці тому +1

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

    • @DailyTuition
      @DailyTuition  2 місяці тому

      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 Рік тому

    How to convert it back!?

    • @eliyahutarab4862
      @eliyahutarab4862 Рік тому +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 Рік тому

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

      @@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 Рік тому

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

  • @manimegalaiChellapandiyan
    @manimegalaiChellapandiyan 6 місяців тому

    It does not help to upload more than 100kb

    • @DailyTuition
      @DailyTuition  2 місяці тому

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