Question 115854 in Mongodb Question posted in
The official documentation can be found here.

How to store and retrieve image using NodeJS and MongoDB?

everyone. I’m still new to NodeJs and Mongodb and i would like some help when it comes to adding and retrieving an image depending on a user in my database. I created this mongoose schema and I have as a field "img" that I would like to use to store images and retrieve images. I’ve tried using GridFS and multer which i heard could do what i’m looking for but i’m unable to correctly store my image and then retrieve it. I use React as my frontend.

User model :


const mongoose = require("mongoose");
const uniqueValidator = require("mongoose-unique-validator");

const userSchema = mongoose.Schema(
  {
    first: { type: String, required: true },
    last: { type: String, required: true },
    username: { type: String, required: true, unique: true },
    password: { type: String, required: true },
    img: {data: Buffer, type: String },
  },
  { timestamps: true }
);
userSchema.plugin(uniqueValidator);
module.exports = mongoose.model("User", userSchema);

User Controller :

const user = require('../models/user');
var User = require('../models/user');


exports.get_user = async (req, res, next) => {
    const { username, password } = req.body;
    let user_obj = await User.findOne({ username: username, password: password })
    res.status(200).json(user_obj);
}

exports.create_user = async (req, res, next) => {
    const { first, last, username, password, img} = req.body;
    const user_obj = new User({ first: first, last: last, username, password,img: req.file.filename});
     
     
    await user_obj.save();
    res.status(200).json('user creation succeded');
}

User Route :

const express = require("express");
const router = express.Router();
const userController = require('../controllers/userController');
const upload = require('../middleware/upload');

router.post("/create_user", upload.single('img'), userController.create_user);
//router.post("/create_user", userController.create_user);
router.post("/update_user", userController.update_user);
router.post("/get_user", userController.get_user);
router.get("/delete_user/:username", userController.delete_user);


module.exports = router;

Using this code i’m able to store an image but when i try to retrieve it using react as a frontend, the image dosen’t render correctly on the browser.

I would really like some help, this is for a school project. Thank you, in advance!

Tags:

2

Answers


  1. 0

    Sorry, I do not have enough points to comment to clarify this. When you say "render", does it look like a bunch of gibberish text on the page? If so, for me, this was due to not sending the correct content type in the header when I served my file from my NodeJS web server. I was sending "text/html" instead of "image/jpg" when a client requested a .jpg image.

    Login or Signup to reply.
  2. 0

    Images should be saved as static content then store only the path/url in database

    But if we have to save file data directly in DB, here’s the code using multer. Only use for file smaller than 16mb. If larger, use GridFS.

    Controller

    const upload = multer()

app.post("/create_user", upload.single('img'), async (req, res) => {
  const user_obj = new User({
    img: req.file.buffer
  });

  await user_obj.save();
  res.json(user_obj);
});

    Model

    const userSchema = mongoose.Schema(
  {
    img: { type: Buffer },
  },
);

    React on the frontend

    function App() {

  const [image, setImage] = useState()

  const toBase64 = uInt8Array => btoa(String.fromCharCode(...uInt8Array));

  useEffect(() => {
    fetch('http://localhost:8000/get_user')
      .then(res => res.json())
      .then(data => {
        setImage(`data:image/jpeg;base64,${toBase64(data.img.data)}`);
      })
  }, [])

  return (
    <>
      {image && <img src={image} alt='logo' />}
    </>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search