title: react-dropzone image rotate on upload
body: <p>I have a problem with react-dropzone uploading image. When I upload images with my phone some images rotate and I don't understand the reason.</p>
  
  <p>Here the image form code :</p>
  
  <pre><code>export const ImageDropZone = ({ input, fetching, handleOnDrop, isImageUploading, handleRemoveImage, imagefile, libelle, meta: { touched, error, warning }, ...field}) =&gt; {
      if(fetching || isImageUploading){
        return(
          &lt;div id="post-single-page"&gt;
              &lt;Spinner/&gt;
          &lt;/div&gt;
        )
      }
      return (
        &lt;div className={classnames("form-group", { "has-error": touched &amp;&amp; ((error || warning)) })}&gt;
        {imagefile 
                  ? (&lt;ImagePreview className="dropzone undashed" onChange={input.onChange} imagefile={imagefile} id={field.id} handleRemoveImage={handleRemoveImage} /&gt;) 
                  :
          (&lt;Dropzone
            name={input.name}
            className="dropzone"
            onChange={file =&gt; input.onChange(file)}
            onDrop={file =&gt; handleOnDrop(file, input.onChange, field.id)}
            accept="image/jpeg, image/png, image/gif, image/bmp"
            multiple={false}
            &gt;
            &lt;div className="instructions"&gt;&lt;i className="fas fa-cloud-upload-alt fa-3x"  /&gt;&lt;p&gt;Cliquez ici ou glissez/déposez une image.&lt;/p&gt;&lt;/div&gt;     
          &lt;/Dropzone&gt;)}
          {touched &amp;&amp; ((error &amp;&amp; &lt;span&gt;{error}&lt;/span&gt;) || (warning &amp;&amp; &lt;span&gt;{warning}&lt;/span&gt;))}
        &lt;/div&gt;
      );
    };
  </code></pre>
  
  <p>Here the image preview code:</p>
  
  <pre><code>class ImagePreview extends Component {
  
      render() {
          const {handleRemoveImage, id, onChange, imagefile } = this.props
          if(imagefile.mediaObject) {
            imagefile.preview = `/uploads/media/${imagefile.mediaObject.filePath}`;
            imagefile.name = imagefile.mediaObject.name
          }
          const { preview, name} = imagefile;
          return (
            &lt;div className="render-preview"&gt;
              &lt;div className="image-container"&gt;
                &lt;div 
                  onClick={() =&gt; handleRemoveImage(onChange, id)}
                  className='delete'
                &gt;
                  &lt;FontAwesomeIcon icon={faTimesCircle} size='2x' /&gt;
                &lt;/div&gt;
                &lt;img src={preview} alt={name} /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          )
      }    
  }
  </code></pre>
  
  <p>Thank you very much !</p>
  
  <p>PS: Don't care about the "field.id", I just put an ID for each image.</p>