lifelong learner — urip iku urup, currently working on accenture.

Simple upload file angular & nodejs dengan menggunakan multer

1
Degananda.com -

Salah satu fungsi yang sering digunakan pada aplikasi adalah upload. Pada tutorial kali ini kita akan membuat program sederhana dengan menggunakan angular dan nodejs untuk melakukan file upload. Proses fileupload ini memiliki spesifikasi :

  1. Upload satu file (single)
  2. Tidak ada filter tertentu untuk security (ini basic, sehingga scope security tidak dibahas disini).
  3. File diupload dengan menggunakan javascript (angular versi 2.x / 4.x)
  4. Menggunakan nodejs dan mutler.
  5. Tanpa menggunakan file extension. Nomor lima ini menurut kami wajib di lakukan untuk alasan keamanan. Mengekpos file type pada url rentan terhadap aksi hacking yang dilakukan oleh cracker.

ke empat restriksi tersebut dibuat agar tutorial ini ‘basic’.

Multer

Multer adalah library yang ada pada nodejs yang befungsi sebagai middleware yang menghandle multipart/form-data (untuk melakukan kegiatan upload data ke server). Jika anda familiar dengan php dan pernah melakukan upload file maka multipart/form-data tentu sudah familiar. Kita akan menggunakan library multer ini untuk membuat api yang akan mengupload file ke server. Daripada membuat middleware sendiri lebih baik menggunakan library yang sudah ada untuk mempersingkat waktu.

Multer hanya akan menerima form dengan jenis multipart/form-data. Kita dapat memanfaatkan formData pada angular/javascript tidak perlu kita append pada header saat melakukan http post request.

Express

Karena kita akan membuat API maka express adalah salah satu solusi yang dapat kita pilih untuk menghandle http request.

What will we build

kita akan membuat form untuk melakukan upload sederhana. Perhatikan gambar form dibawah ini

form diatas hanya terdapat satu input bertipe file. Ketika input tersebut berubah a.k.a kita telah memiliki file yang hendak diupload ke server maka akan mengeksekusi fungsi upload dengan cara memanggil web services. Sehingga runtutan aksinya adalah sebagai berikut

  1. user memilih file pada input file
  2. sistem mendeteksi perubahan pada input file tersebut dengan menggunakan user event input pada angular yaitu “change()” yang akan mendeteksi perubahan nilai pada suatu element
  3. sistem(javascript) membaca “filelist” atau daftar file yang ada pada form tersebut.
  4. sistem mengkonsumsi api untuk mengupload file ke server dengan request body berupa formData (multipart/form-data).
  5. server mengupload file ke direktori yang telah ditentukan dengan bantuan library mutler.
  6. done.

itulah penjelasan singkat mengenai step-step yang akan kita lakukan untuk membuat program mengupload file dengan angular dan nodejs.

Implementasi

1. Server

1.1 Inisiasi project

kita akan memulai dari sisi server. Pertama buat project nodejs dengan menggunakan

npm init

setelah itu install package-package berikut ini

npm install multer express cors --save

mengapa memerlukan cors ? karena melakukan upload membutuhkan cross origin. Kita sebenarnya dapat mengkonfigurasi cors dengan middleware pada nodejs secara manual. Namun untuk mempersingkat waktu kita akan menggunakan library yang sudah ada yakni “cors” sangat simpel dan mudah untuk digunakan

1.1 Buat endpoint untuk upload

kita akan menggunakan http post(wajib) karena yang kita lakukan adalah mengkonsumsi web sevices yang membutuhkan request body dan bersifat membuat/menambahkan data baru (post/dalam kasus ini adalah mengupload file). Pada endpoint kita akan memanfaatkan fungsi .single() pada multer untuk mendefinisikan nama request body.

