Skip to content

Instantly share code, notes, and snippets.

@RudyJessop RudyJessop/App.js

Created May 24, 2016
Embed
What would you like to do?
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"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.