I am working with a website in React js, where I faced an issue with the html input tag. I am using the html input tag to upload file and send it to a server. Everything is working fine on Desktop, but when I choose a file to upload from the native android file picker on phone's chrome browser, nothing happens.

Code :

    <input
      ref={hiddenFileInput}
      onChange = {(e)=>{handleChange(e); }}
      style={{ display: "none" }}
      type="file"
    ></input>



    <span id="browse-button" onClick={handleClick}>
          browse
    </span>

    var hiddenFileInput = React.useRef(null);
    const handleChange = (e)=> {
e.preventDefault(); 
e.stopPropagation(); 
 console.log(e.target.files)  ; 
 if (e.target.files) {
   var file= e.target.files[0] ; 
   
    uploadFile(file); 
 }
// var files = e.dataTransfer.files ; 

}

Let me just explain what's happening, I have the input which is disabled, but I have taken reference of that tag and passed it to browse-button... So that if I click on the browse button the file picker opens up. Initially var hiddenFileInput = React.useRef(null); where hiddenFileInput is the reference to input. And then the handleChange event is fired when the input is changed using the browse-button.