IMAGE CRUD OPERATION USING EXPRESS MONGOOSE MULTER
IMAGE CRUD OPERATION USING EXPRESS MONGOOSE MULTER
Dependencies Used -
File Structured -
Server.js file -
// requirements
const express = require('express')
const imgModel = require('./db/user')
const mongoose = require('mongoose')
const multer = require('multer')
const path = require('path')
const app = express();
// serving static files
app.use(express.static('public'));
// connecting to database
mongoose.connect('mongodb://localhost:27017/testten', { useNewUrlParser: true,useUnifiedTopology: true,useFindAndModify: false })
.then(()=>console.log("database is connected"))
.catch((err)=>console.log(err))
// multer destination set
var storage = multer.diskStorage({
destination:"./public/uploads/",
filename:(req,file,cb)=>{
cb(null,file.fieldname+"_"+Date.now()+".jpg")
}
})
// multer middleware
var upload = multer({storage:storage}).single('image')
// setting view engine
app.set('view engine','ejs')
// api
app.get('/',(req,res)=>{
imgModel.find((err,items)=>{
if(err){
res.send("error getting data")
}
else {
res.render('index',{items:items.reverse()})
}
})
})
// img upload method
app.post('/upload',upload,(req,res)=>{
var imageFile = req.file.filename;
var userdetails = new imgModel({
name : req.body.name,
image : imageFile
})
userdetails.save((err)=>{
if(err){
res.send("look like there is an error")
}
else{
res.redirect('/')
}
})
})
// image edit request
app.get('/edit/:id',(req,res)=>{
imgModel.findById(req.params.id,(err,items)=>{
if(err){
res.send(err)
}
else {
res.render('edit',{items:items})
}
})
})
// edit image post request
app.post('/edit/:id',upload,(req,res)=>{
if(req.file){
var imageFile = req.file.filename;
var userdetails = ({
name : req.body.name,
image : imageFile
})
}
else {
var userdetails = ({
name : req.body.name,
})
}
imgModel.findByIdAndUpdate(req.params.id,userdetails,(err)=>{
if(err){
res.send("error update")
}
else{
res.redirect('/')
}
})
})
// delete image request
app.get('/delete/:id',(req,res)=>{
imgModel.findByIdAndRemove(req.params.id,(err,items)=>{
if(err){
res.send(err)
}
else {
res.redirect('/')
}
})
})
// post listening
app.listen('3000')
Database(mongoose schema) - User.js file -
const mongoose = require('mongoose')
const imgSchema = new mongoose.Schema({
name : String,
image : String
})
module.exports = mongoose.model('imgupload',imgSchema)
Index.ejs (where uploaded file we can see) -
<!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>
<h1>hello this is a image upload learnig session</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="text" name="name" >
<input type="file" name="image">
<button type="submit">submit</button>
</form>
<!-- fro here -->
<% for(let i = 0; i < items.length; i++ ){ %>
<hr>
<h2><a href="/edit/<%= items[i]._id %>">edit</a></h2>
<h2><a href="/delete/<%= items[i]._id %>">delete</a></h2>
<img src="./uploads/<%= items[i].image %>" alt="not image" width="30%" height="30%">
<p> <%= items[i].name %></p>
<hr>
<% } %>
</body>
</html>
edit .ejs -
<!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>
<h1>this is a ediit </h1>
<form method="POST" enctype="multipart/form-data">
<input type="text" name="name" value="<%= items.name %>" >
<input type="file" name="image">
<button type="submit">submit</button>
</form>
<img src="/uploads/<%= items.image %>" alt="not image" width="40%" height="40%">
</body>
</html>
Crud operation in nodejs
Writer - Tirth Sidhpura
Comments
Post a Comment