react bootstrap - Get file object from file Input

Question

I'm trying to use a react-bootstrap file input with jquery fileupload(). With straight jquery I would do $('#fileUpload').prop('files') to get the files to pass to the fileupload call. However, I don't know how to get the files correctly with react-bootstrap.

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

Answer 1

The ref string attribute is considered legacy, and will most likely be deprecated at some point in the future. The way to do this now is with a callback ref. Below I demonstrate using an ES6 arrow function.

Change your input element to:

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

Then you can use:

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

And so on.