Uploading an object containing image to Mongodb using Nodejs?

Question

I want to upload an object containing image in it to the mongodb database using nodejs but i am no able to do so.

Angular File

onSelectedFile(event){
this.edit_image = event.target.files[0];   
}


editProfile(e){ 
const user={
  email:this.edit_email,
  img:this.edit_image,
}
console.log("To Update");
console.log(user);
this._authService.editProfile(user)
      .subscribe(data=>{
        this.dataFromService=data;
        this.user=this.dataFromService.user;
        console.log(data);
      })
}

In Service File

editProfile(user){
let headers = new HttpHeaders();

headers=headers.append('content-type','application/json');
console.log("Updating Profile");
console.log(user);
return this.http.post('http://localhost:8080/profile/edit_Profile',user,{headers:headers})
        .pipe(catchError(this.errorHandler))
  }

In Nodejs File

router.post('/edit_profile', (req, res) => {
let updateProfile = {
    email: req.body.email,
    img: req.body.img
};

console.log("Profile");
console.log(updateProfile); //to check the data
console.log("Profile");

Profile.updateP(updateProfile, (err, user) => {
    if (err) throw err;
    else {
        console.log("Update User");
        console.log(user);
        res.json({
            user: user
        })
    }
})
})

While logging the data in profileUpdate it is printing the empty value of the img

User Schema

const profileSchema = schema({
email: {
    type: String,
},
img: { data: Buffer, contentType: String }
});

I want to update an existing profile but i am not able to use multer or even pass the image data from the angular file to the nodejs file

You won't be able to send "image data" within a JSON body without actually encoding it first. What you probably really mean to do is use is actually `multipart/form-data` ( which is actually what "multer" gets it's name from ) to send with the request instead. Multer can accept that as binary content which also aligns with the `Buffer` type in the mongoose schema, and stored as BSON `Binary` actually in MongoDB. And there's a Mime Type with multipart boundaries as well, which also can be extracted from multer and stored within the respective field of the data. — Neil Lunn, Apr 07 '19 at 11:17
See also [File Upload In Angular?](https://stackoverflow.com/q/40214772/2313887) and the [Multer README](https://github.com/expressjs/multer) which is really quite descriptive. Note the exposed [File Information](https://github.com/expressjs/multer#file-information) from multer actually has a `buffer` property which exposes a `Buffer` for the full binary content of the file/image. — Neil Lunn, Apr 07 '19 at 11:25

score 0 · Answer 1 · answered Apr 07 '19 at 14:57

0

Rather than uploading an image to the database use something like s3 to store the image and upload the link to that image on mongodb

answered Apr 07 '19 at 14:57

Ayan Banerjee

151
1
3
11

But how can I use multer ? – Shiva Chandel Apr 07 '19 at 15:09
setup multer as a middleware . See multer documentation.Store the image in local file system then use a image storage service upload the image then store the link in mongodb – Ayan Banerjee Apr 07 '19 at 16:17

Tech at The Sparks Foundation · Accepted Answer · 2019-05-12T06:33:38.557

You can convert your image into base64 format which is very easy to handle and store in database function for converting image to base64:-

var fs = require('fs');

function base64_encode(){
    var imageAsBase64 = fs.readFileSync('test.png', 'base64');
    // code to store it in the mongodb here
}

function for converting base64 to image:-

    var fs = require('fs');

    function base64_decode(){
        var imageAsBase64 //some base64 encoded string
        var data = imageAsBase64..replace(/^data:image\/png;base64,/, "")
        fs.writeFile("out.png", data, 'base64', function(err) {
            console.log(err);
         });

    }

Uploading an object containing image to Mongodb using Nodejs?

2 Answers2