MACHIN
This commit is contained in:
16
21/controller/imageController.js
Normal file
16
21/controller/imageController.js
Normal file
@@ -0,0 +1,16 @@
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
|
||||
const directoryPath = path.join(__dirname, "..", "uploads");
|
||||
|
||||
const displayImages = (req, res) => {
|
||||
fs.readdir(directoryPath, function (err, files) {
|
||||
if (err) {
|
||||
return console.log("Unable to scan directory: " + err);
|
||||
}
|
||||
const imageUrls = files.map((file) => `/uploads/${file}`);
|
||||
res.status(200).json(imageUrls);
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = { displayImages };
|
||||
29
21/controller/uploadController.js
Normal file
29
21/controller/uploadController.js
Normal file
@@ -0,0 +1,29 @@
|
||||
const multer = require("multer");
|
||||
|
||||
const storage = multer.diskStorage({
|
||||
destination: function (req, file, cb) {
|
||||
return cb(null, "./uploads");
|
||||
},
|
||||
filename: function (req, file, cb) {
|
||||
return cb(null, `${Date.now()}-${file.originalname}`);
|
||||
},
|
||||
});
|
||||
|
||||
const upload = multer({ storage: storage });
|
||||
|
||||
const uploadImage = (req, res, next) => {
|
||||
if (!req.file)
|
||||
return res.status(400).send(`No file Uploaded <br>
|
||||
<button onclick="window.location.href='/images'">Show Images</button>
|
||||
<button onclick="window.location.href='/'">Back to Home</button>
|
||||
`);
|
||||
console.log(req.file);
|
||||
res.send(
|
||||
`Uploaded <br>
|
||||
<button onclick="window.location.href='/images'">Show Images</button>
|
||||
<button onclick="window.location.href='/'">Back to Home</button>
|
||||
`
|
||||
);
|
||||
};
|
||||
|
||||
module.exports = { upload, uploadImage };
|
||||
26
21/index.js
Normal file
26
21/index.js
Normal file
@@ -0,0 +1,26 @@
|
||||
const express = require("express");
|
||||
const app = express();
|
||||
require("dotenv").config();
|
||||
const rootRoute = require("./routes/root");
|
||||
const uploadRoute = require("./routes/api/uploadRoute");
|
||||
const imageRoute = require("./routes/api/imageRoute");
|
||||
const images = require("./routes/images");
|
||||
|
||||
const PORT = process.env.PORT || 3500;
|
||||
|
||||
app.use(express.urlencoded({ extended: false }));
|
||||
|
||||
app.use("/", rootRoute);
|
||||
app.use("/upload", uploadRoute);
|
||||
app.use("/imagelist", imageRoute);
|
||||
app.use("/images", images);
|
||||
|
||||
app.use("/uploads", express.static("uploads"));
|
||||
|
||||
app.all("*", (req, res) => {
|
||||
res.status(404).send("Error 404! Not Found");
|
||||
});
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Connected to port ${PORT}`);
|
||||
});
|
||||
1957
21/package-lock.json
generated
Normal file
1957
21/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
24
21/package.json
Normal file
24
21/package.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "image-uploader",
|
||||
"version": "1.0.0",
|
||||
"description": "Image uploader using multer in node.js",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "nodemon"
|
||||
},
|
||||
"keywords": [
|
||||
"node.js",
|
||||
"express",
|
||||
"multer"
|
||||
],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"dotenv": "^16.0.3",
|
||||
"express": "^4.18.2",
|
||||
"multer": "^1.4.5-lts.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^2.0.22"
|
||||
}
|
||||
}
|
||||
7
21/routes/api/imageRoute.js
Normal file
7
21/routes/api/imageRoute.js
Normal file
@@ -0,0 +1,7 @@
|
||||
const express = require("express");
|
||||
const router = express.Router();
|
||||
const { displayImages } = require("../../controller/imageController");
|
||||
|
||||
router.get("/", displayImages);
|
||||
|
||||
module.exports = router;
|
||||
7
21/routes/api/uploadRoute.js
Normal file
7
21/routes/api/uploadRoute.js
Normal file
@@ -0,0 +1,7 @@
|
||||
const express = require("express");
|
||||
const router = express.Router();
|
||||
const { upload, uploadImage } = require("../../controller/uploadController");
|
||||
|
||||
router.post("/", upload.single("uploadImg"), uploadImage);
|
||||
|
||||
module.exports = router;
|
||||
9
21/routes/images.js
Normal file
9
21/routes/images.js
Normal file
@@ -0,0 +1,9 @@
|
||||
const express = require("express");
|
||||
const router = express.Router();
|
||||
const path = require("path");
|
||||
|
||||
router.get("/", (req, res) => {
|
||||
res.sendFile(path.join(__dirname, "..", "views", "images.html"));
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
9
21/routes/root.js
Normal file
9
21/routes/root.js
Normal file
@@ -0,0 +1,9 @@
|
||||
const express = require("express");
|
||||
const router = express.Router();
|
||||
const path = require("path");
|
||||
|
||||
router.get("/", (req, res) => {
|
||||
res.sendFile(path.join(__dirname, "..", "views", "index.html"));
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
BIN
21/uploads/1699439503724-kandinsky-download-1697611647190.png
Normal file
BIN
21/uploads/1699439503724-kandinsky-download-1697611647190.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 578 KiB |
BIN
21/uploads/1699439634289-kandinsky-download-1697611937993.png
Normal file
BIN
21/uploads/1699439634289-kandinsky-download-1697611937993.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 737 KiB |
27
21/views/images.html
Normal file
27
21/views/images.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script>
|
||||
fetch("/imagelist")
|
||||
.then((response) => response.json())
|
||||
.then((imageUrls) => {
|
||||
const container = document.getElementById("image-container");
|
||||
|
||||
imageUrls.forEach((url) => {
|
||||
const img = document.createElement("img");
|
||||
img.src = url;
|
||||
img.width = "200";
|
||||
img.height = "200";
|
||||
container.appendChild(img);
|
||||
const br = document.createElement("br");
|
||||
container.appendChild(br);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Image Gallery</h1>
|
||||
<div id="image-container"></div>
|
||||
<button onclick="window.location.href='/'">Back to Home</button>
|
||||
</body>
|
||||
</html>
|
||||
14
21/views/index.html
Normal file
14
21/views/index.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Image Uploader</title>
|
||||
</head>
|
||||
<body>
|
||||
<form method="POST" action="/upload" enctype="multipart/form-data">
|
||||
<input type="file" name="uploadImg" />
|
||||
<button type="submit">Upload</button>
|
||||
</form>
|
||||
<br />
|
||||
<button onclick="window.location.href='/images'">Show Images</button>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user