Images not appearing in the MongoDB database - node.js

Question

I am uploading a form that contains an image to my mongodb database, all the data is there as should be however the images are not appearing on the database. Does it have anything to do with the fact i an unable to add propertyImage: req.file.path as I get the error of 'typeError cannot read property of 'path' od undefined'. The reason I want them in the database is to enable me to fetch them and attach the images to the relevant product.
I have the backend code below, as for the front end I am going to assume that I need to create something with formData in order to send the the text fields with the image. If so could someone point me in the right direction as I am not sure where to start so that It wont affect my user authorization set up as detailed below.
const express = require('express');
const userRouter = express.Router();
const passport = require('passport');
const passportConfig = require('../passport');
const JWT = require('jsonwebtoken');
const User = require('../models/User');
const Property = require('../models/Property');
const multer = require('multer')
const storage = multer.diskStorage({
destination: (req, file, callback) => {
callback(null, "./uploads/");
},
filename: (req, file, callback) => {
callback(null, file.originalname);
}
})
const upload = multer({storage: storage});
const signToken = userID => {
return JWT.sign({
iss : "Moove",
sub : userID
},"Moove",{expiresIn :"1h"});
}
userRouter.post('/register',(req,res)=>{
const {username,name,email,password} = req.body;
User.findOne({email},(err,user)=>{
if(err)
res.status(500).json({message : {msgBody: "Error has occured", msgError : true}});
if(user)
res.status(400).json({message : {msgBody: "Email has already been used, Please log in", msgError : true}});
else{
const newUser = new User({username,name,email,password});
newUser.save(err=>{
if(err)
res.status(500).json({message : {msgBody: "Error has occured", msgError : true}});
else
res.status(201).json({message : {msgBody: "Account Successfully Created", msgError : false}});
});
};
});
});
userRouter.post('/login',passport.authenticate('local',{session : false}),(req,res)=>{
if(req.isAuthenticated()){
const {_id,username,password} = req.user;
const token = signToken(_id);
res.cookie('access_token',token,{httpOnly: true, sameSite:true});
res.status(200).json({isAuthenticated : true,user : {username,password}});
}
});
userRouter.get('/logout',passport.authenticate('jwt',{session : false}),(req,res)=>{
res.clearCookie('access_token');
res.json({user:{username:''},success : true})
});
userRouter.post('/property', upload.single('propertyImage'),passport.authenticate('jwt',{session : false}),(req,res)=>{
console.log(req.file);
const property = new Property({
street: req.body.street,
town: req.body.town,
area: req.body.area,
PostCode: req.body.PostCode,
NoBeds: req.body.NoBeds,
NoBath: req.body.NoBath,
NoLivingRooms: req.body.NoLivingRooms,
askingPrice: req.body.askingPrice,
propertyImage: req.file
});
property.save(err=> {
if(err)
res.status(500).json({message : {msgBody: "Error has occured", msgError : true}});
else{
req.user.properties.push(property);
req.user.save(err=> {
if(err)
res.status(500).json({message : {msgBody: "Error has occured", msgError : true}});
else
res.status(200).json({message: {msgBody: "Successfully created property", msgError : false}});
})
}
})
});
userRouter.get('/properties',passport.authenticate('jwt',{session : false}),(req,res)=>{
User.findById({_id : req.user._id}).populate('properties').exec((err,document)=>{
if(err)
res.status(500).json({message : {msgBody : "Error has occured", msgError: true}});
else{
res.status(200).json({properties : document.properties, authenticated : true});
}
});
});
userRouter.get('/property',passport.authenticate('jwt',{session : false}),(req,res)=>{
User.findById({_id : req.user._id}).populate('properties').exec((err,document)=>{
if(err)
res.status(500).json({message : {msgBody : "Error has occured", msgError: true}});
else{
res.status(200).json({properties : document.properties, authenticated : true});
}
});
});
userRouter.get('/authenticated',passport.authenticate('jwt',{session : false}),(req,res)=>{
const {username} = req.user;
res.status(200).json({isAuthenticated : true, user: {username}})
});
module.exports = userRouter;
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
import React, {useState,useContext, useEffect} from 'react'
import PropertyItem from './PropertyItem';
import PropertyService from '../Services/PropertyService';
import Message from './Message'
import {AuthContext} from '../Context/AuthContext';
const Properties = props =>{
const [property,setProperty] = useState({
// propertyImage: "",
street : "",
town : "",
area : "",
PostCode : "",
NoBeds : "",
NoBath : "",
NoLivingRooms : "",
askingPrice: "",
})
const [properties,setProperties] = useState ([]);
// const [propertyImage,setPropertyImage] = useState ([]);
const [message,setMessage] = useState(null);
const authContext = useContext(AuthContext);
useEffect(()=>{
PropertyService.getProperties().then(data =>{
setProperties(data.properties);
});
},[]);
const onSubmit = e =>{
e.preventDefault();
PropertyService.postProperty(property).then(data =>{
const {message } = data;
resetForm();
if(!message.msgError){
PropertyService.getProperties().then(getData =>{
setProperties(getData.properties);
setMessage(message);
});
}
else if(message.msgBody === "UnAuthorized"){
setMessage(message);
authContext.setUser({username : ""});
authContext.setIsAuthenticated(false);
}
else{
setMessage(message);
}
},[]);
}
const onChange = e =>{
setProperty({...property,[e.target.name] : e.target.value})
}
// const onChangefile = e =>{
// setPropertyImage(e.target.files[0])
// }
const resetForm = ()=>{
setProperty({
propertyImage: "",
street : "",
town : "",
area : "",
PostCode : "",
NoBeds : "",
NoBath : "",
NoLivingRooms : "",
askingPrice : "",
});
}
return(
<div>
<ul className="">
{
properties.map((property) =>{
return <PropertyItem key={property._id}
property={property}
street={property.street}
town={property.town}
area={property.area}
PostCode={property.PostCode}
NoBeds={property.NoBeds}
NoBath={property.NoBath}
NoLivingRooms={property.NoLivingRooms}
askingPrice={property.askingPrice}
propertyImage={property.propertyImage}
/>
},[])
}
</ul>
<br/>
<form onSubmit={onSubmit} encType="multipart/form-data">
<label htmlFor="street">Street Name</label>
<input type="text"
name="street"
value={property.street}
onChange={onChange}
className=""
placeholder="street name"/>
<label htmlFor="town">Town</label>
<input type="text"
name="town"
value={property.town}
onChange={onChange}
className=""
placeholder="town"/>
<label htmlFor="area">Area</label>
<input type="text"
name="area"
value={property.area}
onChange={onChange}
className=""
placeholder="area"/>
<label htmlFor="postcode">Postcode</label>
<input type="text"
name="PostCode"
value={property.PostCode}
onChange={onChange}
className=""
placeholder="Postcode"/>
<label htmlFor="NoBeds">Beds</label>
<input type="number"
name="NoBeds"
value={property.NoBeds}
onChange={onChange}
className=""
placeholder="Number of beds"/>
<label htmlFor="NoBath">Bathrooms</label>
<input type="number"
name="NoBath"
value={property.NoBath}
onChange={onChange}
className=""
placeholder="Number of bathrooms"/>
<label htmlFor="NoLivingRooms">Living Rroom</label>
<input type="number"
name="NoLivingRooms"
value={property.NoLivingRooms}
onChange={onChange}
className=""
placeholder="Number of living rooms"/>
<label htmlFor="askingPrice">Asking Price(£)</label>
<input type="number"
name="askingPrice"
value={property.askingPrice}
onChange={onChange}
className=""
placeholder="£249,999"/>
<label htmlFor="propertyImage">Property Images</label>
<input type="file"
filename="propertyImage"
onChange={onChange}
className=""
placeholder="Upload property images"/>
<button className=""
type="submit">Submit</button>
</form>
{message ? <Message message={message}/> : null}
</div>
);
}
export default Properties

