author Ahmad Muhardian

Belajar Nodejs #08: Cara Upload File di Nodejs


Tutorial Nodejs: 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 formidable

Tunggu sampai proses instalasi selesai.

Instalasi modul formidable

Berikutnya, kita instal modul mv:

npm install mv

Tunggu sampai prosesnya selesai.

Instalasi modul mv

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:

Form untuk upload file

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.

Upload file di Nodejs

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.