I have three useState variables, for these variables I have three input(file-image) fields. I wanted to store their base64 strings to the three useState variables accordingly. I only store base64 string for base64Image1. How can I do this for base64Image2 and base64Image3?
const [base64Image1, setBase64Value1] = useState("");
const [base64Image2, setBase64Value2] = useState("");
const [base64Image3, setBase64Value3] = useState("");
Here is the full code
const FullWidthBanner = () => {
const [base64Image1, setBase64Value1] = useState("");
const [base64Image2, setBase64Value2] = useState("");
const [base64Image3, setBase64Value3] = useState("");
var base64code = "";
const onChange = (e) => {
const files = e.target.files;
const file = files[0];
getBase64(file);
};
const onLoad = (fileString) => {
base64code = fileString;
console.log("base64 Teshie", fileString);
setBase64Value1(base64code);
};
const onLoad1 = (fileString) => {
base64code = fileString;
console.log("base64 Teshie", fileString);
setBase64Value1(base64code);
};
const getBase64 = (file) => {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
onLoad(reader.result.split(",")[1]);
};
};
return (
<div className="grid place-items-center bg-stone-300">
<div className="flex flex-col justify-center items-center">
{/* Image area */}
<div className="flex flex-col p-10 justify-center items-center space-y-4">
<div>
<h2>Above header ad Image</h2>
</div>
<div className="bg-white">
<div class="mt-1 w-96 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
<div class="space-y-1 text-center">
<svg
class="mx-auto h-12 w-12 text-gray-400"
stroke="currentColor"
fill="none"
viewBox="0 0 48 48"
aria-hidden="true"
>
<path
d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<div class="flex text-sm text-gray-600">
<label
for="file-upload"
class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
>
<input
id="file-upload"
name="file-upload"
type="file"
class=""
/>
</label>
<p class="">For Image 1</p>
</div>
<div class="flex text-sm text-gray-600">
<label
for="file-upload"
class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
>
<input
id="file-upload"
name="file-upload"
type="file"
class=""
/>
</label>
<p class="">For Image 2</p>
</div>
<div class="flex text-sm text-gray-600">
<label
for="file-upload"
class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
>
<input
id="file-upload"
name="file-upload"
type="file"
class=""
/>
</label>
<p class="">For Image 3</p>
</div>
<p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
</div>
</div>
</div>
<p className="text-xs p-4">
i.e the recommended image size for Advertisment image is 1512*124
pxl
</p>
</div>
</div>
{/* Link area */}
<div className="">
<p className="text-xs">Link</p>
<div class="md:w-2/3">
<input
class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-64 py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-none"
type="text"
/>
</div>
</div>
</div>
);
};
export default FullWidthBanner;
