Aplikasi ini sangat sederhana, cara kerjanya yaitu gambar di upload ke server dan kemudian ditampilkan kembali ke browser.
Server
Pada sisi server aplikasi ini memakai framework ExpressJS untuk menangani request HTTP dan paket formidable untuk menangani file yang diupload.
Catatan: Aplikasi ini memakai sedikit fitur ES6 seperti let, const, arrow function sehingga anda perlu menginstall setidaknya Node.js v4.2.1 LTS
1
server.post('/upload', (req, res) => {
2
let form = new formidable.IncomingForm()
3
form.uploadDir = path.join(__dirname, 'uploads')
4
form.hash = true
5
form.multiples = false
6
form.keepExtensions = true
7
​
8
form.parse(req, (err, fields, files) => {
9
if (!err) {
10
console.log(files.file.name)
11
console.log(files.file.path)
12
console.log(files.file.type)
13
}
14
res.end()
15
})
16
})
Copied!
Kode diatas akan menangani file yang akan diupload dan menyimpan hasil upload pada direktori uploads. Formidable dapat dengan mudah dikonfigurasi, lihat Github Formidable.
Uploader
Pada sisi klien uploder dibangun dengan memakai pustaka DropzoneJS yang mendukung drag n drop dan preview thumbnail. Pustaka ini sangat mudah untuk digunakan dan di kustomisasi
1
Dropzone.options.mydropzone = {
2
init: function () {
3
this.on("complete", function(file) {
4
updateImage()
5
})
6
},
7
maxFileSize : 2,
8
acceptedFiles: 'image/*'
9
}
Copied!
Konfigurasi diatas mengakibatkan uploader hanya menerima file bertipe gambar dan ukuran file tidak lebih dari 2MB dan yang perlu dicatat yaitu ketika file selesai diupload yaitu dengan mendengarkan event complete maka list view gambar yang dibuat dengan Kendo UI harus diupdate dengan memanggil metode updateImage().
Image List
Kendo akan mengambil data dari server kemudian secara otomatis akan mengupdate #listView sesuai dengan banyaknya gambar yang telah terupload.
1
var updateImage = function () {
2
var dataSource = new kendo.data.DataSource({
3
transport: {
4
read: {
5
url: document.location.href+'service/images',
6
dataType: 'json'
7
}
8
},
9
pageSize: 21
10
})
11
​
12
$('#pager').kendoPager({
13
dataSource: dataSource
14
})
15
​
16
$('#listView').kendoListView({
17
dataSource: dataSource,
18
template: kendo.template($('#template').html())
19
})
20
}
Copied!
Komponen Kendo UI yang dipakai adalah ListView dan framework UI ini seperti framework kebanyakan lainnya juga memakai template untuk menghasilkan UI secara dinamik.
Data yang akan diambil dari server yaitu data gambar harus mempunyai field ImageName dan ImageId.
Komponen yang disediakan oleh Kendo cukup lengkap dan jika anda tertarik dengan Kendo UI lebih lanjut silahkan berkunjung ke website resmi Telerik.
Untuk mengambil daftar gambar yang telah diupload klien akan mengakses URL berikut
1
http://localhost:5005/service/images
Copied!
Server hanya akan memfilter file dengan tipe jpg dan png pada folder uploads. Filter dilakukan dengan mengecek tipe file melalui paket mime tepatnya melalui metode mime.lookup(image).
1
server.get('/service/images', (req, res) => {
2
let images = []
3
fs.readdir(upload_dir, (err, files) => {
4
if (!err) {
5
for (let imageIndex = 0; imageIndex < files.length; imageIndex++) {
6
let ftype = mime.lookup(path.join(upload_dir, files[imageIndex]))
7
if (filetypes.indexOf(ftype) !== -1) {
8
let data = {}
9
data.ImageId = imageIndex
10
data.ImageName = files[imageIndex]
11
images.push(data)
12
}
13
}
14
res.json(images)
15
} else {
16
res.end()
17
}
18
})
19
})
Copied!
Data yang dikembalikan ke klien adalah data JSON dengan format seperti berikut
1
[{
2
ImageId: 1,
3
ImageName: 'file.jpg'
4
}]
Copied!
Kode sumber dari aplikasi ini bisa anda dapatkan pada repo Github Image Uploader.