Answer 1

You have to deal with your file input <input type="file"... differently to normal text fields. File inputs react differently to normal fields. They take an on change event, which updates when a user selects a file, and converts to a blob. You need to convert this to base64 and then send the base64 to the server (or a proper image hosting service such as cloudinary).
Here's a demo:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" id='file'/>
<script src='./app.js'></script>
</body>
</html>
app.js
const fileReader = document.getElementById('file')
const getBase64 = (file) => {
return new Promise((resolve, reject) => {
const fr = new FileReader()
console.log(file instanceof Blob) // Should be true
fr.readAsDataURL(file)
fr.onerror = reject
fr.onload = function () {
resolve(fr.result)
}
})
}
fileReader.addEventListener('change', (e) => {
console.log(e.target.files[0])
getBase64(e.target.files[0]).then((res) => console.log(res) )
})
In the JS above, we are getting the file reader input as an element and setting an onChange event to it, which calls the getBase64 function. The getBase64 function returns a Promise, that is fulfilled after the file has been read. Inside that function, we create a new FileReader as fr, then call fr.readDataAsURL(file) which converts your file to base64, and then resolve it in fr.onload. You can then call the output of that using getBase64(file).then(res => doSomething(res)).
Create a directory with those 2 files, and then test out the functionality. When you select a file, you should see a really long string of characters (Base64), and this is what you should post to your image hosting service.
I believe you can post base64 to MongoDB, though it is not recommended.