I have a project and this project is about organizing users’ operations, and each user has certain settings for his account, and from these settings he can click on his image (the avatar) and choose an image and add it to the profile account

But I got this error:

index.js:1 Warning: Failed prop type: Invalid prop `src` of type `object` supplied to `ForwardRef(Avatar)`, expected `string`.

how can I solve it?

And this file contains the entire logo for adding an account picture

profilePage.js:

const useStyles = makeStyles((theme) => ({
  avatar: {
    border: `4px solid ${theme.palette.background.default}`,
  },
  topBg: {
    background: 'url("assets/images/profile/morain-lake.jpg")!important',
    backgroundSize: "cover!important",
    backgroundPosition: "center center!important",
  },
  layoutHeader: {
    background: "none",
    height: 320,
    minHeight: 320,
    [theme.breakpoints.down("md")]: {
      height: 240,
      minHeight: 240,
    },
  },
}));

function ProfilePage() {
  const classes = useStyles();
  const [selectedTab, setSelectedTab] = useState(0);
  const [selectedFile, setSelectedFile] = useState(null);
  function handleTabChange(event, value) {
    setSelectedTab(value);
  }

  const fileSelectHandler = (event) => {
    console.log("beore event");
    setSelectedFile(event.target.files[0]);
    console.log("after event");
  };

  const fileUploadHandler = () => {
    const fd = new FormData();
    fd.append("image", selectedFile, selectedFile.name);
    axios.post("/app-files", fd).then((res) => {
      console.log("res: ", res);
      // onUploadProgress: (ProgressEvent) => {
      //   console.log(
      //     "Upload Progress: "  
      //       Math.round((ProgressEvent.loaded / ProgressEvent.total) * 100)  
      //       "%"
      //   );
      // };
    });
  };

  return (
    <FusePageSimple
      classes={{
        topBg: classes.topBg,
        header: classes.layoutHeader,
        wrapper: "bg-transparent",
        content: "w-full max-w-2xl mx-auto",
        toolbar:
          "w-full max-w-2xl mx-auto relative flex flex-col min-h-auto h-auto items-start",
      }}
      header={<></>}
      contentToolbar={
        <>
          <div className="w-full px-24 pb-48 flex flex-col md:flex-row flex-1 items-center">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1, transition: { delay: 0.1 } }}
            >
              <input
                type="file"
                // onChange={handleChange}
                // style={{ display: "none" }}
                id="upload"
                accept="image/*"
                style={{ display: "none" }}
                onChange={fileSelectHandler}
                 // ref={(fileInput) => (this.fileInput = fileInput)}
              />
              <label htmlFor="upload">
                <IconButton
                  color="primary"
                  aria-label="upload picture"
                  component="span"
                  onClick={fileUploadHandler}
                  // onClick={() => this.fileInput.click()}
                >
                  <Avatar
                    className={clsx(classes.avatar, "-mt-64  w-128 h-128")}
                    src={selectedFile}
                    // onClick={fileUploadHandler}
                  />
                </IconButton>
              </label>
            </motion.div>
            <div className="flex flex-col md:flex-row flex-1 items-center justify-between p-8">
              <motion.div
                initial={{ opacity: 0, x: -40 }}
                animate={{ opacity: 1, x: 0, transition: { delay: 0.2 } }}
              >
                <Typography
                  className="md:px-16 text-24 md:text-32 font-semibold tracking-tight"
                  variant="h4"
                  color="inherit"
                >
                  John Doe
                </Typography>
              </motion.div>

              <div className="flex items-center justify-end -mx-4 mt-24 md:mt-0">
                <Button
                  className="mx-8"
                  variant="contained"
                  color="secondary"
                  aria-label="Follow"
                >
                  Follow
                </Button>
                <Button
                  variant="contained"
                  color="primary"
                  aria-label="Send Message"
                >
                  Send Message
                </Button>
              </div>
            </div>
          </div>
          <Tabs
            value={selectedTab}
            onChange={handleTabChange}
            indicatorColor="primary"
            textColor="inherit"
            variant="scrollable"
            scrollButtons="off"
            className="w-full px-24 -mx-4 min-h-40"
            classes={{
              indicator: "flex justify-center bg-transparent w-full h-full",
            }}
            TabIndicatorProps={{
              children: (
                <Divider className="w-full h-full rounded-full opacity-50" />
              ),
            }}
          >
            <Tab
              className="text-14 font-semibold min-h-40 min-w-64 mx-4"
              disableRipple
              label="Timeline"
            />
            <Tab
              className="text-14 font-semibold min-h-40 min-w-64 mx-4"
              disableRipple
              label="About"
            />
            <Tab
              className="text-14 font-semibold min-h-40 min-w-64 mx-4"
              disableRipple
              label="Photos & Videos"
            />
          </Tabs>
        </>
      }
      content={
        <div className="p-16 sm:p-24">
          {selectedTab === 0 && <TimelineTab />}
          {selectedTab === 1 && <AboutTab />}
          {selectedTab === 2 && <PhotosVideosTab />}
        </div>
      }
    />
  );
}

export default ProfilePage;

CodePudding user response：

const fileSelectHandler = (event) => {
    console.log("beore event");
    setSelectedFile(event.target.files[0]);
    console.log("after event");
  };

I think in the above function you have an object in event.target.files[0]

you have to set a specific object property in state example code below:

const fileSelectHandler = (event) => {
    const value = event?.target?.files[0]?.name;
    console.log("beore event",value);
    setSelectedFile(()=>value);
    console.log("after event",value);
  };