upload file dengan nodejs / express fileupload

UPLOAD FILE DI NODEJS

DENGAN EXPRESS FILEUPLOAD

Cara upload gambar di nodejs mungkin berbeda dengan upload file di php. Di nodejs kita akan menggunakan midleware untuk menangkap file yg dikirim ke server. Antara lain middleware yang sering terdengar adalah multer. Tapi kali ini saya akan mencontoh kan cara upload file dengan express-fileupload.

Ada banyak cara untuk upload file di nodeJS, salah satu caranya adalah dengan menggunakan middleware express-fileupload

Bahan yang diperlukan adalah

Langkah pembuatannya seperti berikut ini

1. Buat folder dengan nama test-upoad (atau bisa yang lain)

2. Buka dengan code editor

3. Install nodemon secara global agar bisa kita gunakan untuk pembuatan program lain

npm i -g nodemon

4. Install express dan express-fileupload

npm i --save express express-fileupload

5. Buat file index, bisa memalui terminal dengan mengetik perintah

touch index.js //yang terbiasa menggunakan terminal linux pasti terbiasa dengan ini
code index.js //membuka file index js dengan vscode, jika di linux kita biasa menggunakan nano index.js

6. ketikkan script di index.js dengan script dibawah ini

'use strict' //jalan strict 

const express = require('express')
const app = express()
const http = require('http')
const path = require('path')
const fs = require('fs');
const server = http.createServer(app)

const fileUpload = require('express-fileupload')

app.use(fileUpload())

app.use(express.static('public'))

app.get('/', (req, res) => { //Jika halaman utama diakses
    res.sendFile(path.join(__dirname, 'public', 'index.html')) //kirim file didalam folder public dengan nama index.html
})

app.post('/', async (req, res) => {
    let sampleFile //buat variabel untuk file yg diupload
    let uploadPath //buat variabel untuk lokasi file upload
    let maxSize = 10000 //dalam satuan byte

    if (!req.files || Object.keys(req.files).length === 0) { //buat kondisi jika tidak ada file yang terupload
        return res.status(400).send({
            message: 'Tidak ada file yang diupload.'
        }); //kirim keterangan file tidak terupload
    }

    //Misalnya input file kita beri nama gambar
    sampleFile = req.files.gambar;
    uploadPath = __dirname + '/public/images/'; //tentukan lokasi penyimpanan file

    if (!fs.existsSync(uploadPath)){ //check, apakah ada folder tujuan
        fs.mkdirSync(uploadPath); //jika tidak ada maka buat folder
    }
    
     //kita kirim file ke lokasi penyimpanan, gunakan async await karena kita perlu melakukan check ketersediaan folder
    if (sampleFile.size > maxSize) { //check jika file yang dikirim melebihi ukuran ketentuan
        return res.status(200).send({
            status: 'failed',
            message: 'Max size allowed is '+maxSize / 1000+' kilobyte<br />Your file size is '+(sampleFile.size /1000).toFixed(2)+' kilobyte'
        }) //kirim error ke client
    } else {
        await sampleFile.mv(uploadPath  + sampleFile.name, (err) => {
            if (err) //jika error
                return res.status(500).send(err) //kirim error ke client

            res.send({
                status: 'success',
                message: '/images/'+sampleFile.name
            })
        });
    }
});

server.listen(7000, console.log('Server run on port 7000'))

7. Save dan sebelum kita jalankan aplikasi kita buat dulu folder public dan buat file index.html didalamnya, lalu ketik script dibawah ini

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nDalu.id</title>
    <link rel="stylesheet" href="/index.css">
    <script src="/index.js" defer ></script>
</head>
<body>
    
    <div class="form-wrapper">
        <div class="flex">
            <img src="https://ndalu.id/images/favicon.png" class="img-rounded" />
            <p>
                Belajar membuat post file/gambar di nodejs/express secara ajax<br />bersama <span>nDalu.id</span>
            </p>
        </div>
        <div>
            <form id='uploadForm'>
                <input type="file" name="gambar" />
                <input type='submit' value='Upload!' />
                <div id="response"></div>
            </form>
        </div>
    </div>
    
</body>
</html>

8. Lalu buat file index.css dan ketikkan script dibawah ini

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100%;
    min-height: 100vh;
    overflow: hidden;
}
form{
    margin-top: 1rem;
    padding: 20px 20px;
    border: solid 2px rgba(0,0,0,.5);
    border-radius: 5px;
}
#response {
    text-align: center;
    color: red;
    font-weight: bold;
}
.img-rounded {
    border-radius: 50%;
    border: solid 1px black;
    max-width: 150px;
    max-height: 150px;
    margin-right: 50px;
}
.form-wrapper {
    max-width: 400px;
}
.flex {
    display: flex;
    align-items: center;
}
span {
    font-weight: bold;
    font-size: 1.5rem;
}

9. Lalu buat file index.js didalam folder public, ini digunakan untuk client side menghandle process ajax

'use strict'

const form = document.querySelector('#uploadForm')
form.addEventListener('submit', async (e) => {
    e.preventDefault()
    const formData = new FormData();
    const gambar = document.querySelector('input[name="gambar"]').files[0]
    formData.append('gambar', gambar)
    fetch('/', {
        method: 'POST',
        body: formData
    })
    .then( response => response.json())
    .then( result => {
        const target = document.querySelector('#response')
        if (result.status === 'success')
            return target.innerHTML = `<hr /><img src="${result.message}" />`
        target.innerHTML = '<hr />'+result.message
        form.reset()
    })
    .catch( err => {
        console.log(err)
    })
})

10. App selesai, buka browser dan buka alamat localhost:7000

Maka akan tampil seperti berikut ini

Untuk script bisa di download di https://github.com/ngadimin51/belajar-upload-file-express

Terima kasih, semoga bermanfaat.

About Writer

Penulis adalah seorang penghobi ngulik komputer. Diawali dengan meledakkan beberapa PC pentium 1 untuk mengobati rasa penasarannya sampai akhirnya sekarang mempelajari bahasa pemrograman.

Berawal dari bahasa html dan css untuk membuat static page. Lalu mulai mengenal PHP untuk backend dan sekarang lebih menyukai NODEJS dan pembuatan aplikasi android ataupun ios

Tanya-tanya, hire pekerjaan, sekedar hay-hay'an silahkan contact di halaman Contact atau kunjungi channel saya