Folder structure
public
views
- images.ejs
- index.ejs
model.js
server.jsInstalling the necessary npm packages
npm i express mongoose multer ejs
Inside server.js
import express from "express";
import mongoose from "mongoose";
import multer from "multer";
import imageModel from "./model.js";
const app = express();
app.use(express.static("public"));
app.use(express.urlencoded({ extended: false }));
app.set("view engine", "ejs");
const storage = multer.memoryStorage();
const upload = multer({ storage });
app.get("/", (req, res) => {
res.render("index");
});
app.post("/upload", upload.single("image"), async (req, res) => {
const image = new imageModel({
name: req.file.originalname,
image: {
data: req.file.buffer,
contentType: req.file.mimetype,
},
});
await image.save();
res.redirect("/images");
});
app.get("/images", async (req, res) => {
const images = await imageModel.find().sort({ _id: -1 });
res.render("images", { images });
});
mongoose.connect("mongodb+srv:...", { useNewUrlParser: true, useUnifiedTopology: true }).then(() => console.log("connected via mongoose"));
app.listen(5000, () => {
console.log("Server is running on port 5000!");
});Inside model.js
import mongoose from "mongoose";
const imageSchema = new mongoose.Schema({
name: String,
image: {
data: Buffer,
contentType: String,
},
});
const image = new mongoose.model("Image", imageSchema);
export default image;Inside views/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Image upload</h1>
<form method="POST" action="/upload" enctype="multipart/form-data">
<div>
<label>
<input type="text" name="name" id="name" />
</label>
<label>
<input type="file" name="image" id="image" />
</label>
</div>
<div>
<button>Upload image</button>
</div>
</form>
<p><a href="/images">Uploaded images</a></p>
</body>
</html>Inside views/images.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Images from MongoDB</h1>
<% if (images.length > 0) { images.forEach((image)=> { %>
<div class="grid-container">
<h2><%= image.name %></h2>
<img src="data:<%= image.image.contentType %>; base64, <%= image.image.data.toString("base64") %>" />
</div>
<% }); %> <% } else { %>
<p>No images uploaded yet</p>
<% } %>
</body>
</html>