Me gustaría hacer un botón de entrada de archivo como el de Amazon. Escriba una reseña que se muestra a continuación.
¿Cómo es posible que todo el botón abra el cuadro de diálogo del archivo al hacer clic si el tipo de archivo de entrada está oculto?
Mi código aquí oculta el botón de tipo de archivo de entrada pero no abre el cuadro de diálogo del archivo. Está usando React con clases de viento de cola.
<button type="button" className="p-6" > <div aria-label="Add a photo"> <HiOutlinePlus className="text-4xl" /> <input type="file" accept="image/*" className="hidden" /> </div> </button>¿Cómo es posible que todo el botón abra el cuadro de diálogo del archivo al hacer clic si el tipo de archivo de entrada está oculto?
Probablemente use un widget separado que luego abre la entrada del archivo oculto al hacer clic, de la siguiente manera:
function openFileUpload() { document.getElementById("hiddenFile").click(); } <button onclick="openFileUpload()" type="button">Visible Button</button> <input type="file" id="hiddenFile" style="visibility:hidden">