How can I use a label for file upload?

Question

I am newbie on react. I have asked few days back regarding the upload on image by modifying the button through some div. I have thought to do it by hooks (based on my research)

One of the user has suggested me that use the label and on the use the htmlFor attribute with using the same id used on the input types file.

I have used but the problem is that on my image filed in the state where i am using to store the base64 uploaded string was wiped out through some kind of event bubbling or some other reason. On final submit, I did not get the image on state.

I have found that using Label will make some bubbling and my image in state will be refreshed with default value

This is my implementation:

constructor(props, context) {
    super(props, context);
}

postQuery=()=> {
 // This function trigger when final submit button is clicked and here i am not getting
 the image key with value in state.
 console.log('Final State: ', this.state); // Here i need the image in state
 // Other task is dependent on this.state.image; // ---> base64 string;
}

uploadImage()=> {
 // here I am getting the file which is selected by the user from frontend.
 // some function which return the image base64 string
 let fileToLoad = e.target.files[0]
 // here call the base64 function which is returning the base64 string
 this.setState({
   image: fileToLoad.base64,
 }, ()=> { console.log(this.state.image) }); // here I am getting the image key with base64 string on state.
}

render() {
 <div>
   <Button onClick={()=>this.postQuery()}>SUBMIT</Button>
 </div>
 <div>
   <FormControl
     id="formControlsFile"
     type="file"
     label="file"
     onChange={(e) => this.uploadImage(e)}
     style={{display: 'none'}} // if change to display block and click on the input then everything works correct.
   />
   <label style={{ display: 'inline-block' }} htmlFor="formControlsFile">
      <i
        className={cx(
         fontStyles.fa,
         fontStyles["fa-image"]
        )}
       />
       <span>UPLOAD IMAGE</span>
   </label>
 </div>
}

Can anyone guide me where I need to fix/modify. Any suggestion or help is highly appreciated. Thanks in advance for the interactions.

Answer 1

What worked for me using material-UI was this piece of code

             const [mainImage, setMainImage] = useState(null);
             const handleCapture = ({ target }) => {
              setMainImage(target.files[0]);
              uploadImage("main", target.files[0]);
             };

            <Button
              variant="contained"
              component="label"
              sx={{ width: "100%" }}
            >
              Upload Image
              <input
                hidden
                id="faceImage"
                type="file"
                // multiple
                accept="image/*"
                onChange={handleCapture}
              />
            </Button>