Base64 adalah representasi teks dari data biner. Dalam konteks pengembangan web, ini sering digunakan untuk mengonversi file, seperti gambar atau dokumen, menjadi format yang dapat ditampilkan di halaman web atau diintegrasikan ke dalam permintaan jaringan. Di dalam aplikasi React.js, Kita mungkin perlu mengonversi file ke format Base64 untuk berbagai alasan, seperti mengunggah gambar ke server atau menampilkan gambar secara langsung di komponen React.
Kali ini akan membahas cara melakukan konversi file ke format Base64 di aplikasi React.js. Kita akan menggunakan JavaScript sebagai bahasa pemrograman utama dalam lingkungan React.js.
Buat sebuah komponent untuk menangani convert file kedalam
import React, { useState } from 'react';
function FileToBase64Converter() {
const [selectedFile, setSelectedFile] = useState(null);
const [base64Data, setBase64Data] = useState(null);
const handleFileChange = (event) => {
const file = event.target.files[0];
setSelectedFile(file);
};
const convertFileToBase64 = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
resolve(reader.result); // Hasil berupa Base64
};
reader.onerror = (error) => {
reject(error);
};
reader.readAsDataURL(file);
});
};
const handleConvertClick = () => {
if (selectedFile) {
convertFileToBase64(selectedFile)
.then((base64) => {
setBase64Data(base64);
})
.catch((error) => {
console.error('Error converting file to Base64:', error);
});
}
};
return (
<div>
<input type="file" onChange={handleFileChange} />
{selectedFile && (
<div>
<p>Selected File: {selectedFile.name}</p>
{/* tombol untuk konversi */}
<button onClick={handleConvertClick}>Convert to base64</button>
</div>
)}
<div>
<p>Base64 Data:</p>
<textarea rows="5" value={base64Data} readOnly />
</div>
</div>
);
}
export default FileToBase64Converter;
Seperti contoh kode diatas kita membuat sebuah input file dan jika file dipilih makan akan mengisi state selectedFile, setelah file dipilih dan state di isi maka kita buat sebuah tombol konvert yang akan memanggil fungsi handleConvertClick yang didalam fungsi itu sendiri kita memanggil sebuah fungsi convertFileToBase64 yang akan mengolah konversi. Kita menampilkan hasil convert base64 kedalam textarea.
Setelah berhasil mengkonversi file kedalam base64 kita bisa menampilkan atau pun mengunggah file basse64 kita keserver API yang kita tuju
Selamat Ngoding!
