UI vs. UX: What’s the difference?

Menyimpan Gambar ke Cloudinary dari Node.js

Dalam membangun aplikasi web, sering kali kita perlu menyimpan file gambar. Misalnya, untuk upload foto profil, galeri produk, atau konten blog. Masalahnya, kalau semua gambar disimpan langsung di server, kapasitas hosting cepat penuh dan performa aplikasi bisa menurun.

Nah, di sinilah Cloudinary hadir sebagai solusi. Cloudinary adalah layanan cloud khusus untuk menyimpan dan mengelola media (gambar, video, dll). Selain aman, Cloudinary juga memberikan berbagai fitur seperti optimasi gambar otomatis, resize, crop, hingga CDN agar gambar lebih cepat diakses.

1. Persiapan Awal

Sebelum masuk ke coding, pastikan kamu sudah menyiapkan:

  • Node.js terinstal di komputer
  • Text editor (misalnya VS Code)
  • Akun Cloudinary (gratis bisa daftar di cloudinary.com)

Setelah mendaftar, kamu akan mendapatkan Cloud Name, API Key, dan API Secret. Informasi ini penting untuk menghubungkan aplikasi Node.js dengan Cloudinary.

2. Membuat Project Node.js

Buka terminal, lalu buat folder project baru:

mkdir upload-cloudinary
cd upload-cloudinary

Inisialisasi project Node.js:

npm init -y

Install package yang dibutuhkan:

npm install express multer cloudinary dotenv

Keterangan:

  • express → framework Node.js untuk membuat server
  • multer → middleware untuk upload file
  • cloudinary → library resmi Cloudinary untuk Node.js
  • dotenv → untuk menyimpan konfigurasi API dengan aman di file .env

3. Konfigurasi Cloudinary

Buat file .env di root project, lalu isi dengan kredensial Cloudinary kamu:

CLOUD_NAME=namacloudkamu
CLOUD_API_KEY=apikeykamu
CLOUD_API_SECRET=apisecretkamu

4. Membuat Server Express

Buat file index.js dan tulis kode berikut:

require("dotenv").config();
const express = require("express");
const multer = require("multer");
const cloudinary = require("cloudinary").v2;

const app = express();
const port = 3000;

// Konfigurasi Cloudinary
cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.CLOUD_API_KEY,
  api_secret: process.env.CLOUD_API_SECRET,
});

// Konfigurasi Multer (untuk handle upload file)
const storage = multer.diskStorage({});
const upload = multer({ storage });

// Route untuk upload gambar
app.post("/upload", upload.single("gambar"), async (req, res) => {
  try {
    const result = await cloudinary.uploader.upload(req.file.path, {
      folder: "nodejs_upload", // folder di Cloudinary
    });

    res.json({
      message: "Upload berhasil!",
      url: result.secure_url, // URL gambar di Cloudinary
    });
  } catch (err) {
    console.error(err);
    res.status(500).json({ message: "Upload gagal", error: err });
  }
});

app.listen(port, () => {
  console.log(`Server berjalan di http://localhost:${port}`);
});

5. Cara Menguji Upload

  1. Jalankan server:
node index.js

   2.Gunakan Postman atau aplikasi seperti Insomnia untuk melakukan request POST ke:

http://localhost:3000/upload

   3.Pilih tab Body → form-data, lalu tambahkan field dengan:

  • Key: gambar (harus sama dengan upload.single("gambar"))
  • Type: File
  • Upload gambar dari komputer

   4.Klik Send, dan jika berhasil, kamu akan mendapatkan JSON dengan secure_url dari gambar yang                 tersimpan di Cloudinary.

Kesimpulan

Dengan bantuan Cloudinary, kita bisa menyimpan gambar dengan lebih aman, terstruktur, dan efisien. Cloudinary juga memberikan fitur CDN agar gambar lebih cepat diakses oleh pengguna.

Pada tutorial ini, kita sudah belajar:

  • Cara setup project Node.js dengan Express
  • Menggunakan Multer untuk upload gambar
  • Menghubungkan aplikasi dengan Cloudinary menggunakan API

Langkah berikutnya, kamu bisa mengembangkan fitur ini menjadi bagian dari aplikasi besar, seperti upload foto profil user, upload produk di toko online, atau bahkan CMS blog.