Cara Upload File di Node.js: Tutorial Lengkap untuk Pemula
• 8 min read • 1192 views
Cara Upload File di Node.js: Tutorial Lengkap untuk Pemula
Mengupload file lewat aplikasi web adalah fitur yang sering kita temui, entah itu untuk mengunggah foto profil, dokumen, atau file lain. Node.js sebagai platform server-side JavaScript yang ringan dan cepat, bisa digunakan untuk membangun fitur upload file dengan mudah.
Dalam tutorial ini, kita akan membangun aplikasi sederhana di mana pengguna bisa mengunggah file melalui form HTML, lalu file tersebut disimpan di server menggunakan Node.js. Kita akan membahas mulai dari pembuatan project, instalasi modul yang dibutuhkan, hingga membuat server dan menangani proses upload.
Table of Contents
1. Menyiapkan Proyek Baru
Pertama, mari kita buat direktori proyek bernama nodejs-upload. Struktur awal proyek akan berisi file HTML untuk form upload dan file JavaScript untuk server:
nodejs-upload/
├── form_upload.html
├── upload_file.js
└── uploads/- form_upload.html → berisi form sederhana untuk memilih file dan mengunggahnya.
- upload_file.js → skrip utama server Node.js.
- uploads/ → direktori tujuan untuk menyimpan file yang diunggah.
Pastikan folder uploads dibuat sejak awal, karena di situlah file akan disimpan setelah berhasil diupload.
Baca Juga
2. Menginstal Modul yang Dibutuhkan
Node.js punya banyak modul bawaan, tapi untuk menangani upload file, kita membutuhkan formidable (untuk parsing form data multipart) dan mv (untuk memindahkan file yang diupload).
Jalankan perintah berikut di terminal:
- npm install formidable
- npm install mv
Setelah instalasi selesai, struktur proyek akan terlihat seperti ini:
nodejs-upload/
├── form_upload.html
├── node_modules/
├── upload_file.js
└── uploads/- Catatan: node_modules/ adalah folder otomatis yang menyimpan semua dependensi yang diinstal.
3. Membuat Form Upload
Sekarang kita buat form sederhana untuk mengunggah file. Buka file form_upload.html, lalu isi dengan kode berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload File</title>
</head>
<body>
<form action="/" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Upload File</legend>
<p>
<label>Pilih File: </label>
<input type="file" name="filetoupload" required>
</p>
<input type="submit" value="Upload">
</fieldset>
</form>
</body>
</html>Beberapa poin penting dari form di atas:
- action="/" → data dikirim ke root server.
- method="post" → karena kita mengirim file, bukan hanya teks.
- enctype="multipart/form-data" → wajib ada agar form bisa mengirim data file.
- name="filetoupload" → nama ini penting karena akan diakses di server saat parsing file.
4. Membuat Server Node.js untuk Menangani Upload
Sekarang kita masuk ke inti tutorial, yaitu membuat server Node.js. Buka file upload_file.js dan tuliskan kode berikut:
var http = require('http');
var fs = require('fs');
var formidable = require('formidable');
var mv = require('mv');
http.createServer(function (req, res) {
// Tampilkan form jika method GET
if (req.url === "/" && req.method === "GET") {
fs.readFile("form_upload.html", (err, data) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
if (err) throw err;
res.end(data);
});
}
// Tangani upload jika method POST
if (req.url == '/' && req.method === "POST") {
var form = new formidable.IncomingForm();
form.parse(req, function (err, fields, files) {
var oldpath = files.filetoupload.path;
var newpath = __dirname + "/uploads/" + files.filetoupload.name;
// Pindahkan file dari temporary folder ke /uploads/
mv(oldpath, newpath, function (err) {
if (err) { throw err; }
console.log('file uploaded successfully');
return res.end("File berhasil diupload!");
});
});
}
}).listen(8000);
console.log("Server berjalan di http://localhost:8000");
5. Menjalankan dan Menguji Program
Setelah semua file siap, jalankan server dengan perintah:
- node upload_file.js
Kemudian buka browser dan akses:
http://localhost:8000
Kamu akan melihat form upload. Coba pilih file lalu klik Upload. Jika berhasil, file tersebut akan tersimpan di folder uploads/.
6. Bedah Kode Program
Mari kita bahas lebih dalam bagian penting dari kode server:
1. Menampilkan Form
if (req.url === "/" && req.method === "GET") {
fs.readFile("form_upload.html", (err, data) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
if (err) throw err;
res.end(data);
});
}Potongan kode ini membaca file HTML dan mengirimkannya ke browser saat ada request GET.
2. Membuat Objek Formidable
- var form = new formidable.IncomingForm();
Kode ini membuat objek form untuk menangani input dari form HTML.
3. Parsing Data dan Memindahkan File
form.parse(req, function (err, fields, files) {
var oldpath = files.filetoupload.path;
var newpath = __dirname + "/uploads/" + files.filetoupload.name;
mv(oldpath, newpath, function (err) {
if (err) { throw err; }
console.log('file uploaded successfully');
return res.end("File berhasil diupload!");
});
});- oldpath → lokasi file sementara (biasanya di folder /tmp/).
- newpath → lokasi tujuan di folder uploads/.
- mv() → digunakan untuk memindahkan file dari folder sementara ke folder tujuan.
7. Menambahkan Fitur Tambahan
Tutorial dasar di atas sudah cukup untuk upload file, tapi dalam praktik nyata kita biasanya butuh fitur tambahan, misalnya:
1. Validasi Ukuran File
Batas ukuran bisa ditentukan dengan menambahkan opsi saat membuat objek IncomingForm:
- var form = new formidable.IncomingForm({ maxFileSize: 5 * 1024 * 1024 }); // 5MB
Jika file lebih besar dari batas, proses upload akan gagal.
2. Validasi Tipe File
Kamu bisa membatasi hanya tipe tertentu, misalnya gambar:
if (!files.filetoupload.type.startsWith("image/")) {
return res.end("Hanya file gambar yang diperbolehkan!");
}3. Rename File Otomatis
Agar tidak bentrok jika ada file dengan nama sama:
- var newpath = __dirname + "/uploads/" + Date.now() + "_" + files.filetoupload.name;
8. Menyimpan Metadata File
Selain menyimpan file fisiknya di folder uploads/, kadang kita juga perlu menyimpan informasi tambahan (metadata) tentang file yang diunggah. Metadata ini bisa berupa nama file, ukuran, tipe MIME, tanggal upload, hingga siapa user yang mengunggah. Data tersebut biasanya disimpan ke database (misalnya MongoDB atau MySQL) agar file mudah dikelola di kemudian hari.
Contohnya, jika kita sedang membuat aplikasi manajemen dokumen, metadata akan memudahkan pencarian dan penyaringan file berdasarkan kategori atau tanggal. Caranya, setelah file berhasil dipindahkan, kita bisa menambahkan kode untuk menyimpan metadata ke database. Dengan begitu, aplikasi tidak hanya menyimpan file mentah, tapi juga punya informasi lengkap yang bisa dipakai untuk keamanan, logging, maupun laporan penggunaan.
9. Kesimpulan
Dalam tutorial ini kita sudah membangun aplikasi sederhana dengan Node.js untuk mengupload file. Tahapannya meliputi:
- Membuat struktur proyek dan folder uploads.
- Menginstal modul formidable dan mv.
- Membuat form HTML untuk memilih file.
- Menulis kode server di upload_file.js.
- Menjalankan server dan menguji proses upload.
Selain itu, kita juga membahas fitur tambahan seperti validasi ukuran, validasi tipe file, dan rename otomatis. Dengan konsep ini, kamu bisa mengembangkan fitur upload yang lebih kompleks, seperti menyimpan file ke cloud storage (AWS S3, Google Cloud Storage), atau menambahkan autentikasi sebelum mengizinkan upload.
Jadi, meskipun aplikasi ini sederhana, ia adalah pondasi penting dalam membangun aplikasi web yang lebih besar dengan Node.js.
- Belajar Nodejs #01: Pengenalan Dasar Nodejs
- Belajar Nodejs #02: Mengenal NPM Untuk Manajemen Project Javascript
- Pengenalan Mendalam Node.js: Mengubah Dunia Pemrograman
- 6 Cara Node.js Mengubah Cara Pengembangan Backend dengan JavaScript
- Cara Nodemon Mengubah Proses Pengembangan Node.js Menjadi Lebih Efisien
- 6 Proyek Sederhana untuk Belajar Node.js dari Nol
- 6 Trik Node.js yang Jarang Diketahui Developer
- 6 Kesalahan Pemula dalam Coding Node.js dan Cara Mengatasinya
- Mengapa Node.js Cocok untuk Startup dengan Tim Kecil
- Cara Upload File di Node.js: Tutorial Lengkap untuk Pemula
- Belajar Node.js : Cara Menggunakan Modul File System untuk Baca & Tulis File
- Bagaimana Cara Mengirim Email di Node.js ?
- Tutorial Membuat Middleware Validasi Request API Menggunakan Joi dan Lodash di Node.js
Last updated on June 03, 2026
