Este es el escenario: un usuario debe cargar un archivo, una vez que lo hace, me gustaría mostrarlo en la página tan pronto como el servidor lo reciba. Probé el renderizado condicional pero eso no funciona.
¿Qué debo hacer para que funcione? Gracias por adelantado.
código:
import React, { useState } from 'react' import './App.css' function App() { const [image, setImage] = useState('') const submitHandle = (e) => { if (!image) { console.log('please upload an image') } else { console.log(e.target) e.preventDefault() console.log('submitted') } } return ( <section> <div> <div> <h1>heading one</h1> <form onSubmit={submitHandle}> <input value={image} onChange={(e) => setImage(e.target.value)} type='file' accept='image/gif, image/jpeg, image/png' /> <button type='submit'>submit</button> </form> {image && <img src={image} alt='image' />} </div> </div> </section> ) } export default AppPara una input de tipo file , su valor no se puede establecer por código.
Y para ver la imagen inmediatamente, tendrá que convertirla en una cadena usando un FileReader ;
Así que tenemos que crear otra función loadImage y pasar el archivo seleccionado como su argumento
function App() { const [image, setImage] = useState(''); const loadImage = (file) => { const reader = new FileReader(); reader.addEventListener('load', e => setImage(e.target.result)); reader.readAsDataURL(file); } const submitHandle = (e) => { if (!image) { console.log('please upload an image') } else { console.log(e.target) e.preventDefault() console.log('submiited') } } return ( <section> <div> <div> <h1>heading one</h1> <form onSubmit={submitHandle}> <input onChange={(e) => loadImage(e.target.files[0])} type='file' accept='image/gif, image/jpeg, image/png' /> <button type='submit'>submit</button> </form> {image && <img src={image} alt='image' />} </div> </div> </section> ) }