Memproses File Image dengan Base64 pada Website
Salah satu tugas front end developer adalah mengatur tampilan web sedemikian rupa agar terlihat menarik dan juga berfungsi dengan baik. Bagaimana agar tampilan web terlihat menarik? Salah satunya adalah dengan menggunakan gambar atau image tentunya. Tapi bagaimana caranya kita mengunggah dan menampilkan sebuah gambar sehingga gambar itu muncul di web kita? Base64 bisa jadi solusimu! Saya sendiri pun masih baru dengan konsep base64, namun saya akan menjelaskan semampu saya dengan bahasa yang sederhana.
Saat saya dulu berilmu di Glints Academy, saya diajarkan cara mengunggah gambar ke database dengan menggunakan FormData yang nantinya akan diproses oleh teman-teman back end melalui Multer, namun pada saat saya bekerja di tokodistributor.com, untuk mengunggah gambar ke database saya diwajibkan menggunakan base64. Contoh yang saya buat dibawah menggunakan Javascript yang saya implementasikan di Reactjs.
Apa itu base64? Sederhananya, base64 adalah urutan binary dari data yang dirubah menjadi teks yang dapat disimpan di database.
Lihat contoh berikut ini!
Diatas merupakan logo Medium. Jika kita merubahnya ke base64, maka hasilnya akan seperti ini.
Bandingkan dengan versi binarynya
Panjang sekali ya! Bagaimana? Sudah pusing? Saya pun juga haha.
Langkah-langkah Memproses Gambar Base64
Oke, cukup penjelasannya dasarnya. Sekarang saya akan menjelaskan bagaimana cara mengunggah dan menampilkan gambar base64. Saya asumsikan anda mengerti cara membuat event listener dan input yang nantinya digunakan untuk mengunggah gambar tersebut.
Disini saya menggunakan contoh yang saya kerjakan pada laman profile di m.tokodistributor.com
1. Deklarasikan File Reader
file reader ini digunakan untuk “membaca” file yang hasilnya nantinya akan kita gunakan untuk dikonversi ke Base64.
variable file akan mengambil sebuah file dari index 0 dari input yang telah kita buat, sedangkan reader adalah FileReader yang telah kita deklarasikan.
2. Ubah File yang telah dipilih menjadi format Base64
gunakan .readasDataURL untuk mengubah file gambar menjadi teks Base64. Setelah mendapatkan teksnya, buatlah fungsi dimana saat reader membaca file, file tersebut akan dimasukkan pada state di React. Contoh diatas yang berupa setAvatar saya menggunakan useState pada React Hooks yang nantikan akan dikirim pada state Avatar. State Avatar tersebut akan menyimpan teks base64-nya yang nantinya akan saya panggil di JSX.
Jangan lupa munculkan di console.log() untuk melihat apakah gambar berhasil dikonversi atau tidak. Untuk mengetes selanjutnya apakah format teks base64 gambar sudah benar atau tidak, Anda bisa mengeceknya di situs seperti https://base64.guru/converter/decode/image. Salin dan tempelkan kode anda di situs tersebut dan apabila gambarnya muncul berarti sudah benar.
3. Memunculkan Gambar Base64 pada HTML
Setelah berhasil mengkonversinya, anda dapat mengunggahnya ke database dengan cara yang anda inginkan. Saya pribadi menggunakan action Dispatch karena saya menggunakan Reactjs. Lalu untuk memunculkan gambarnya, anda cukup menggunakan tag <img src=”data:image/jpeg;base64,kodebase64anda”>. data:image/jpeg;base64, digunakan untuk memberitahu browser bahwa gambar ini merupakan teks base64 yang nantinya akan di-render oleh browser.
Bagaimana? Mudah bukan? Apabila anda menemukan kesulitan, jangan malu-malu untuk bertanya di kolom komentar atau hubungi saya secara pribadi! Saya yakin ada cara yang lebih mudah dan sederhana dari cara saya, maka dari itu saya akan menghargai anda apabila anda memberikan saran!
Selamat berkreasi!
