Express.js-ში სურათების ატვირთვა Multer-ით და Cloudinary-ით

სურათების ატვირთვა ვებ აპლიკაციებში ხშირი მოთხოვნაა. ამ ბლოგში განვიხილავთ, როგორ მოვახდინოთ სურათების ატვირთვა Express.js-ში:

1. 📁 მხოლოდ local ფოლდერში Multer-ით;

2. ☁️ და შემდეგ Cloudinary პლატფორმაზე ატვირთვა;

ასევე განვიხილავთ ორივე მეთოდის უპირატესობებსა და უარყოფით მხარეებს და დაგეხმარებით სწორი არჩევანის გაკეთებაში.

---

🔧 1. ლოკალურად ატვირთვა Multer-ის გამოყენებით

📦 საჭირო პაკეტები:

bash
npm install express multer

📁 ფაილის სტრუქტურა:

txt
project/
├── uploads/         # აქ ინახება სურათები
├── server.js

📄 server.js ფაილი

js
const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs')
const app = express();

//ეს ბრძანება გახდის ლოკალურ ფაილებს წვდომადს, თითოეული ფოტოს სანახავად დაგჭირდებათ
//http://localhost:3000/fileId 
app.use(express.static('uploads'));

// ატვირთული ფაილების შენახვა uploads ფოლდერში
const storage = multer.diskStorage({
  destination: 'uploads',
  filename: (req, file, cb) => {
    cb(null, Date.now() + path.extname(file.originalname));
  }
});

const upload = multer({ 
	storage,
	limits: { fileSize: 2 * 1024 * 1024 }  // 2MB
});

app.post('/upload', upload.single('image'), (req, res) => {
  res.json({ message: 'სურათი წარმატებით აიტვირთა ლოკალურად', file: req.file });
});

// ატვირთული ფოტოს წაშლა
app.delete('/delete/:filename', (req, res) => {
  const filePath = path.join(__dirname, 'uploads', req.params.filename);
  fs.unlink(filePath, (err) => {
    if (err) return res.status(404).json({ error: 'ფაილი არ მოიძებნა' });
    res.json({ message: 'სურათი წარმატებით წაიშალა' });
  });
});

app.listen(3000, () => console.log('სერვერი გაეშვა პორტზე 3000'));

✅ უპირატესობები:

• არ გჭირდება გარე სერვისი;

• სწრაფი და მარტივი ლოკალური ტესტირებისთვის;

• კონტროლი შენახულ ფაილებზე.

❌ უარყოფითი მხარეები:

• საჭიროებს დამატებით დაცვას (მაგ. გაფართოების ვალიდაცია);

• სერვერის გადატვირთვისას შესაძლოა დაკარგვა;

• ცუდი მასშტაბურობა — დისკზე შენახვა დიდი პროექტებისთვის არ არის ოპტიმალური;

---

☁️ 2. Cloudinary-ის გამოყენება

📦 საჭირო პაკეტები:

bash
npm install cloudinary multer multer-storage-cloudinary dotenv

📄 .env ფაილი:

txt
CLOUDINARY_CLOUD_NAME=შენი_სახელი
CLOUDINARY_API_KEY=შენი_API_KEY
CLOUDINARY_API_SECRET=შენი_SECRET

📄 server.js ფაილი Cloudinary-სთვის

js
require('dotenv').config();
const express = require('express');
const multer = require('multer');
const cloudinary = require('cloudinary').v2;
const { CloudinaryStorage } = require('multer-storage-cloudinary');

const app = express();

// Cloudinary კონფიგურაცია
cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
});

const storage = new CloudinaryStorage({
  cloudinary,
  params: {
    folder: 'uploads',
    allowed_formats: ['jpg', 'png'],
  },
});

const upload = multer({ 
	storage,
	limits: { fileSize: 2 * 1024 * 1024 }  // 2MB
});

