📚 Seri Belajar Node.js — Artikel 11 dari 16

Upload File & Kelola Gambar
di Node.js dengan Multer

Dari drag-and-drop form biasa sampai resize otomatis di server — kuasai upload file Node.js dan manipulasi gambar Express dalam satu artikel.

#UploadFile #MulterNodeJS #ExpressJS #Sharp #NodeJS

⏱️

Estimasi Baca

12 Menit

📊

Level

Pemula → Menengah

📅

Update

2026

Bayangkan kamu sedang membangun aplikasi profil pengguna. Semuanya berjalan mulus — sampai tiba di bagian "Upload Foto Profil". Di sinilah banyak developer pemula Node.js mendadak pusing: gimana caranya menerima file dari form HTML? Disimpan ke mana? Terus, gimana kalau gambarnya 10MB dan pengguna upload dari HP?

Inilah yang akan kita bedah tuntas hari ini. Mulai dari konsep dasar upload file Node.js menggunakan Multer, cara mengatur penyimpanan file yang rapi, hingga manipulasi gambar secara otomatis di server dengan library Sharp. Artikel ini bagian dari seri Node.js from Zero to Zorro — jadi kalau kamu sudah melewati artikel sebelumnya tentang JWT, topik ini terasa jauh lebih masuk akal.

💎 Konsep Kunci

Multer = "Gerbang" File Upload di Express

Multer adalah middleware Node.js yang menangani multipart/form-data — format yang digunakan browser saat mengirim file lewat form HTML. Tanpa Multer, Express tidak bisa "membaca" file yang dikirim oleh pengguna.

📦 Apa Itu Multer dan Kenapa Kamu Butuh Ini untuk Upload File Node.js?

Coba bayangkan proses pengiriman file seperti mengirim paket lewat kurir. Form HTML adalah pengirim, server Express adalah gudang penerima, dan Multer adalah petugas penerima paket yang membuka kardus, mengecek isinya, lalu meletakkan di rak yang benar.

Secara teknis, browser mengirim file dalam format multipart/form-data. Format ini berbeda dari JSON atau query string biasa — isinya bisa berupa campuran teks dan binary data (isi file). Express sendiri tidak tahu cara membaca format ini. Di sinilah Multer masuk sebagai middleware.

🔥

FAKTA MENARIK

Nama "Multer" berasal dari kata "multi" dalam multipart/form-data. Library ini sudah diunduh lebih dari 4 juta kali per minggu di npm — salah satu middleware Express paling populer di dunia!

📊 Perbandingan Storage Engine Multer

Storage Engine	Simpan Di	Cocok Untuk	Kelemahan
diskStorage	Folder di server	Produksi, file besar	Butuh manajemen folder
memoryStorage	RAM (buffer)	Proses lanjutan (Sharp)	Memory habis jika file besar
Cloud Storage	AWS S3, GCS, dll	Skala besar, CDN	Setup lebih kompleks

🚀 Setup Multer Node.js: Upload File ke Disk Step by Step

Oke, cukup teorinya. Sekarang kita langsung coding. Ikuti langkah-langkah di bawah ini — kalau kamu sudah familiar dengan Express dari artikel-artikel sebelumnya, setup ini bakal terasa natural banget.

Install Multer via npm

      npm install multer
    

Konfigurasi diskStorage dan endpoint upload

Buat file uploadConfig.js untuk memisahkan konfigurasi Multer dari route utama.

📄 uploadConfig.js javascript

const multer = require('multer');
const path   = require('path');

// Konfigurasi tempat simpan & nama file
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // folder tujuan
  },
  filename: (req, file, cb) => {
    const unique = Date.now() + '-' + Math.round(Math.random() * 1e9);
    cb(null, unique + path.extname(file.originalname));
  }
});

// Filter: hanya izinkan gambar
const fileFilter = (req, file, cb) => {
  const allowed = ['image/jpeg', 'image/png', 'image/webp'];
  allowed.includes(file.mimetype)
    ? cb(null, true)
    : cb(new Error('Tipe file tidak didukung!'), false);
};

module.exports = multer({
  storage,
  fileFilter,
  limits: { fileSize: 5 * 1024 * 1024 } // maks 5MB
});

Pakai Multer sebagai middleware di route Express

📄 routes/upload.js javascript

const express = require('express');
const upload  = require('../uploadConfig');
const router  = express.Router();

// upload.single('foto') → ambil 1 file dari field bernama "foto"
router.post('/profile', upload.single('foto'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ error: 'Tidak ada file yang diupload!' });
  }
  res.json({
    pesan    : 'Upload berhasil 🎉',
    namaFile : req.file.filename,
    ukuran   : req.file.size + ' bytes'
  });
});

module.exports = router;

💡

TIPS: Buat folder uploads/ dulu!

Multer tidak otomatis membuat folder tujuan. Jalankan mkdir uploads di root project, atau buat dengan fs.mkdirSync di awal app. Kalau folder tidak ada, server akan crash saat ada upload.

🖼️ Manipulasi Gambar Express dengan Sharp: Resize, Compress, Convert

Menerima file dari pengguna itu langkah pertama. Tapi dalam dunia nyata, kamu hampir selalu perlu memproses gambar sebelum disimpan. Bayangkan pengguna upload selfie 12MP berukuran 8MB untuk foto profil — tentu tidak efisien kalau langsung disajikan ke semua pengunjung web.

Di sinilah Sharp masuk. Sharp adalah library Node.js untuk pemrosesan gambar berbasis libvips — salah satu yang tercepat di kelasnya. Dengan Sharp, kamu bisa resize, kompres, ubah format, crop, bahkan tambah watermark, semua secara programatik di server.

