title: Upload rotated image preview with ReactJS
body: <p>I'm pretty new in ReactJS and I am trying to upload rotated a preview of an image with ReactJS. I followed this stackoverflow question: </p>
  
  <p><code>https://stackoverflow.com/questions/44530791/rotating-image-preview-with-reactjs</code></p>
  
  <p>I was able to integrate but I am really stuck how I could possibly update the image state and upload.</p>
  
  <p>I couldn't find any info about this situation and I also tried to integrate the way of uploading the cropped image but I just couldn't handle it. </p>
  
  <p>This is how I get the image via Dropzone:</p>
  
  <pre><code>&lt;Label as="label" htmlFor="upload"&gt;
    &lt;div  className={styles.card}&gt;
       &lt;Dropzone
           onDrop={this.onImageDrop}
           accept="image/*"
           multiple={false}
        &gt;
        {({ getRootProps, getInputProps }) =&gt; {
            return (
              &lt;div {...getRootProps()}&gt;
                 &lt;input {...getInputProps()} /&gt;
                 {
                   &lt;p&gt;
                   Upload your profile picture.
                   &lt;/p&gt;
                  }
                &lt;/div&gt;
             );
          }}
          &lt;/Dropzone&gt;
  
       &lt;/div&gt;
       &lt;/Label&gt;
       {this.state.uploadedFile === null ? '' : (
          &lt;div&gt;
            &lt;RotateImage src={this.state.uploadedFile} /&gt;
          &lt;/div&gt;
       )}
  </code></pre>
  
  <p>This is how I update profile_image:</p>
  
  <pre><code> onImageDrop(files) {
      this.setState({
        profile_image: files[0],
        uploadedFile: URL.createObjectURL(files[0]),
      });
    }
  </code></pre>
  
  <p>This is the submit part of it(I pass it to redux):</p>
  
  <pre><code>onSubmit(e) {
  
    e.preventDefault();
  
    const {
      profile_image
    } = this.state;
  
    fileUrl.append('profile_image', profile_image);
  
    this.props.createProfile(fileUrl, this.props.history);
  }
  </code></pre>
  
  <p>This is my constructor:</p>
  
  <pre><code>constructor(props) {
      super(props);
      const { auth } = this.props;
      const { location } = auth;
      this.state = {
        uploadedFile: null
      };
  
      this.onImageDrop = this.onImageDrop.bind(this);
      this.onSubmit = this.onSubmit.bind(this);
    }
  
  </code></pre>
  
  <p>And this is my RotateImage component that I got from other stackoverflow question (all credits to them):</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class rotateImage extends 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={this.props.src} width="200" /&gt;
        &lt;input onClick={this.rotateleft} type="button" value="left" /&gt;
        &lt;input onClick={this.rotate} type="button" value="right" /&gt;
      &lt;/div&gt;
    }
  }
  
  export default rotateImage;
  
  </code></pre>
  
  <p>I am trying to upload rotated image and I really don't know how I could update image state that is rotated. Any help would be appreciated.</p>