Saving image with mongoose

Question

I know there are quite a few threads on this topic already, but unfortunately I didn\'t find my answer until now. I use angular.js with the example code from http://angular-js.i

Answer 1

If you are using express than you can use express-fileupload middleware to upload files.

const fileUpload = require('express-fileupload');
app.post('/upload', fileUpload, (req, res) => {
  //Now you can use req.files.file to access the file input with name="file"
  user.avatar = {data: req.files.file.data, contentType: req.files.file.mimetype};
  //Now perform user.save
})

Answer 2

You know, definitely it's not the best way to save image data on mongo. Instead you can save your image on any directory on your server and save only url of your file, like..

mongoose-model.js

avatar : {
    type : String
}

and on your main script you should get

let avatar_url = '/path/to/uploads/' + req.body.data.image.file.name

something like this

Answer 3

It seems that your issue is not related to the image.

According to your code, the error message TypeError: Cannot set property 'avatar' of null means that the variable user is null.

And user is the result of findById(index.findUserId(req)).

So you should try to understand why this part is returning null.

Answer 4

it is getting repetitive but express does not support img upload so we should do this step:

1. first installing multer or(any thing you like) +plus fs path and sharp (npm module that resize and change the format helps for ease of job

const sharp = require("sharp");
const fs = require("fs");
const path = require("path");
const multer = require("multer");

I do suggest to read multer docs

2.we need a form for image upload

<form action="/profile" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" />
</form>

3.little set up for route

we have one file so we single method and we need tmperory destination for saving file i use a folder called upload in root of my project

let upload = multer({ dest: "upload/" });
app.post('/profile', upload.single('avatar'), function (req, res) {

  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any

const buffer = await sharp(
        path.join(__dirname, `../upload/${req.file.filename}`),
      ).png().toBuffer();
 
      const user = await User.findOneAndUpdate(
        { _id: "5ffb8e8b5f31732740314c72" },
        { avatar: buffer },
      );
})

now with find and update we successfully updated or created a avatar file

filename is a random string that the buffer named in that folder

4.go check out your database to see what happened