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;