/*
    Gresik 7 Agustus 2017.
*/
var express = require('express');
var multer = require('multer');
var upload = multer({ dest : 'uploads/'});
var app = express();
var cors = require('cors');
/* Cross Origin */
app.use(cors());
app.post('/fileupload', upload.single('photo'), function(req,res){
    console.log(req.file);
    res.send('degananda/apapun respon belum difilter error....');
});

app.listen(4156, function(){
    console.log('app running');
})
  • secara default instances multer() membutuhkan parameter berupa object yang berisi data “dest” atau kependekan dari destination yakni untuk menentukan lokasi direktori tujuan (tempat penyimpanan file hasil upload).
  • upload.single() adalah fungsi untuk mengupload data ‘single’ a.k.a hanya terdapat satu buah file yang akan kita upload. Fungsi tersebut membutuhkan satu parameter string yaitu berupa nama dari formdata input file. Pastikan nama ini sama dengan nama formdata pada client nanti (angular)

itulah kode pada sisi server untuk melakukan upload single file dengan menggunakan mutler

2. Client

2.1 Setup project

pada sisi client kita akan menggunakan angular. Kita inisiasi dulu projectnya

ng new project

2.2 Membuat form

setelah itu langsung saja kita buat form dengan isi satu input file dan attribute user event berupa (change) untuk mendeteksi ketika file input pada form tersebut mengalami perubahan nilai (user telah memasukan/memilih file).

2.3 Handle forminput dan menggunakan formdata.

Setelah itu kita akan membuat fungsi untuk menghandle perubahan pada input file dan mendapatkan filenya dari fileList dengan memanfaatkan nilai event pada fileinput. Filelist terletak pada event.target.files. Silahkan baca link ini untuk penjelasan lengkap mengenai filelist javascript.

  onUpload(event){
    let files: FileList = event.target.files;
    this.tempFile = files[0];
    let bodyRequest : FormData = new FormData();
    bodyRequest.append('photo', this.tempFile);
    this.uploadToServer(bodyRequest).subscribe(
      (res) => {
        console.log(res);
      }
    )
  }

file (yang didapat dari fileList dengan index 0 karena single file) kita jadikan value pada FormData yang selanjutnya form data tersebut akan dijadikan request body pada saat melakukan http request.

2.4 Mengkonsumsi API

terahir kita akan membuat fungsi untuk mengkonsumsi API(Application programming interfaces) yang telah kita buat diatas dengan menggunakan nodejs dan mutler. Kami tidak menggunakan service namun langsung pada class komponen tersebut untuk mempersingkat waktu.

  uploadToServer (bodyRequest) : Observable<any> {
    return this.http.post('http://localhost:4156/fileupload', bodyRequest).map(
      (res : Response) => res
    );    
  }

request yang kita lakukan hanya akan menggunakan parameter berupa endpoint dan request bodynya. Kita tidak memerlukan header (multipart/dsb) karena telah dihandler oleh multer(middleware) dan formdata.

2.5 Fullcode

Ini adalah full code untuk sisi client pada komponen.ts

import { Component, OnInit } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-form-momen',
  templateUrl: './form-momen.component.html',
  styleUrls: ['./form-momen.component.css']
})
export class FormMomenComponent implements OnInit {

  tempFile : any;

  constructor(
    private http: Http
  ) { }

  ngOnInit() {
  }

  onUpload(event){
    let files: FileList = event.target.files;
    this.tempFile = files[0];
    let bodyRequest : FormData = new FormData();
    bodyRequest.append('photo', this.tempFile);
    this.uploadToServer(bodyRequest).subscribe(
      (res) => {
        console.log(res);
      }
    )
  }

  uploadToServer (bodyRequest) : Observable<any> {
    return this.http.post('http://localhost:4156/fileupload', bodyRequest).map(
      (res : Response) => res
    );    
  }

}

Demo

pertama kita memilih file yang akan diupload

perubahan nilai pada file input secara langsung mentrigger fungsi upload yang kita definisikan tadi.

dapat kita lihat pada direktori “uploads” file diatas telah berhasil diupload.