Multer, solusi upload file di Node.js dan Express

Photo by Kelly Sikkema on Unsplash

Selain menerima data dari body menggunakan format url encoded dan json, sebuah web server juga dapat menerima file dari client.
Misalnya apabila kita akan membuat sebuah web yang memiliki fitur upload seperti upload foto profile atau file pdf.

Tapi, bagaimanakah cara server menerima file tersebut?

Solusi

Untuk mengirim sebuah file, client harus mengirimkan data melalui body dengan format form data.

“Ketika client mengunggah file ke server, umumnya dikirimkan melalui form dan dikodekan sebagai multipart/form-data.”

Kemudian server akan memparsingnya menggunakan middleware multer. Node JS sendiri tidak dapat menghandle multipart request. Sehingga membutuhkan Multer.
Multer adalah middleware node.js untuk menangani multipart/form data, yang biasanya digunakan untuk mengunggah file.

Step by Step

Pertama, install multer terlebih dahulu

$ npm i multer --save

Selanjutnya, buat folder untuk menyimpan file hasil upload

Selanjutnya untuk menerapkan multer pada express adalah dengan membuat folder untuk menyimpan file yang akan diunggah, misalnya folder upload

Mendefinisikan Dependency multer dan path

Sebelum menggunakan multer, kita perlu mendefinisikan dependency multer terlebih dahulu :

const multer = require("multer");

Multer memiliki fitur untuk menghasilkan jalur tujuan dan nama file secara dinamis, yaitu path.
Jadi, kita harus melewati fungsi yang akan melakukan generate path dan mengembalikannya melalui callback (cb).
Sehingga kita membutuhkan dependency untuk path sebelum kita dapat menggunakannya :

// dependency multer
const multer = require(“multer”);
// dependency path
const path = require(“path”);

Membuat konfigurasi storage multer

diskStorage engine memungkinkan kita untuk menyimpan file kedalam disk. Disini kita akan menyimpan file pada directory upload seperti yang telah kita buat pada langkah sebelumnya.

// membuat konfigurasi diskStorage multer
const diskStorage = multer.diskStorage({ });

Membuat konfigurasi destination storage

destination merupakan Folder tempat file tersebut disimpan. Agar folder yang telah kita sediakan dapat selalu digunakan setiap kali kita melakukan upload file, kita gunakan path.join pada callback (cb) dari destination. Karena jika tanpa path.join, maka ketika kita memperbaruhi server (reload), akan ada folder baru dengan nama yang sama. Jadi sebaiknya kita gunakan path.join.

const diskStorage = multer.diskStorage({
  // konfigurasi folder penyimpanan file
  destination: function (req, file, cb) {
    cb(null, path.join(__dirname, "/uploads"));
  }
});

Konfigurasi Filename storage multer

filename merupakan Nama file yang akan disimpan di dalam destination. Gunakan path.extname untuk melakukan generate nama file yang unik dan dinamis.

const diskStorage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, path.join(__dirname, "/uploads"));
  },
  // konfigurasi penamaan file yang unik
  filename: function (req, file, cb) {
    cb(
      null,
      file.fieldname + "-" + Date.now() + path.extname(file.originalname)
    );
  },
});

Menerapkan middleware multer

Langkah selanjutnya, kita harus menentukan rute mana yang akan digunakan untuk mengupload file. Kemudian menerapkan middleware multer({ storage: diskStorage }).single("photo") pada route tersebut.

// menerapkan middleware multer hanya pada rute berikut
app.put(
  "/contact/upload",
  multer({ storage: diskStorage }).single("photo"),
  (req, res) => {
    const file = req.file.path;
    if (!file) {
      res.status(400).send({
        status: false,
        data: "No File is selected.",
      });
    }
    res.send(file);
  }
);

Contoh Studi Kasus

Pertama, pastikan kita telah memiliki project node js + express.

Selanjutnya kita mengikuti step by step seperti yang telah dicontohkan diatas.

Pada studi kasus ini, kita akan menambahkan file upload ketika data array di edit. Jadi, kita menerapkan multer pada route PUT . Penambahan file disesuaikan dengan index yang kita inputkan pada req.query.index

source code lengkapnya adalah sebagai berikut :

Kesimpulan

Multer merupakan middleware node.js untuk menangani multipart/form data, yang biasanya digunakan untuk mengunggah file.

Pada pembahasan kali ini, penulis membahas tentang cara simple menggunakan upload file multer. Yaitu menggunakan .single(fieldname)
Sebenarnya masih banyak lagi jenis pengolahan upload file yang lain.
Jika ingin melakukan konfigurasi lebih lanjut dalam mengolah file upload node js express, kita dapat bertemu di artikel selanjutnya ☺️

Note :

Pengolahan upload file selengkapnya bisa dilihat disini

Keep learning! see you in the next article..

Artikel ini diadaptasi dari silabus Miniclass Web Workshop & Riset Informatika :

wrideveloper/miniclass-web