Bill upload view example

UploadView.js

import React from "react";

export default class BillUploadView extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleImageChange = this.handleImageChange.bind(this);
    this.state = {
      file: "",
      imagePreviewUrl: ""
    };
  }

  render() {
    const { imagePreviewUrl } = this.state;

    return (
      <div>
        <input type="file" onChange={this.handleImageChange} />
        <button type="button" onClick={this.handleSubmit}>
          Upload Image
        </button>
        {
          imagePreviewUrl ?
            <img src={imagePreviewUrl} /> :
            <div>Please select an Image for Preview</div>
        }
      </div>
    );
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log("handle uploading-", this.state.file);
  }

  handleImageChange(e) {
    e.preventDefault();

    const reader = new FileReader();
    const file = e.target.files[0];

    reader.onloadend = () => {
      this.setState({
        file,
        imagePreviewUrl: reader.result
      });
    };

    reader.readAsDataURL(file);
  }

}