Adanya fitur untuk melihat file yang akan dikirim pada sebuah aplikasi dapat membantu meningkatkan pengalaman pengguna menjadi lebih baik, karena pengguna dapat melihat file yang dia pilih sebelum dikirimkan. Fitur preview gambar sebelum upload sering kita jumpai pada aplikasi media sosial, karena dapat membantu pengguna untuk mengetahui isi dari gambar tersebut. Lantas bagaimana cara membuat fitur preview gambar sebelum upload khususnya pada aplikasi berbasis web?
Pada tulisan ini, penulis akan memberikan contoh sederhana cara membuat fitur preview gambar sebelum upload pada aplikasi berbasis web dengan menggunakan JavaScript, yang tentu saja dapat Anda kembangkan dan sesuaikan dengan aplikasi yang sedang Anda buat.
Buatlah file bernama index.html, kemudian buka di kode editor kesayangan masing-masing. Dan isikan dengan struktur dasar kode HTML untuk membuat suatu halaman web, pada bagian ini saya menggunakan kode dasar yang disediakan oleh framework Bootstrap.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Preview Gambar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>Kemudian buatlah kode untuk membuat sebuah form yang berisi tag input dengan tipe file, pada kode ini saya membuat tag input memiliki display none atau tidak terlihat secara visual oleh pengguna. Karena saya membuat tombol bernama ‘Pilih Foto’ untuk memicu tag input tersebut. Tambahkan kode berikut tepat setelah atau di bawah tag <body>.
<div class="container p-5">
<h1 class="fs-3 text-center">Preview Gambar Sebelum Upload</h1>
<div id="formWrapper" class="mt-3">
<form enctype="multipart/form-data" method="POST" action="#" class="d-flex justify-content-center flex-column align-items-center">
<div class="image-container mt-3" style="width: 300px; height: 300px" id="imageContainer">
<img src="https://placehold.co/300" class="img-fluid img-thumbnail rounded rounded-circle" style="object-fit: cover; width: 100%; height: 100%" id="imagePreview"/>
</div>
<div class="form-group border-0 mt-3">
<input type="file" class="file-upload-default d-none" name="image" id="imageUpload" accept=".png,.jpg">
<div class="input-group">
<input type="text" class="form-control file-upload-info d-none" disabled/>
<span class="input-group-append">
<button class="file-upload-browse btn btn-success" type="button" id="selectImageButton">
Pilih Foto
</button>
<button class="btn btn-primary" id="uploadImageButton">
Upload
</button>
</span>
</div>
</div>
</form>
</div>
</div>Berikutnya, kita tinggal menjalankan tombol untuk pilih foto yang telah dibuat agar dapat memicu tag input untuk memilih gambarnya dengan menggunakan JavaScript. Maka, tambahkan kode JavaScript berikut tepat sebelum atau di atas tag </body>.
<script>
const selectImageButton = document.getElementById('selectImageButton');
const imageUpload = document.getElementById('imageUpload');
const imagePreview = document.getElementById('imagePreview');
selectImageButton.addEventListener('click', () => {
imageUpload.click();
});
imageUpload.addEventListener('change', () => {
const file = imageUpload.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
imagePreview.setAttribute('src', e.target.result);
};
reader.readAsDataURL(file);
} else {
imagePreview.setAttribute('src', 'https://placehold.co/300');
}
});
</script>Kode JavaScript di atas berfungsi untuk memanipulasi kode HTML yang berkaitan dengan tag input dengan tipe file yang saya beri id ‘imageUpload’, kemudian tag button yang diberi id ‘selectImageButton’, dan tag img yang diberi id ‘imagePreview’.
Kemudian kode const file = imageUpload.files[0] berfungsi untuk menyimpan gambar yang telah dipilih oleh pengguna yang nantinya dalam kondisi if () atau ketika variabel file tersebut memiliki nilai, maka nilai tersebut akan dibaca sebagai url dan disikan ke atribut src yang dimiliki tag img dengan id ‘imagePreview’.
Sekarang coba save file index.html Anda yang telah berisi kode-kode di atas dan jalankan file tersebut di browser, untuk mengujinya klik tombol bertulisan ‘Pilih Foto’ dan pilih gambar kemudian liat hasilnya. Seharusnya, jika Anda sepenuhnya mengikuti tulisan ini, fitur preview gambar berhasil dibuat.
Lalu mungkin akan muncul pertanyaan “apa fungsi tombol upload yang penulis sediakan pada contoh ini?”. Jawabannya adalah untuk mengirim atau submit form tersebut agar dapat diteruskan ke back-end sehingga file tersebut dapat ditangani lebih lanjut, jika Anda menggunakan Laravel berarti tombol tersebut berfungsi untuk meneruskan gambar ke fungsi yang ada di controller nantinya, namun itu dapat menjadi pembahasan yang terpisah.
Demikianlah cara membuat fitur preview gambar sebelum upload dengan JavaScript, mohon maaf bila terdapat kekurangan dan semoga membantu.
