This commit is contained in:
MishaBagger
2023-11-08 13:41:29 +03:00
parent 797df1e4fa
commit 0956275ec4
24 changed files with 4184 additions and 0 deletions

View 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 };

View 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
View 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

File diff suppressed because it is too large Load Diff

24
21/package.json Normal file
View 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"
}
}

View File

@@ -0,0 +1,7 @@
const express = require("express");
const router = express.Router();
const { displayImages } = require("../../controller/imageController");
router.get("/", displayImages);
module.exports = router;

View 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
View 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
View 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;

Binary file not shown.

After

Width:  |  Height:  |  Size: 578 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 737 KiB

27
21/views/images.html Normal file
View 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
View 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>