image Input form #react

imageinputform.md

import React, {Fragment} from "react";

class FileInput extends React.Component {

  render() {
    const styles = {
      // "font-size": "24px"
      "marginLeft": "12px"
    }
    return (
      <Fragment>
        <label htmlFor="imgFile" className="btn">Change Image</label>
        {this.props.state.onImgLoading
          ? (
            <i className="fa fa-1x fa-spinner fa-spin" style={styles}></i>
          )
          : null}
        <input
          id="imgFile"
          type="file"
          style={{
          visibility: 'hidden'
        }}
          accept="image/x-png,image/gif,image/jpeg"
          ref={input => {
          this.fileInput = input;
          this.props.state.fileInput = this.fileInput;
        }}
          onChange
          ={(e) => {
          this
            .props
            .actions
            .onHandelUpdateProfileUserAvatar(e);
        }}/>
        <br/>
      </Fragment>
    );
  }
}

export default FileInput;