— In this article, we will learn how to convert image in base64.
–First of all, we have to create an application in react.
–Now open your app.js file.
— Then add input element with type file and onchange event.
<input type="file" onChange={ImageHandler} />
–Then create an onchange event and add a usestate in your app.js file.
const [image, setImage] = useState()
const ImageHandler = async (e) => {
const file = e.target.files[0]
const base64 = await convertToBase64(file)
setImage(base64)
}
–Now write the code for converting the image in base64.
const convertToBase64 = (file) => { //selected image
return new Promise((resolve, reject) => {
const fileReader = new FileReader()
fileReader.readAsDataURL(file)
fileReader.onload = () => {
resolve(fileReader.result)
}
fileReader.onerror = (error) => {
reject(error)
}
})
}
— app.js file:
import React, { useState } from 'react'
function BaseImage() {
const [image, setImage] = useState()
const convertToBase64 = (file) => { //selected image
return new Promise((resolve, reject) => {
const fileReader = new FileReader()
fileReader.readAsDataURL(file)
fileReader.onload = () => {
resolve(fileReader.result)
}
fileReader.onerror = (error) => {
reject(error)
}
})
}
const ImageHandler = async (e) => {
const file = e.target.files[0]
const base64 = await convertToBase64(file)
setImage(base64)
}
return (
<>
<input type="file" onChange={ImageHandler} />
<h5>{image}</h5>
</>
)
}
export default BaseImage
output:
