title: Rotating image preview with ReactJS
body: <p>I'm trying to rotate a preview of an image with ReactJS. So I'm first allowing an upload function that renders the preview, and then before the user hits upload I want them to have the option to rotate the image to their liking. This is what I'm using to preview the image:</p>
  
  <pre><code>class ImageUpload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {file: '',imagePreviewUrl: ''};
  }
  
  _handleImageChange(e) {
    e.preventDefault();
  
  let reader = new FileReader();
  let file = e.target.files[0];
  
  reader.onloadend = () =&gt; {
    this.setState({
      file: file,
      imagePreviewUrl: reader.result
    });
  }
  
  reader.readAsDataURL(file)
  }
  
  render() {
  let {imagePreviewUrl} = this.state;
  let $imagePreview = null;
  if (imagePreviewUrl) {
    $imagePreview = (&lt;img src={imagePreviewUrl} /&gt;);
  } else {
    $imagePreview = (&lt;div className="previewText"&gt;&lt;/div&gt;);
  }
  
  return (
    &lt;div className="previewComponent"&gt;
      &lt;form onSubmit={(e)=&gt;this._handleSubmit(e)}&gt;
        &lt;input className="fileInput" 
          type="file" 
          onChange={(e)=&gt;this._handleImageChange(e)} /&gt;
        &lt;button className="submitButton" 
          type="submit" 
          onClick={(e)=&gt;this._handleSubmit(e)}&gt;Upload Image&lt;/button&gt;
      &lt;/form&gt;
      &lt;input type="button" value="&lt; rotate" onClick="" /&gt;
      &lt;input type="button" value="rotate &gt;" onClick="" /&gt;
      &lt;div className="imgPreview"&gt;
        {$imagePreview}
      &lt;/div&gt;
    &lt;/div&gt;
  )
  }}
  
  ReactDOM.render(&lt;ImageUpload/&gt;, document.getElementById("mainApp"));
  </code></pre>
  
  <p>And this is what I was trying to use to rotate the image:</p>
  
  <pre><code>class RotateIMG extends React.Component{
  constructor(props){
  super(props);
  this.state = {
    rotation: 0
  }
  
  this.rotate = this.rotate.bind(this);
  this.rotateleft = this.rotateleft.bind(this);
  }
  
  rotate(){
    let newRotation = this.state.rotation + 90;
    if(newRotation &gt;= 360){
      newRotation =- 360;
    }
      this.setState({
        rotation: newRotation,
      })
    }
  
    rotateleft(){
      let newRotation = this.state.rotation - 90;
      if(newRotation &gt;= 360){
        newRotation =- 360;
      }
      this.setState({
        rotation: newRotation,
      })
    }
  
    render(){
      const { rotation } =  this.state;
      return &lt;div&gt;&lt;img style={{transform: `rotate(${rotation}deg)`}} src={"//blog-assets.risingstack.com/2016/Jan/react_best_practices-1453211146748.png"} width="600" /&gt;
        &lt;input onClick={this.rotateleft} type="button" value="left" /&gt;
        &lt;input onClick={this.rotate} type="button" value="right" /&gt;
      &lt;/div&gt;
    }
  }
  
  const element = &lt;RotateIMG /&gt; 
  
  ReactDOM.render(element, document.getElementById('root'));
  </code></pre>
  
  <p>As far as I can tell both of these seem to work fine on their own, but I have no idea where to start in terms of making them work together, or if that is even possible. Any help would be greatly appreciated!</p>