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