Tengo entrada de carga de archivos:
<input onChange={this.getFile} id="fileUpload" type="file" className="upload"/>Y manejo la carga de esta manera:
getFile(e) { e.preventDefault(); let reader = new FileReader(); let file = e.target.files[0]; reader.onloadend = (theFile) => { var data = { blob: theFile.target.result, name: file.name, visitorId: this.props.socketio.visitorId }; console.log(this.props.socketio); this.props.socketio.emit('file-upload', data); }; reader.readAsDataURL(file); }Si cargo el mismo archivo dos veces, el evento de carga no se activa. ¿Cómo puedo arreglar eso? Para el código js simple, fue suficiente hacer lo siguiente: this.value = null; en el controlador de cambios. ¿Cómo puedo hacerlo con ReactJS?
Creo que puedes borrar el valor de entrada de esta manera:
e.target.value = null;La entrada de archivos no se puede controlar, no hay una forma específica de React para hacerlo.
Editar Para navegadores antiguos (<IE11), puede usar una de las siguientes técnicas .
Consulte http://jsbin.com/zurudemuma/1/edit?js,output (probado en IE10 y 9)
Lo que funcionó para mí fue establecer un atributo key para la entrada del archivo, luego, cuando necesitaba restablecerlo, actualicé el valor del atributo clave:
functionThatResetsTheFileInput() { let randomString = Math.random().toString(36); this.setState({ theInputKey: randomString }); } render() { return( <div> <input type="file" key={this.state.theInputKey || '' } /> <button onClick={this.functionThatResetsTheFileInput()} /> </div> ) }Eso obliga a React a renderizar la entrada nuevamente desde cero.
Esto funciona para mí - ref={ref => this.fileInput = ref}
<input id="file_input_file" type="file" onChange={(e) => this._handleFileChange(e)} ref={ref=> this.fileInput = ref} />luego, en mi caso, una vez que el archivo se cargó en el servidor, lo borro usando la declaración a continuación
this.fileInput.value = "";