Cara Upload File Di NodeJS Terbaru
Upload file merupakan salah satu aktifitas yang biasanya selalu ada pada aplikasi Web. Kami yakin bahwa anda sudah mengerti kebutuhan dan manfaatnya sehingga mengunjungi halaman cara upload file di NodeJS ini. Bisa jadi anda sudah mencoba dibeberapa situs/laman ternyata mengalami masalah yang memusingkan bagi seorang pemula :((.
Baiklah untuk artikel ini, agar tidak berlama-lama, kami menganggap kita semua sudah mengetahui tentang NodeJS, NPM, dan modul Formidable serta modul fs. Kalau belumpun bisa terus melanjutkan baca disini nanti detailnya bisa dipelajari belakangan.
Membuat Form Upload Di NodeJS Terbaru
1. Pertama kita buat dulu sebuah direktori untuk aplikasi NodeJS yang akan kita buat. Misalnya D:\Belajar-NodeJS\Upload
D:\Belajar-NodeJS\upload> npm install formidable
3. Buatlah sebuah file berupa Form Html untuk ditampilkan dihalaman browser seperti pada contoh berikut, dan beri nama sebagai form_upload.html.
<!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>Form Untuk Upload File NodeJS</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>
var http = require('http');
var formidable = require('formidable');
var fs = require("fs");
http.createServer(function (req, res) {
// upload file
if (req.url == '/' && req.method === "POST") {
// membuat objek form dari formidable
const options = {
uploadDir : './uploads',
keepExtensions: true,
multiples: false
}
const form = new formidable.IncomingForm(options);
form.parse(req, function (err, fields, files) {
console.log(files.filetoupload[0].originalFilename);
res.write('File uploaded');
res.end();
});
} else {
// kirim form upload
fs.readFile("form_upload.html", (err, data) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
if (err) throw err;
res.end(data);
});
}
}).listen(8000);
console.log("server listening on http://localhost:8000");
var http = require('http');
var formidable = require('formidable');
var fs = require("fs");
Ketiga baris diatas adalah untuk mengimpor modul-modul yang dibutuhkan. Modul http digunakan untuk membuat server, modul formidable untuk mengelola data yang diterima dari HTTP, dan modul fs dibutuhkan untuk operasi baca dan tulis file. Mengapa modul http dan fs tidak perlu diinstal sementara formidable harus diinstal sebelum digunakan ? Hal ini karena modul http dan fs merupakan modul-modul yang sudah termasuk dalam atau disediakan oleh NodeJS.
http.createServer(function (req, res) {
Baris ini adalah perintah untuk membuat server
if (req.url == '/' && req.method === "POST") {
} else { }
Baris-baris ini dimaksudkan untuk meseleksi "jika yang dikirim adalah form POST" maka akan dilakukan proses terhadap datanya. Jika bukan maka server akan mengirim form upload yang diambil dari form_upload.html.
const options = {
uploadDir : './uploads',
keepExtensions: true,
multiples: false
}
const form = new formidable.IncomingForm(options);
form.parse(req, function (err, fields, files) {
console.log(files.filetoupload[0].originalFilename);
res.write('File uploaded');
res.end();
});
Baris const options ini dimaksud untuk membuat objek berisi opsi-opsi yang akan dikirim kepada objek formidable.IncomingForm. Perhatikan opsi pada baris kedua yaitu : uploadDir, Disini kami memberi contoh file yang diupload akan ditempatkan di folder uploads. Jadi pastikan anda membuat dulu sebuah sub-folder dengan nama uploads dibawah folder dimana file upload_file.js ditempatkan. Jika folder tidak ditentukan, maka file upload akan diletakan pada folder SYSTEM TEMP atau TMP.
Perintah selanjutnya adalah untuk parsing file-file yang berupa objek, yang ditampung kedalam variabel files.
Didalam objek files terdapat banyak data diantaranya array filetoupload, Apabila dipastikan file yang diupload hanya 1 file, kita bisa langsung mengaksesnya melalui objek files.filestoupload[0] seperti yang dicontohkan dengan perintah console.log(files.filetoupload[0].originalFilename diatas.
fs.readFile("form_upload.html", (err, data) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
if (err) throw err;
res.end(data);
});
Baris perintah ini mengeksekusi method readFile dalam variabel objek fs untuk membaca file form_upload.html yang kemudian hasilnya dikirim ke browser.
Apabila kedua file sudah dibuat, coba jalankan dengan perintah :
node upload_file.js
dari command prompt, powershell ataupun dari jendela terminal editor yang digunakan. Kalau tidak ada kesalahan penulisan, muncul teks
server listening on http://localhost:8000
ini menandakan server sudah aktif dan bisa diakses lewat broser pada alamat http://localhost:8000
Apabila kita melihat folder uploads, akan muncul sebuah file baru dengan nama file yang acak seperti pada gambar berikut :
Kita bisa saja mengganti nama filenya menjadi sama seperti originalFilename pada objek formidable, akan tetapi kami lebih suka menyimpan nama file aslinya ke dalam database dan tetap membiarkan file hasil upload dengan nama file yang acak untuk mencegah terjadinya error kalau ada 2 file berbeda dengan nama sama atau ada file yang diupload lebih dari 1 kali. Jika anda ingin tetap mengubah nama filenya, lakukan dengan menggunakan modul fs.
Baiklah, kita sudah selesai dengan dasar dasar cara upload file di NodejS, akan tetapi kode program diatas masih perlu dilengkapi dengan validasi dan sebagai tantangan buat anda, cobalah buat kode program untuk upload lebih dari 1 file.
