// components/forms/ProfileUpload.js
import Resizer from "react-image-file-resizer";
import axios from "axios";
import { Avatar } from "antd";
import { useAuth } from "../../context/auth";

export default function ImageUpload({
  photo,
  setPhoto,
  uploading,
  setUploading,
}) {
  // context
  const [auth, setAuth] = useAuth();

  const handleUpload = (e) => {
    let file = e.target.files[0];
    if (file) {
      setUploading(true);
      // upload
      new Promise((resolve) => {
        Resizer.imageFileResizer(
          file,
          1080,
          720,
          "JPEG",
          100,
          0,
          async (uri) => {
            try {
              const { data } = await axios.post("/upload-image", {
                image: uri,
              });
              setPhoto(data);
              setUploading(false);
            } catch (err) {
              console.log("photo upload err => ", err);
              setUploading(false);
            }
          },
          "base64"
        );
      });
    } else {
      setUploading(false);
    }
  };

  const handleDelete = async () => {
    const answer = window.confirm("Delete image?");
    if (!answer) return;
    setUploading(true);
    try {
      const { data } = await axios.post("/remove-image", photo);
      if (data?.ok) {
        setPhoto(null);
        setUploading(false);
      }
    } catch (err) {
      console.log(err);
      setUploading(false);
    }
  };

  return (
    <>
      <div className="d-flex mt-4">
        <label className="btn btn-secondary mr-1">
          {uploading ? "Processing..." : "Upload photos"}
          <input
            onChange={handleUpload}
            type="file"
            accept="image/*"
            hidden
            disabled={uploading}
          />
        </label>

        {photo?.Location ? (
          <Avatar
            src={photo?.Location}
            shape="square"
            size={46}
            className="mx-1 pointer"
            onClick={() => handleDelete()}
          />
        ) : (
          ""
        )}

        <pre>{JSON.stringify(photo, null, 4)}</pre>
      </div>
    </>
  );
}

Now import and use in ProfileUpdate.js

<ProfileUpload
  photo={photo}
  setPhoto={setPhoto}
  uploading={uploading}
  setUploading={setUploading}
/>