Belajar Nodejs #08: Cara Upload File di Nodejs
Pada tutorial sebelumnya, kita sudah belajar cara mengambil data dari form. Baik yang menggunakan metode GET maupun POST.
Namun, untuk upload file…
…kita belum membuatnya.
Upload file pada Nodejs dapat kita lakukan dengan modul formidable
dan mv.
Modul formidable merupakan modul yang khusus untuk
mengambil data dari form yang khususnya untuk upload File.
Lalu modul mv akan kita gunakan untuk memindahkan File
dari direktori temp ke dalam folder project.
Sebenarnya, kita juga bisa menggunakan modul fs
dengan fungsi fs.rename() untuk memindahkan file.
Tapi, saya sudah mencobanya di Linux dan terjadi error.
Mungkin karena hak akses yang tidak diizinkan oleh root.
Karena itu, saya memilih menggunakan modul mv untuk memindahkan
file yang sudah ter-upload.
Cara menggunakannya pun lebih sederhana dibandingkan fs.
Untuk lebih jelasnya mari kita coba buat program upload file di Nodejs.
Membuat Project Baru
Buatlah sebuah direktori baru bernama nodejs-upload.
Lalu di dalamnya kita akan buat file upload_file.js
dan form_upload.html.
Di dalam direktori nodejs-upload, buat sebuah direktori
baru lagi dengan anam uploads.
Direktori uploads akan kita gunakan untuk menyimpan file
yang sudah ter-upload ke server.
Berikut ini struktur direktori dari project kita:
nodejs-upload/
├── form_upload.html
├── upload_file.js
└── uploads/Instalasi Modul yang dibutuhkan
Sebelum membuat program upload, persiapkan dulu modul yang dibutuhkan.
Modul formidable dan mv belum tersedia di Nodejs.
Kita harus
menginstalnya dengan NPM (Node Package Manager).
Pertama, kita install formidable:
npm install formidableTunggu sampai proses instalasi selesai.
Berikutnya, kita instal modul mv:
npm install mvTunggu sampai prosesnya selesai.
Maka akan ada direktori baru bernama node_modules di dalam
project kita.
nodejs-upload/
├── form_upload.html
├── node_modules/
├── upload_file.js
└── uploads/Membuat Form Upload
Mari kita mulai menulis form upload.
Buka file form_upload.html, kemudian 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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Upload File</title>
</head>
<body>
<form action="/" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Upload File</legend>
<p>
<label>File: </label>
<input type="file" name="filetoupload" required>
</p>
<input type="submit" value="Upload">
</fieldset>
</form>
</body>
</html>Form ini akan mengirim ke / (root) website. Lihat di properti action
pada form-nya.
Lalu kita juga memberikan enctype="multipart/form-data",
ini wajib untuk form upload data.
Perhatikan juga nama untuk field file-nya,
di sana kita menggunakan nama filetoupload.
Ini nanti akan digunakan sebagai variabel di dalam program server.
Berikut ini tampilan dari form di atas:
Membuat Server untuk Upload File
Form dan modul sudah siap.
Langkah terakhir, kita akan membuat script untuk server-nya.
Silakan buka file upload_file.js,
lalu isi dengan kode berikut:
var http = require('http');
var fs = require('fs');
var formidable = require('formidable');
var mv = require('mv');
http.createServer(function (req, res) {
// kirim form upload
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);
});
}
// upload file
if (req.url == '/' && req.method === "POST") {
// membuat objek form dari formidable
var form = new formidable.IncomingForm();
// menangani upload file
form.parse(req, function (err, fields, files) {
var oldpath = files.filetoupload.path;
var newpath = __dirname + "/uploads/" + files.filetoupload.name;
// pindahkan file yang telah di-upload
mv(oldpath, newpath, function (err) {
if (err) { throw err; }
console.log('file uploaded successfully');
return res.end("file uploaded successfully");
});
});
}
}).listen(8000);
console.log("server listening on http://localhost:8000");Setelah itu coba eksekusi dan uji coba upload filenya.
Selamat 🎉
Filenya berhasil di-upload.
Mari kita bedah isi kodenya…
Kita mulai dari kode ini:
// kirim form upload
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);
});
}Ini adalah kode untuk mengirim form atau statik file ke client. Kalau sudah belajar tentang modul file system pasti paham.
Berikutnya kode yang menangani upload:
if (req.url == '/' && req.method === "POST") {
//...
}Yang perlu diperhatikan kode di dalamnya.
Ini adalah baris kode untuk membuat objek dari modul formidable.
Objek ini dapat kita manfaatkan untuk mengambil data dari form.
// membuat objek form dari formidable
var form = new formidable.IncomingForm();Berikutnya objek form ini kita parse
untuk mengambil datanya.
// menangani upload file
form.parse(req, function (err, fields, files) {
var oldpath = files.filetoupload.path;
var newpath = __dirname + "/uploads/" + files.filetoupload.name;
// pindahkan file yang telah di-upload
mv(oldpath, newpath, function (err) {
if (err) { throw err; }
console.log('file uploaded successfully');
return res.end("file uploaded successfully");
});
});Pada kode di atas, kita mengambil alamat path file yang ter-upload
dan disimpan ke dalam variabel odlpath.
Biasanya file yang ter-upload akan disimpan sementara di dalam direktori
temporer /tmp/.
Pada Linux, direktori /tmp/ biasanya hanya bebas diakses oleh root dan user
yang terdaftar di dalamnya.
Ini mungkin yang menyebabkan saya gagal dalam menggunakan modul fs untuk
memindahkan file.
Sebagai ganitnya, kita menggunakan modul mv. Pada linux, perintah mv
digunakan untuk mengubah nama dan memindahkan file.
// pindahkan file yang telah di-upload
mv(oldpath, newpath, function (err) {
if (err) { throw err; }
console.log('file uploaded successfully');
return res.end("file uploaded successfully");
});Untuk variabel newpath, kita menggunakan variabel global __dirname
untuk mendapatkan alamat path dari project.
Lalu ditambahkan dengan /uploads/ dan nama filenya.
var newpath = __dirname + "/uploads/" + files.filetoupload.name;Apa Selanjutnya?
Contoh program upload file dengan Nodejs di atas sangatlah sederhana. Ini masih belum cukup, masih ada lagi yang harus dipelajari.
Seperti:
- Bagaimana nanti kalau kita upload banyak file?
- Bagaimana cara upload file menggunakan Ajax?
- Bagaimana cara menyimpan file ke dalam database?
Karena itu…
Teruslah belajar.
Jangan berhenti sampai di sini.
Selamat belajar.