Get base 64 info from upload - reactjs

Question

I have an upload component from ant design library.
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import {
Form,
Select,
InputNumber,
Switch,
Radio,
Slider,
Button,
Upload,
Rate,
Checkbox,
Row,
Col,
} from 'antd';
import { UploadOutlined, InboxOutlined } from '#ant-design/icons';
const { Option } = Select;
const formItemLayout = {
labelCol: {
span: 6,
},
wrapperCol: {
span: 14,
},
};
const normFile = e => {
console.log('Upload event:', e);
if (Array.isArray(e)) {
return e;
}
return e && e.fileList;
};
const Demo = () => {
const onFinish = values => {
console.log('Received values of form: ', values);
};
const [state, setState] = useState({
loading: false,
});
function getBase64(img, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
const handleChange = info => {
if (info.file.status === 'uploading') {
setState({loading: true});
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl =>
setState({
imageUrl,
loading: false,
}),
);
}
};
function beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
console.error('You can only upload JPG/PNG file!');
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
console.error('Image must smaller than 2MB!');
}
return isJpgOrPng && isLt2M;
}
const uploadButton = (
<div>
<div className="ant-upload-text">Upload img</div>
</div>
);
const {imageUrl} = state;
return (
<Form
name="validate_other"
{...formItemLayout}
onFinish={onFinish}
initialValues={{
'input-number': 3,
'checkbox-group': ['A', 'B'],
rate: 3.5,
}}
>
<Form.Item
name="upload"
label="Upload"
valuePropName="fileList"
getValueFromEvent={normFile}
>
<Upload
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
beforeUpload={beforeUpload}
onChange={handleChange}
>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{width: '100%'}}/> : uploadButton}
</Upload>
</Form.Item>
<Form.Item
wrapperCol={{
span: 12,
offset: 6,
}}
>
<Button type="primary" htmlType="submit">
get data from upload
</Button>
</Form.Item>
</Form>
);
};
ReactDOM.render(<Demo />, document.getElementById('container'));
Now i have an issue when i upload an image and after that click on upload img button. I don't get the base 64 data of image in console.log('Received values of form: ', values);
Question: How, when i will click on that button to get data as base64?demo: https://codesandbox.io/s/silent-grass-sqzl1?file=/index.js:0-2944