41 lines
934 B
JavaScript
41 lines
934 B
JavaScript
|
import React from 'react';
|
||
|
|
import FileReaderInput from 'react-file-reader-input';
|
||
|
|
|
||
|
|
|
||
|
|
export class Upload extends React.Component {
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.state = {
|
||
|
|
url: ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
handleChange = (e) => {
|
||
|
|
var file = e.target.files[0],
|
||
|
|
reader = new FileReader();
|
||
|
|
|
||
|
|
reader.onloadend = (function () {
|
||
|
|
// Since it contains the Data URI, we should remove the prefix and keep only Base64 string
|
||
|
|
this.setState({url: reader.result})
|
||
|
|
var b64 = reader.result.replace(/^data:.+;base64,/, '');
|
||
|
|
console.log(b64); //-> "R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs="
|
||
|
|
}).bind(this);
|
||
|
|
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<form>
|
||
|
|
<label htmlFor="my-file-input">Upload a File:</label>
|
||
|
|
<input type="file" name="file" onChange={this.handleChange}/>
|
||
|
|
<img src={this.state.url} />
|
||
|
|
</form>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Upload;
|
||
|
|
|