Ottieni oggetto file dal file Ingresso

Question

Sto tentando di utilizzare un file di input reacst-start con jquery fileupload(). Con jQuery diritta vorrei fare $('#fileUpload').prop('files') per far passare i file alla chiamata fileupload. Tuttavia, non so come ottenere i file correttamente con react-bootstrap.

<Input type='file' label='Upload' accept='.txt' ref='fileUpload' buttonAfter={uploadFileButton}/> 

Answer 1

L'attributo stringa di ref è considered legacy, e molto probabilmente sarà deprecato ad un certo punto in futuro. Il modo per farlo ora è con un ref callback. Di seguito ho dimostrato utilizzando una funzione di freccia ES6.

Cambia vostro elemento di ingresso:

<Input 
    type='file' label='Upload' accept='.txt' 
    buttonAfter={uploadFileButton} 
    ref={(ref) => this.fileUpload = ref} 
/> 

quindi è possibile utilizzare:

const file = this.fileUpload.files[0];

E così via.

Answer 2

È piuttosto semplice; Ho completamente perso questo:

var files = this.refs.fileUpload.getInputDOMNode().files; 

Answer 3

In aggiunta a fahad's answer, se non è possibile utilizzare una funzione freccia (a causa del supporto del browser precedente o per altri motivi), è necessario associare il contesto React alla funzione.

<Input type='file' label='Upload' accept='.txt' 
    buttonAfter={uploadFileButton} 
    ref={ function(ref) { this.fileUpload = ref }.bind(this) } 
/> 

Answer 4

Questo ha funzionato per me.

let file = this.refs.fileUpload.files [0];

Answer 5

ho risolto upload di file come questo per React-Bootstrap con un pulsante personalizzato alla ricerca:

addFile = (event: any): void => { 
    console.log(event.target.files[0]); 
} 

<FormGroup> 
    <ControlLabel htmlFor="fileUpload" style={{ cursor: "pointer" }}><h3><Label bsStyle="success">Add file</Label></h3> 
     <FormControl 
      id="fileUpload" 
      type="file" 
      accept=".pdf" 
      onChange={this.addFile} 
      style={{ display: "none" }} 
     /> 
    </ControlLabel> 
</FormGroup>