⚡ Sharp vs Jimp — Pilih Yang Mana?

⚡ Sharp

Sangat cepat (C++ binding)
Mendukung WebP & AVIF
Cocok untuk production
API stream-based

🐢 Jimp

Pure JavaScript (mudah install)
Cocok untuk prototype
Lebih lambat dari Sharp
API lebih sederhana

Rekomendasi: Gunakan Sharp untuk semua kebutuhan produksi. Untuk belajar atau prototipe cepat, Jimp lebih mudah setup-nya.

Install Sharp dan proses gambar setelah upload

      npm install sharp
    

📄 routes/upload.js (dengan Sharp) javascript

const sharp  = require('sharp');
const path   = require('path');
const upload = require('../uploadConfig');

// Gunakan memoryStorage agar file tidak langsung ke disk
const memUpload = multer({ storage: multer.memoryStorage() });

router.post('/avatar', memUpload.single('foto'), async (req, res) => {
  try {
    const namaFile = `avatar-${Date.now()}.webp`;
    const outputPath = path.join('uploads', namaFile);

    await sharp(req.file.buffer)
      .resize(300, 300, { fit: 'cover' }) // crop ke 300x300
      .webp({ quality: 80 })             // konversi ke WebP
      .toFile(outputPath);

    res.json({ pesan: 'Avatar berhasil diproses!', file: namaFile });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

⚡

INSIGHT PENTING: WebP vs JPEG

Format WebP rata-rata 25–35% lebih kecil dari JPEG dengan kualitas visual yang sama. Dengan mengkonversi gambar upload ke WebP via Sharp, kamu otomatis menghemat bandwidth dan mempercepat loading halaman web — tanpa effort tambahan dari sisi pengguna.

🛡️ Error Handling Upload File Node.js yang Benar

Upload file tanpa validasi sama seperti meninggalkan pintu rumah terbuka — semuanya bisa masuk. Multer memang sudah menyediakan limits dan fileFilter, tapi error yang dilempar harus kamu tangani secara eksplisit di middleware Express.

📄 middleware/errorHandler.js javascript

const multer = require('multer');

function uploadErrorHandler(err, req, res, next) {
  if (err instanceof multer.MulterError) {
    if (err.code === 'LIMIT_FILE_SIZE') {
      return res.status(413).json({ error: 'File terlalu besar! Maks 5MB.' });
    }
    return res.status(400).json({ error: err.message });
  }
  if (err) {
    return res.status(400).json({ error: err.message });
  }
  next();
}

module.exports = uploadErrorHandler;

⚠️

PERHATIAN: Jangan Simpan File Asli Nama dari User!

Menyimpan file dengan nama asli dari pengguna adalah celah keamanan serius. Nama seperti ../../etc/passwd.jpg bisa menjadi vektor serangan path traversal. Selalu generate nama file baru yang unik di server — seperti contoh kode dengan Date.now() di atas.

Sajikan file uploads sebagai static assets

Agar file yang sudah diupload bisa diakses lewat URL, tambahkan baris ini di app.js:

      // File bisa diakses di: http://localhost:3000/uploads/namafile.webp

      app.use('/uploads', express.static('uploads'));

💡

TIPS LANJUTAN: Upload Multiple Files

Untuk menerima banyak file sekaligus, gunakan upload.array('foto', 5) (maks 5 file) atau upload.fields([{ name: 'foto' }, { name: 'dokumen' }]) untuk field yang berbeda. Data file tersedia di req.files (array).

📁 Struktur Folder Proyek Lengkap

my-app/
├── uploads/            # file tersimpan di sini
├── routes/
│   └── upload.js       # route upload
├── middleware/
│   └── errorHandler.js # handler error Multer
├── uploadConfig.js     # konfigurasi Multer
└── app.js              # entry point Express

🎯 Kesimpulan

Sekarang kamu sudah punya bekal lengkap untuk menangani upload file Node.js secara profesional. Mulai dari:

Multer Node.js sebagai middleware multipart/form-data di Express
Konfigurasi diskStorage dan memoryStorage sesuai kebutuhan
Manipulasi gambar Express dengan Sharp — resize, compress, convert ke WebP
Error handling yang aman dan validasi tipe file di sisi server
Keamanan penamaan file agar terhindar dari serangan path traversal

Fitur upload file memang terlihat sederhana dari luar, tapi ada banyak detail yang perlu diperhatikan agar aplikasi kamu aman, efisien, dan scalable. Artikel ini adalah bagian dari seri Node.js from Zero to Zorro — pastikan kamu tidak melewatkan artikel lainnya!

💬 Kamu sudah coba implementasi Multer di project sendiri? Ceritakan pengalamanmu di kolom komentar! Dan kalau artikel ini bermanfaat, jangan lupa share ke teman yang lagi belajar Node.js ya — siapa tahu kamu jadi alasan mereka berhasil! 🚀

📚 Lihat Semua Artikel Seri Artikel Selanjutnya →

🏷️ Tags Artikel

#BelajarNodeJS #ZeroToZorro #UploadFileNodeJS #MulterNodeJS #UploadGambarExpress #Sharp #ExpressJS #NodeJSPemula

📚

Seri Lengkap

Node.js from Zero to Zorro

1. Pengenalan Node.js & Setup

2. Modul, NPM & Package.json

3. Express.js Fundamentals

4. Routing & Middleware

5. Template Engine (EJS/Pug)

6. REST API & JSON