0
176
Visualizações¿Cómo crear un campo de formulario de entrada con un botón que cargue un archivo usando reaccionar y javascript?
Soy nuevo en la programación y el aprendizaje sobre la marcha. lo que estoy tratando de hacer actualmente es crear un campo de formulario como el siguiente que carga un archivo al hacer clic en un botón.
y una vez cargado el archivo y antes de enviar el archivo a la API, debería ver el nombre del archivo en el campo de formulario como se muestra a continuación
Lo intenté como se muestra a continuación, pero eso muestra solo el botón de exploración del archivo, pero no siembra el campo de entrada con Agregar marcador de posición de archivo.
<input type="file" id={`${fieldRoot}.file`} ref={fileInput} style={{ display: 'none' }} accept=".pem" onChange={() => { /*do something*/ console.log('hello') }} /> <Button minWidth="126px" //onClick={handleUploadClick} > Browse file </Button>Podría alguien ayudarme con esto. Gracias.
1 Respostas
Responde à pergunta0
<input type="file"/>también es una entrada. Entonces puede usar la<label>y darle estilo como un botón. En este caso, uso image en su lugar.Estoy usando un atributo
hiddenpara hacer que el<input />real sea invisible.
<input type="file" id="avatar" onChange={fileSelectedHandler} hidden /> <label className={profileStyle.uploadLabel} htmlFor="avatar"> <Image width="25px" height="25px" src="/icons/upload-image-icon.jpeg" alt="upload-avatar" /> </label>Esto es lo que quieres:
import React, { useState } from "react"; export const Upload = () => { const [filename, setFilename] = useState(""); return ( <> <input value={filename} type="text" style={{ width: 200, height: 28, padding: 0, border: "1px solid #767676" }} /> <input type="file" id="upload" hidden onChange={(e) => { // You have your file detail in e.tartget.files console.log(e.target.files[0]); setFilename(e.target.files[0].name); }} /> <label htmlFor="upload" style={{ width: 90, background: "#767676", color: "#fff", padding: 5 }} > Browse </label> </> ); };Mira esta demostración