Subir una imagen y pre-visualizarla en ReactJS

*Disclaimer* No contiene Hooks.

Hace unos días estuve pegándome para crear una feature que me permitiese subir una imagen de baby yoda y pre-visualizarla. La segunda parte me dio un poco de dolor de cabeza, planteando distintas soluciones, hasta que di con la solución más rápida y fácil

Lo primero, será declarar un estado de filepreview a null.

 this.state = { filepreview: null }

En el render, pondremos el input type file, que es el que se encargará de subir la imagen. También añadiremos una imagen, que tendrá el estado de filepreview.

<div class="control-label"> File Upload </div>
 <input type="file" name="myImage" onChange= {this.onChange} />
 <img class="img-preview" src={this.state.filepreview}/>

Por último, añadiremos la manera de visualizarla, que será creando un objecto URL con el parámetro de entrada que será el fichero.

onChange(e){
 this.setState({filepreview:URL.createObjectURL(e.target.files[0]        )      
 })  
}

Y así nos queda.

#babyyoda #reactJS #input #file #preview #previsualizar #imagen #image