Nodejs Uploading Images - node.js

Question

Hey am making a website that will show the articles and the relevant images at the same time. I have already been uploading image files but I cannot show it in my page.
These are my relevant codes:
Article Module:
let mongoose = require('mongoose');
let articleSchema = mongoose.Schema({
title:{
type: String,
required: true
},
author:{
type:String,
required:true
},
body:{
type:String,
required:true
},
img:{
type:String,
required:true
}
});
let Article = module.exports = mongoose.model('Article', articleSchema);
User Module:
let mongoose = require('mongoose');
// User Schema
let UserSchema = mongoose.Schema({
name:{
type: String,
required: true
},
email:{
type: String,
required: true
},
username:{
type: String,
required: true
},
password:{
type: String,
required: true
}
});
let User = module.exports = mongoose.model('User', UserSchema);
Article.js:
const express = require('express');
const router = express.Router();
const multer = require('multer');
// Article Model
let Article = require('../models/article');
// User Model
let User = require('../models/user');
router.get('/sonuc', function(req, res){
if(req.query.search) {
const regex = new RegExp(escapeRegex(req.query.search), 'gi');
Article.find({"title": regex}, function(err, articles) {
if(err) {
console.log(err);
} else {
res.render("sonuc", {
articles: articles
});
}
});
}
});
function escapeRegex(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
};
// Add Route
router.get('/add', ensureAuthenticated, function(req, res){
res.render('add_article', {
title:'Add Article'
});
});
const upload = multer({dest: __dirname + '/uploads'});
// Add Submit POST Route
router.post('/add',upload.single('img'), function(req, res){
req.checkBody('title','Title is required').notEmpty();
//req.checkBody('author','Author is required').notEmpty();
req.checkBody('body','Body is required').notEmpty();
// Get Errors
let errors = req.validationErrors();
if(errors){
res.render('add_article', {
title:'Add Article',
errors:errors
});
} else {
var article = new Article({
title: req.body.title,
author: req.user._id,
img: '/uploads/' + req.file.filename,
body: req.body.body,
});
article.save(function(err){
if(err){
console.log(err);
return;
} else {
res.render('add_article', {
});
}
});
}
});
// Load Edit Form
router.get('/edit/:id', ensureAuthenticated, function(req, res){
Article.findById(req.params.id, function(err, article){
/*if(article.author != req.user._id){
req.flash('danger', 'Not Authorized');
return res.redirect('/');
}*/
res.render('edit_article', {
title:'Edit Article',
article:article
});
});
});
// Update Submit POST Route
router.post('/edit/:id', function(req, res){
let article = {};
article.title = req.body.title;
article.author = req.body.author;
article.body = req.body.body;
let query = {_id:req.params.id}
Article.update(query, article, function(err){
if(err){
console.log(err);
return;
} else {
req.flash('success', 'Article Updated');
res.redirect('/');
}
});
});
// Delete Article
router.delete('/:id', function(req, res){
if(!req.user._id){
res.status(500).send();
}
let query = {_id:req.params.id}
Article.findById(req.params.id, function(err, article){
if(article.author != req.user._id){
res.status(500).send();
} else {
Article.remove(query, function(err){
if(err){
console.log(err);
}
res.send('Success');
});
}
});
});
// Get Single Article
router.get('/:id', function(req, res){
Article.findById(req.params.id, function(err, article){
//User.findById(article.author, function(err, user){
res.render('article', {
article:article,
imagePath: user.img,
author: user.name
});
});
});
//});
// Access Control
function ensureAuthenticated(req, res, next){
if(req.isAuthenticated()){
return next();
} else {
req.flash('danger', 'Please login');
res.redirect('/users/login');
}
}
module.exports = router;
article.pug:
extends layout
block content
br
h1= article.title
//h5 Written by #{author}
p= article.body
img(src=imagePath, alt='img')
hr
if user
if user.id ==article.author
a.btn.btn-default(href='/articles/edit/'+article._id) Edit
a.btn.btn-danger.delete-article(href='#',data-id=article._id) Delete
Still I cannot understan why that these codes are not working. I am waiting your supports. Every answer will be appreciated.
My App.js:
const express = require('express');
const ejs = require('ejs');
const path = require('path');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const expressValidator = require('express-validator');
const flash = require('connect-flash');
const session = require('express-session');
const passport = require('passport');
config = require('./config/database');
const multer = require('multer');
mongoose.connect(config.database);
let db = mongoose.connection;
// Check connection
db.once('open', function(){
console.log('Connected to MongoDB');
});
// Check for DB errors
db.on('error', function(err){
console.log(err);
});
// Init App
const app = express();
// Bring in Models
let Article = require('./models/article');
// EJS
app.set('view engine', 'ejs');
// Public Folder
app.use(express.static('./public'));
// Load View Engine
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
// Body Parser Middleware
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
// parse application/json
app.use(bodyParser.json());
// Set Public Folder
app.use(express.static(path.join(__dirname, 'public')));
// Express Session Middleware
app.use(session({
secret: 'keyboard cat',
resave: true,
saveUninitialized: true
}));
// Express Messages Middleware
app.use(require('connect-flash')());
app.use(function (req, res, next) {
res.locals.messages = require('express-messages')(req, res);
next();
});
// Express Validator Middleware
app.use(expressValidator({
errorFormatter: function(param, msg, value) {
var namespace = param.split('.')
, root = namespace.shift()
, formParam = root;
while(namespace.length) {
formParam += '[' + namespace.shift() + ']';
}
return {
param : formParam,
msg : msg,
value : value
};
}
}));
// Passport Config
require('./config/passport')(passport);
// Passport Middleware
app.use(passport.initialize());
app.use(passport.session());
app.get('*', function(req, res, next){
res.locals.user = req.user || null;
next();
});
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now())
}
})
const upload = multer({ storage: storage })
// Check File Type
function checkFileType(file, cb){
// Allowed ext
const filetypes = /jpeg|jpg|png|gif/;
// Check ext
const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
// Check mime
const mimetype = filetypes.test(file.mimetype);
if(mimetype && extname){
return cb(null,true);
} else {
cb('Error: Images Only!');
}
}
// Home Route
app.get('/', function(req, res){
Article.find({}, function(err, articles){
if(err){
console.log(err);
} else {
res.render('index', {
title:'Articles',
articles: articles
});
}
});
});
app.get('/sonuc', function(req, res){
if (req.query.search) {
const regex = new RegExp(escapeRegex(req.query.search), 'gi');
Article.find({"title": regex}, function(err, articles) {
if(err) {
console.log(err);
} else {
res.render("index", {
articles: articles
});
}
});
}
});
function escapeRegex(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
};
// Route Files
let articles = require('./routes/articles');
let users = require('./routes/users');
app.use('/articles', articles);
app.use('/users', users);
// Start Server
app.listen(3000, function(){
console.log('Server started on port 3000...');
});

Answer 1

You have to pass in the path to the img tag for it to render your image.
You have specified /upload to be the folder, so just put that into the src attribute of the img tags.
extends layout
block content
br
h1= article.title
//h5 Written by #{author}
p= article.body
img(src=imagePath, alt='img')
GET route fix:
Article.findById(req.params.id, function(err, article){
//You commented this line that's why user is undefined
User.findById(article.author, function(err, user){
res.render('article', {
article:article,
imagePath: article.img, //Should be article.img
author: user.name
})