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}/>
The more current version of this would be something like:
function MyComponent(): JSX.Element {
const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>): void => {
const files = Array.from(e.target.files)
console.log("files:", files)
}
return (
<input onChange={handleFileSelected} type="file" />
)
}
The attribute is found on e.target.files which you can get from the onChange event.
EDIT: Removed unnecessary ref code, hat tip Mark in comments 🙇
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.
I solved file upload like this for React-Bootstrap with a custom looking button:
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>
It's pretty straight forward; I completely missed this:
var files = this.refs.fileUpload.getInputDOMNode().files;
You can access the file object by binding an event handler to the onChange event of the HTML file input.
Here is a quick example using a functional component:
import React from 'react'
function UploadForm(props) {
return(
<div>
<input type="file" name="docx" onChange={setFile.bind(this)} />
<input type="button" onClick={postFile} value="Upload" />
</div>
)
function postFile(event) {
// HTTP POST
}
function setFile(event) {
// Get the details of the files
console.log(event.target.files)
}
}
export default UploadForm;
Adding to fahad's answer, if you can't use an arrow function (due to older browser support, or for some other reason), you must bind the React context to the function.
<Input type='file' label='Upload' accept='.txt'
buttonAfter={uploadFileButton}
ref={ function(ref) { this.fileUpload = ref }.bind(this) }
/>
This worked for me.
let file = this.refs.fileUpload.files[0];
If you want to access the file that was uploaded using ref then you can do it as follow:
fileUpload.current.files[0]
I am using react bootstrap and finds that files is an javaScript object not array type so we have to access it like a key value where key is the index i.e, length - 1
this code might help
const _handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = Object(event.currentTarget.files)[0];
console.log(file);
};