app.post('/upload', upload.single('image'), (req, res) => {
  res.json({ 
    message: 'სურათი წარმატებით აიტვირთა Cloudinary-ზე', 
    url: req.file.path,
    public_id: req.file.filename // public_id საჭიროა წაშლაში
  });
});

// Cloudinary-ზე ატვირთული სურათის წაშლა
app.delete('/delete/:public_id', async (req, res) => {
  try {
    const result = await cloudinary.uploader.destroy(req.params.public_id);
    if (result.result === 'ok') {
      res.json({ message: 'სურათი წარმატებით წაიშალა Cloudinary-დან' });
    } else {
      res.status(404).json({ error: 'სურათი ვერ მოიძებნა ან უკვე წაშლილია' });
    }
  } catch (err) {
    res.status(500).json({ error: 'დაფიქსირდა შეცდომა წაშლის დროს' });
  }
});

app.listen(3000, () => console.log('სერვერი გაეშვა პორტზე 3000'));

✅ უპირატესობები:

• ავტომატური მასშტაბირება და CDN;

• არ იკავებს სერვერის სივრცეს;

• მარტივი ინტეგრაცია სხვადასხვა პლატფორმასთან;

• უზრუნველყოფს რეზერვს და დაცვას;

❌ უარყოფითი მხარეები:

• საჭიროებს ინტერნეტკავშირს და Cloudinary ანგარიშს;

• აქვს ლიმიტები უფასო გეგმაზე;

• იდენტიფიკაციის მონაცემების დაცვა სავალდებულოა;

---

✅ სურათის ატვირთვისა და წაშლის ფუნქციების ტესტირება

🧪 1. ტესტირება Postman-ით

📤 ატვირთვა (POST /upload)

1. გახსენი Postman.
2. აირჩიე POST მეთოდი.
3. ჩაწერე URL:
   • ლოკალური: http://localhost:3000/upload
4. გადადი ტაბზე Body → form-data.
5. დაამატე შემდეგი ველი:
   • Key: image (ეს სახელი ზუსტად უნდა ემთხვეოდეს თქვენს backend კოდში upload.single('image')-ში გამოყენებულ სახელს).
   • აირჩიე Type: File.
   • Value: ატვირთე ნებისმიერი .jpg ან .png ფორმატის ფაილი.
6. გაუშვი request (დააჭირე ღილაკს Send).

✅ მოსალოდნელი პასუხი: თქვენ უნდა მიიღოთ file ობიექტი, რომელშიც ასახული იქნება ატვირთული სურათის დეტალები ან Cloudinary-ის ბმული (თუ Cloudinary ინტეგრაცია გაქვთ).

🗑️ წაშლა (DELETE)

• ლოკალური სერვერიდან წაშლა:

  • URL: http://localhost:3000/delete/<ფაილის_სახელი>
  • მაგალითად: http://localhost:3000/delete/1716100000000.jpg
    • <ფაილის_სახელი> უნდა ჩაანაცვლოთ იმ ფაილის სახელით, რომლის წაშლაც გსურთ (ეს სახელი, როგორც წესი, ატვირთვისას გიბრუნდებათ პასუხში).

• Cloudinary-დან წაშლა:

  • URL: http://localhost:3000/delete/<public_id>
  • მაგალითად: http://localhost:3000/delete/uploads/xyz123
  • ⚠️ მნიშვნელოვანია: Cloudinary-ის public_id არის მნიშვნელობა, რომელსაც იღებთ req.file.filename-დან სურათის ატვირთვისას. აუცილებელია, რომ ეს public_id შეინახოთ ატვირთვის პასუხიდან, რათა შეძლოთ მისი გამოყენება წაშლისას.

✅ დასკვნა

თუ შენ ხარ საწყის ფაზაში ან უბრალოდ ტესტავ ფუნქციონალს, Multer ლოკალური შენახვით სრულიად საკმარისია. მაგრამ თუ გჭირდება მასშტაბური და სტაბილური გამოსახულების მენეჯმენტი — Cloudinary იდეალურია.