Upload avatar to firebase with Antd in React

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?

Upload avatar to firebase with Antd in React

0 Answers0