Profil Image sometimes turned by 90 degrees (Iphones)

[wortkotze]

We encounter some issues that the profil picture is uploaded with 90 degree turn. We checked the EXIF Information of the uploaded pictures but it doesn't show anything that u need to turn the image ...

any idea?

[wortkotze]

We fixed the issue with the following fix for ImageCropper Component

`import 'firebase/storage' import Button from '@material-ui/core/Button' import CircularProgress from '@material-ui/core/CircularProgress' import Dialog from '@material-ui/core/Dialog' import DialogActions from '@material-ui/core/DialogActions' import DialogContent from '@material-ui/core/DialogContent' import DialogTitle from '@material-ui/core/DialogTitle' import LinearProgress from '@material-ui/core/LinearProgress' import PropTypes from 'prop-types' import React, { Component } from 'react' import firebase from 'firebase/app' import withMobileDialog from '@material-ui/core/withMobileDialog' import { connect } from 'react-redux' import { injectIntl, intlShape } from 'react-intl' import { withFirebase } from 'firekit-provider' import AvatarEditor from 'react-avatar-editor' import classNames from 'classnames' import { withStyles } from '@material-ui/core/styles'

var EXIF = require('exif-js')

const styles = theme => ({ ctaInput: { opacity: 0 }, ctaMainBlack: { background: '#000', border: '1px solid #000', borderRadius: '0px', textTransform: 'none', color: '#FFF', height: '50px', padding: '0 30px', fontFamily: 'AudiType, sans-serif', width: '100%', boxShadow: '0px 0px 0px 0px', marginTop: '10px',

'&:active': {
  background: '#000'
},

'&:hover': {
  background: '#000'
}

},

ctaMainWhite: { background: '#FFF', border: '1px solid #000', borderRadius: '0px', textTransform: 'none', color: '#000', height: '50px', padding: '0 30px', fontFamily: 'AudiType, sans-serif', boxShadow: '0px 0px 0px 0px', width: '100%',

'&:active': {
  background: '#000'
},

'&:hover': {
  background: '#FFF'
}

},

container: { display: 'flex', alignItems: 'stretch', justifyContent: 'center', flexDirection: 'row', background: '#fff' }, dialog: { width: '100%', maxWidth: 'none', background: '#fff' }, cropper: { height: 250, width: 250, background: '#fff' }, flexparent: { display: 'flex', flexDirection: 'column', flexWrap: 'nowrap', justifyContent: 'space-between', width: '100%' },

flexchild: {} })

export class ImageCropDialog extends Component { constructor(props) { super(props) this.state = { src: undefined, isLoading: false, isUploading: false, uploadProgress: 0, rotate: 0 } }

handlePhotoURLUpload = photo_url => { const { classes, path, fileName, onUploadSuccess, firebaseApp } = this.props

this.setState({ isUploading: true, uploadProgress: 0 })

let uploadTask = firebaseApp
  .storage()
  .ref(`${path}/${fileName}`)
  .putString(photo_url, 'data_url')

uploadTask.on(
  firebase.storage.TaskEvent.STATE_CHANGED,
  snapshot => {
    let progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100
    this.setState({ isUploading: true, uploadProgress: progress })
  },
  error => {
    console.log(error)
  },
  () => {
    this.setState({ isUploading: false, uploadProgress: 100 }, () => {
      onUploadSuccess(uploadTask.snapshot)
    })
  }
)

}

handlePhotoULRChange = e => { e.preventDefault()

this.setState({ isLoading: true })

let files
if (e.dataTransfer) {
  files = e.dataTransfer.files
} else if (e.target) {
  files = e.target.files
}
const reader = new FileReader()
reader.onload = () => {
  this.setState({ src: reader.result, isLoading: false, file: files[0] })
}
reader.readAsDataURL(files[0])
var that = this
EXIF.getData(e.target.files[0], function() {
  var make = EXIF.getTag(this, 'Make')
  var model = EXIF.getTag(this, 'Model')
  var orientation = EXIF.getTag(this, 'Orientation')
  let rotatePic = 0
  switch (orientation) {
  case 8:
    rotatePic = 270
    break
  case 6:
    rotatePic = 90
    break
  case 3:
    rotatePic = 180
    break
  default:
    rotatePic = 0
  }
  that.setState({ rotate: rotatePic })
})

}

handleClose = () => { const { handleClose } = this.props this.setState({ src: undefined }) handleClose() }

setEditorRef = editor => (this.editor = editor)

render() { const { intl, open, title, fullScreen, classes } = this.props

const actions = [
  <Button
    disabled={
      !this.state.src || this.state.isLoading || this.state.isUploading
    }
    label={intl.formatMessage({ id: 'submit' })}
    primary={true}
    onClick={() => {
      this.handlePhotoURLUpload(this.editor.getImage().toDataURL())
    }}
  />,
  <Button
    label={intl.formatMessage({ id: 'cancel' })}
    secondary={true}
    onClick={this.handleClose}
  />
]

return (
  <Dialog
    fullScreen={fullScreen}
    open={open}
    onClose={this.handleClose}
    aria-labelledby="responsive-dialog-title"
    className={styles.dialog}>
    <DialogTitle id="responsive-dialog-title">{title}</DialogTitle>

    <DialogContent>
      <div style={styles.container}>
        <div style={styles.cropper}>
          {(!this.state.src || this.state.isLoading) && (
            <div>
              <Button color="primary" className={classes.ctaMainBlack}>
                Upload Image
              </Button>
              <input
                ref={field => {
                  if (field !== null) {
                    field.click()
                  }
                }}
                type="file"
                accept="image/*"
                //style={{visibility:'hidden'}}
                onChange={this.handlePhotoULRChange}
                className={classes.ctaInput}
              />
            </div>
          )}

          {this.state.isLoading && (
            <CircularProgress size={80} thickness={5} />
          )}

          {this.state.isUploading && (
            <LinearProgress
              mode="determinate"
              value={this.state.uploadProgress}
            />
          )}

          {this.state.src && (
            <center>
              <AvatarEditor
                ref={this.setEditorRef}
                image={this.state ? this.state.src : undefined}
                width={200}
                height={200}
                border={25}
                color={[255, 255, 255, 0.6]}
                scale={1.0}
                rotate={this.state.rotate}
              />
            </center>
          )}
        </div>
      </div>
    </DialogContent>
    <DialogActions>
      <div className={classes.flexparent}>
        <div className={classes.flexchild}>
          <Button
            color="primary"
            onClick={this.handleClose}
            className={classes.ctaMainWhite}>
            {intl.formatMessage({ id: 'cancel' })}
          </Button>
        </div>

        <div className={classes.flexchild}>
          <Button
            color="primary"
            autoFocus
            onClick={() =>
              this.handlePhotoURLUpload(this.editor.getImage().toDataURL())
            }
            className={classes.ctaMainBlack}>
            {intl.formatMessage({ id: 'submit' })}
          </Button>
        </div>
      </div>
    </DialogActions>
  </Dialog>
)

} }

ImageCropDialog.propTypes = { intl: intlShape.isRequired, open: PropTypes.bool.isRequired, title: PropTypes.string, path: PropTypes.string.isRequired, fileName: PropTypes.string.isRequired, onUploadSuccess: PropTypes.func.isRequired, handleClose: PropTypes.func.isRequired }

const mapStateToProps = state => { const { auth } = state return { auth } }

export default connect( mapStateToProps, {} )( injectIntl( withStyles(styles)(withFirebase(withMobileDialog()(ImageCropDialog))) ) ) `

[TarikHuber]

Can you send a PR?