I have here an image uploader. My problem is that I wanted to let the alert appear first after clicking if you haven't selected from the autocomplete. Currently the alert appears after choosing an image.

Codesandbox CLICK HERE

  const handleDrop = (e) => {
    e.nativeEvent.preventDefault();

    if (!value) {
      setOpen(true);
    } else {
      if (!e) return;
      const files = e.nativeEvent.dataTransfer.files;
      onUploadImage(files);
    }
  };

  const browseFiles = (e) => {
    if (!value) {
      setOpen(true);
    } else {
      if (!e) return;
      const files = e.currentTarget.files;
      onUploadImage(files);
    }
    e.target.value = null;
  };

CodePudding user response：

You can acheive this by adding an onClick to the button that wraps the file input:

     <Button
      size="medium"
      variant="outlined"
      component="label"
      color="primary"
      onClick={(e) => {
        if (!value) {
          setOpen(true);
          e.nativeEvent.preventDefault();
        }
      }}
    >
      <input
        type="file"
        accept="image/*"
        multiple
        style={{ display: "none" }}
        onChange={(e) => browseFiles(e)}
      />
      Browse files
    </Button>