Upload avatar to firebase with Antd in React - reactjs

Question

How can I use Upload component in Ant Design to upload avatar to Firebase?
Here is what I used and tried in React:
// Modal hook
const [modal1Open, setModal1Open] = useState(false);
// Upload new avatar
const [loading, setLoading] = useState(false);
const [imageUrl, setImageUrl] = useState();
const handleAvatarChange = (info) => {
if (info.file.status === 'uploading') {
setLoading(true);
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, (url) => {
setLoading(false);
setImageUrl(url);
});
}
};
const uploadAvatar2fb = async () => {
console.log('new avatar url: ', imageUrl)
try {
await addAvatarUrl2UserDb(location.state.userEmail, imageUrl)
} catch (error) {
console.log(error.message)
}
}
const uploadButton = (
<div>
{loading ? <LoadingOutlined /> : <PlusOutlined />}
<div
style={{
marginTop: 8,
}}
>
Upload
</div>
</div>
);
return (
{/* change avatar */}
<Button type="primary" onClick={() => setModal1Open(true)}>Change Avatar</Button>
<Modal
title="Upload your new avatar here"
centered
open={modal1Open}
onOk={() => setModal1Open(false)}
onCancel={() => setModal1Open(false)} >
<p>Click below to upload...</p>
<Upload
name="avatar"
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
// upload address
action='./images/'
// check format jpg/png check size < 2mb
beforeUpload={beforeUpload}
// set new upload url
onChange={handleAvatarChange} >
{imageUrl ? (
<img
src={imageUrl}
alt="avatar"
style={{
width: '100%',
}}
/>
) : (
uploadButton
)}
</Upload>
</Modal>
)
How do I handle with the action='' in that <Upload ..> tag?
I wrote this trying to make the uploading to firebase
const uploadAvatar2fb = async () => {
console.log('new avatar url: ', imageUrl)
try {
await addAvatarUrl2UserDb(location.state.userEmail, imageUrl)
} catch (error) {
console.log(error.message)
}
}
which called the function in firebase.js
// save avart to users
export const addAvatarUrl2UserDb = async (email, url) => {
const userDocRef = doc(db, 'users', email)
try {
await setDoc(userDocRef, {
avatar: url
})
} catch (error) {
console.log("avatar url upload error:", error.message)
}
}
And when I tried to upload after start npm, I got the error like POST http:localhost:3000/{url of the action} 404 not found. It shows that the address I wrote in <Upload action='...' /> is not found.
How could I solve this and make the uploading works?