I have an input component in React that is supposed to trigger a custom handleSubmit function once a user uploads a file:

function PhotoInput({ enableInput }) {
    const inputStyle = {
        display: 'none'
    };

    const handleSubmit = (event) => {
        console.log("Uploading file...")
        // putToS3Bucket(event.target.files[0], '/upload')
    };

    if (enableInput) {
        console.log("logged")
        return (
            <input
                id="file-input"
                type="file"
                style={inputStyle}
                accept="image/*"
                onChange={handleSubmit}
            />
        );
    } else {
        return null;
    }
}

function PhotoPopover({ width, open, handlePhotoClickClose, enableInput, anchorRef }) {
    const navigate = useNavigate();
    

    return (
        <>
            <MenuPopover
                open={open}
                onClose={handlePhotoClickClose}
                anchorEl={anchorRef.current}
                sx={{ width: { width } }}
            >
                <label for="file-input">
                    <MenuItem
                        onClick={handlePhotoClickClose}
                        sx={{ typography: 'body2', py: 1, px: 2.5 }}
                    >
                        <Iconify
                            icon='eva:settings-2-fill'
                            sx={{
                                mr: 2,
                                width: 24,
                                height: 24
                            }}
                        />
                        Change Profile Photo
                    </MenuItem>
                </label>
                <PhotoInput enableInput={enableInput} />
            </MenuPopover>
        </>
    );
}

As you can see, this input is wrapped by a MenuItem component from Material. When I click on this MenuItem, a file uploading dialogue appears, but when I choose the file to upload, handleSubmit is not triggered (ie. I don't see "Uploading file..." in the console).

I'm really not sure why this is. I also tried it in a sandbox and it works there, but I don't see the difference between that and this code. Would someone be able to point me in the right direction?

CodePudding user response：

In React, an input type="file" is always an uncontrolled component. You should use the File API to get information about the files uploaded. See The file input Tag.

function PhotoInput({ enableInput }) {
  const fileInput = useRef(); /* create a ref*/
  const inputStyle = {
    display: 'none',
  };

  const handleSubmit = () => {
    event.preventDefault();
    /* get current files using ref */
    console.log('Uploading file...', fileInput.current.files[0].name);
  };

  if (enableInput) {
    return (
      <input
        id="file-input"
        type="file"
        style={inputStyle}
        ref={fileInput} /* add ref*/
        accept="image/*"
        onChange={handleSubmit}
      />
    );
  } else {
    return null;
  }
}

Working example

CodePudding user response：

You should change the format of the function call, i.e.:

onChange={(e) => handleSubmit(e)}