Wie zurücksetzen ReacJS Datei Eingang

Question

I Datei-Upload-Eingang haben:

<input onChange={this.getFile} id="fileUpload" type="file" className="upload"/> 

Und ich umgehen auf diese Weise laden:

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); 
} 

Wenn ich zweimal gleiche Datei hochladen, dann laden Ereignis nicht ausgelöst wird. Wie kann ich das beheben? Für einfachen js-Code war es genug, folgendes zu tun: this.value = null; im Änderungshandler. Wie kann ich das mit ReactJS machen?

Answer 1

Ich denke, man kann nur den Eingangswert wie folgt löschen:

e.target.value = null; 

Datei-Eingabe nicht kontrolliert werden kann, gibt es keine spezifische Art und Weise zu reagieren ist.

Answer 2

Was für mich gearbeitet wurde ein key Attribut auf die Datei Eingangseinstellung, dann, wenn ich es zurücksetzen musste ich den Schlüssel Attributwert aktualisieren:

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> 
) 
} 

dass Kräfte die Eingabe wieder von Grund auf neu machen React.

Answer 3

Diese Arbeit für mich - ref = {ref => this.fileInput = ref}

<input id="file_input_file" type="file" onChange={(e) => this._handleFileChange(e)} ref={ref=> this.fileInput = ref} /> 

dann in meinem Fall, sobald die Datei auf den Server hochgeladen wurde, habe ich es löschen, indem Sie die Anweisung unter

mit

this.fileInput.value = "";