UPLOAD FILE DENGAN MULTER

MULTER UPLOAD PADA NODEJS

Pada nodejs jika kita browse tentang upload file maka kebanyakan akan menggunakan multer. Walaupun saya pernah membuat artikel upload selain menggunakan multer yaitu dengan menggunakan fileupload.

Kali ini saya akan menulis tentang pengalaman saya menggunakan multer dengan framework nodejs express.

Pertama buat folder dengan nama balajar multer. Lalu buka dengan visualcode.

Buka terminal lalu ketikkan perintah

npm i express, multer

Buat file bernama index.js. Ketikkan perintah berikut. Agar lebih mudah memahami saya buat comment pada bagian-bagian yang penting.

'use strict'

// persiapan express, app, http dan server
const express = require('express')
const app = express()
const http = require('http')
const server = http.createServer(app)

// definisikan variabel multer
const multer  = require('multer')

// definisikan storage untuk penyimpanan file
const storage = multer.diskStorage({
    // lokasi penyimpanan file
    destination: function (req, file, cb) {
        cb(null, 'public/images')
    },
    // membuat nama file unik agar tidak bertabrakan dengan file lainnya saat diakses dan memberi ekstensi sesuai mimetype
    filename: function (req, file, cb) {
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
        if ( file.mimetype == 'image/jpeg') {
            var mimetype = '.jpg'
        } else if ( file.mimetype == 'image/png') {
            var mimetype = '.png'
        } else if ( file.mimetype == 'image/gif') {
            var mimetype = '.gif'
        } else {
            // Add mimetype here
            console.log('\n\n> add your mimetype here. Please read https://ndalu.id/blog/mimetpe-list')
            var mimetype = '.document'
        }
        cb(null, uniqueSuffix + mimetype)
    }
})
// definisikan upload untuk single file
const upload = multer({ storage: storage }).single('file')

// gunakan folder public sebagai static
app.use(express.static('public'))

// route halaman / untuk contoh view upload file
app.get('/', (req, res) => {
    const path = require('path') // load path
    res.sendFile(path.join(__dirname, './public/index.html')) // kirim file index.html di folder public untuk view
})
// route untuk post dari halaman index.html
app.post('/', upload, (req, res) => {
    const file = req.file
    console.log(file)
    res.send({message: 'Your file was uploaded', file: file, path: 'http://localhost:3000/images/'+file.filename})
})

server.listen(3000, console.log('\n> Server run and listening port 3000'))

Lalu buat folder public dan buat didalamnya 1 buah folder images dan 1 buah file bernama index.html

<!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>Document</title>
</head>
<body>

    <!-- ELEMENT FORM START -->
    <form id="form">
        <input type="file" name="file" /><br />
        <input type="submit" value="submit" />
    </form>
    <!-- ELEMENT FORM END -->

    <!-- ELEMENT PRE UNTUK MENAMPILKAN JSON hasil dari post -->
    <pre id="pre" style="background-color: black; color: azure; padding: 10px 10px 10px 10px ;"></pre>
    <!-- ELEMENT A berisi gambar hasil post, klik untuk mengakses url hasil upload -->
    <a href="#" id="link" target="_blank">
        <!-- PREVIEW tampilan hasil upload -->
        <img src="" alt="" id="img" style="display: none; max-width: 100px;">
    </a>

    <script>

        const form = document.querySelector('#form') // element upload

        // listen element saat menerima submit
        form.addEventListener('submit', async(e) => {
            
            e.preventDefault() // prevent post karena menggunakan metode ajax agar tanpa reload halaman bisa melakukan aksi

            const formData = new FormData(form) // buat FormData dari element form
            
            if ( formData.get('file').size > 10000000 ) return alert('Max size is 10Mb') // limit maksimal upload 10MB
            if ( formData.get('file').size == 0 ) return alert('No file uploaded') // cegah post jika tidak ada file yang diupload
            
            const req = await fetch('/', {method: 'POST', body: formData}) // request berupa post. Lebih detail lihat index.js line 42
            const res = await req.json() // result berupa json. Lebih detail lihat index.js line 47

            // Manipulasi DOM berdasarkan res
            document.querySelector('#pre').innerHTML = JSON.stringify(res, undefined, 2)
            document.querySelector('#link').href = res.path
            document.querySelector('#img').src = res.path
            document.querySelector('#img').alt = res.file.originalname
            document.querySelector('#img').style = 'display: block; max-width: 200px'
        })

    </script>
    
</body>
</html>

Jalankan aplikasi dengan mengetik pada terminal node index.js. Lalu buka http://localhost:3000

Jika merasa kebingunan bisa anda download source code pada github saya

Terima kasih

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

nDalu.id