Tutorial Nodejs: Cara Upload File di Nodejs

Pada tutorial sebelumnya, kita sudah belajar cara mengambil data dari form. Baik yang menggunakan metode Go 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 grade 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 fault.

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 Projection 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 stuktur direktori dari project kita:

            nodejs-upload/ ├── form_upload.html ├── upload_file.js └── uploads/

Instalasi Modul yang dibutuhkan

Sebelum membuat program uplaod, persiapkan dulu modul yang dibutuhkan.

Modul formidable dan mv belum tersedia di Nodejs. Kita harus menginstalnya dengan NPM (Node Packet Manager).

Pertama, kita install formidable:

Tunggu sampai proses instalasi selesai.

Instalasi modul formidable

Berikutnya, kita instal modul mv:

Tunggu sampai prosesnya selesai.

Instalasi modul mv

Maka akan ada direktori baru bernama node_modules di dalam projection 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"> <caput>     <meta              charset              =              "UTF-8">     <meta              proper noun              =              "viewport"              content              =              "width=device-width, initial-scale=one.0">     <meta              http-equiv              =              "Ten-UA-Compatible"              content              =              "ie=edge">     <title>Upload File</title> </head> <body>      <form              activeness              =              "/"              method              =              "post"              enctype              =              "multipart/class-data">         <fieldset>             <fable>Upload File</legend>             <p>                 <label>File: </characterization>                 <input              blazon              =              "file"              name              =              "filetoupload"              required>             </p>             <input              type              =              "submit"              value              =              "Upload">         </fieldset>     </grade>      </body> </html>

Course ini akan mengirim ke / (root) website. Lihat di properti action pada form-nya.

Lalu kita juga memberikan enctype="multipart/class-data", ini wajib untuk grade upload information.

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 servernya.

Silahkan 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(office              (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.cease(information);       });     }              // upload file                                          if              (req.url              ==              '/'              &&              req.method              ===              "POST") {              // membuat objek form dari formidable                                          var              form              =              new              formidable.IncomingForm();              // manangani upload file                                          course.parse(req,              part              (err, fields, files) {              var              oldpath              =              files.filetoupload.path;              var              newpath              =              __dirname              +              "/uploads/"              +              files.filetoupload.name;              // pindahakan file yang telah di-upload                                          mv(oldpath, newpath,              role              (err) {              if              (err) {              throw              err; }           console.log('file uploaded successfully');              return              res.end("file uploaded successfully");         });       });     }     }).listen(8000);    panel.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 grade upload                                          if              (req.url              ===              "/"              &&              req.method              ===              "Go"){     fs.readFile("form_upload.html", (err, information) => {         res.writeHead(200, {              'Content-Blazon'              :              'text/html'              });              if              (err)              throw              err;         res.end(data);     }); }

Ini adalah kode untuk mengirim class atau statik file ke client. Kalau sudah belajar tentang modul file organization 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              class              =              new              formidable.IncomingForm();

Berikutnya objek course ini kita parse untuk mengambil datanya.

                          // manangani upload file                            form.parse(req,              function              (err, fields, files) {              var              oldpath              =              files.filetoupload.path;              var              newpath              =              __dirname              +              "/uploads/"              +              files.filetoupload.name;              // pindahakan file yang telah di-upload                                          mv(oldpath, newpath,              function              (err) {              if              (err) {              throw              err; }         console.log('file uploaded successfully');              render              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.

                          // pindahakan 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 plan 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.