Get file object from file Input

react-bootstrap
Joe W picture Joe W · May 27, 2015 · Viewed 41.9k times · Source

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

fahad picture fahad · Sep 29, 2016

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.

Related questions

How to add a classname/id to React-Bootstrap Component?

Suppose we are using Row from React-Bootstrap... How do we style it without using a wrapper or inner element: <Row> <div className='some-style'> ... </Row> Ideally we could just do: <Row className='some-style> ... &…

Read More
Listen to keypress for document in reactjs

I want to bind to close the active react bootstrap popover on escape press .Here is the code _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", …

Read More
Changing style of a button on click

Is it possible to change background-color of my button onClick function? ex. click background-color: black, another click background-color: white I've tried something like this.style, no result. I've managed to get overlay working and insert needed data inside of it. …

Read More