Estoy trabajando con un sitio web en React js, donde enfrenté un problema con la etiqueta de entrada html. Estoy usando la etiqueta de entrada html para cargar el archivo y enviarlo a un servidor. Todo funciona bien en el escritorio, pero cuando elijo un archivo para cargar desde el selector de archivos nativo de Android en el navegador Chrome del teléfono, no sucede nada.
Código:
<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 ;
}
Permítanme explicar lo que está sucediendo, tengo la entrada que está deshabilitada, pero tomé referencia de esa etiqueta y la pasé al botón de exploración... De modo que si hago clic en el botón de exploración, se abre el selector de archivos. Inicialmente var hiddenFileInput = React.useRef(null); donde hiddenFileInput es la referencia a la entrada. Y luego, el evento handleChange se activa cuando la entrada se cambia usando el botón de navegación.