Showing the ajax POST addition to https://github.com/DropsOfSerenity/react-avatar-cropper/

App.js

import React from "react";
import ReactDom from "react-dom";
import AvatarCropper from "./AvatarCropper";
import $ from "jquery";

var App = React.createClass({
  getInitialState: function() {
    var defaultProfile = document.getElementById('user-dp').getAttribute('profileimage');
    return {
      cropperOpen: false,
      img: null,
      croppedImg: defaultProfile
    };
  },
  handleFileChange: function(dataURI) {
    this.setState({
      img: dataURI,
      croppedImg: this.state.croppedImg,
      cropperOpen: true
    });
  },
  handleCrop: function(dataURI) {
    this.setState({
      cropperOpen: false,
      img: null,
      croppedImg: dataURI
    });
    this.saveImageToServer();
  },
  saveImageToServer: function(){
    var token = document.querySelector('[name="_token"]').getAttribute('value');
    var username = document.getElementById('user-name').getAttribute('username');
    $.ajax({
        type: "POST",
        url: "images/dpUpload/"+username,
        headers:{
          'X-CSRF-Token': token
        } ,
        contentType: false,
        data: {'dp': this.state.croppedImg},
        processData: false,
        error: function(jqXhr, json, errorThrown){
          var errors = {
            '_token': token,
            'dp': this.state.croppedImg,
            'HTML_Error': jqXhr.responseText,
            'Error': errorThrown
          };

          console.log(errors)
          alert('Error in Uploading');
        }.bind(this),
        success: function(){
          var success = this.state.croppedImg;

          console.log('Success Uploading');
          console.log(success);
          alert('Image File Uploaded');
        }.bind(this)
    });
  },
  handleRequestHide: function() {
    this.setState({
      cropperOpen: false
    });
  },
  render () {
    return (
      <div>
        <div className="avatar-photo">
          <FileUpload handleFileChange={this.handleFileChange} />
          <div className="avatar-edit">
            <span>Click to Pick Avatar</span>
            <i className="fa fa-camera"></i>
          </div>
          <img src={this.state.croppedImg} />
        </div>
        {this.state.cropperOpen &&
          <AvatarCropper
            onRequestHide={this.handleRequestHide}
            cropperOpen={this.state.cropperOpen}
            onCrop={this.handleCrop}
            image={this.state.img}
            width={450}
            height={450}
          />
        }
      </div>
    );
  }
});

var FileUpload = React.createClass({

  handleFile: function(e) {
    var reader = new FileReader();
    var file = e.target.files[0];

    if (!file) return;

    reader.onload = function(img) {
      ReactDom.findDOMNode(this.refs.in).value = '';
      this.props.handleFileChange(img.target.result);
    }.bind(this);
    reader.readAsDataURL(file);
  },

  render: function() {
    return (
      <input ref="in" type="file" accept="image/*" onChange={this.handleFile} />
    );
  }
});

ReactDom.render(<App />, document.getElementById("content"));