MEGA

[keitaprm-cpu]

project/
├── server.js
├── uploads/
├── public/
│ └── index.html
const express = require("express");
const multer = require("multer");
const cors = require("cors");
const path = require("path");

const app = express();
app.use(cors());
app.use(express.static("public"));
app.use("/uploads", express.static("uploads"));

const storage = multer.diskStorage({
destination: "uploads/",
filename: (req, file, cb) => {
cb(null, Date.now() + path.extname(file.originalname));
}
});

const upload = multer({ storage });

let images = [];

app.post("/upload", upload.single("image"), (req, res) => {
const imageUrl = "/uploads/" + req.file.filename;
images.push(imageUrl);
res.json({ success: true, imageUrl });
});

app.get("/images", (req, res) => {
res.json(images);
});

app.listen(3000, () => console.log("Server running on http://localhost:3000"));

<title>Mini Pinterest</title> <style> body { font-family: Arial; background: #f5f5f5; }

.upload {
  text-align: center;
  margin: 20px;
}

.grid {
  column-count: 4;
  column-gap: 10px;
  padding: 10px;
}

.grid img {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 10px;
}

</style>

Upload

<script> async function loadImages() { const res = await fetch("/images"); const images = await res.json(); const gallery = document.getElementById("gallery"); gallery.innerHTML = ""; images.forEach(img => { const image = document.createElement("img"); image.src = img; gallery.appendChild(image); }); } async function uploadImage() { const fileInput = document.getElementById("fileInput"); const file = fileInput.files[0]; const formData = new FormData(); formData.append("image", file); await fetch("/upload", { method: "POST", body: formData }); loadImages(); } loadImages(); </script>