Photo coming from the camera is rotated

Question

    <input 
        onChange={this.mostra} 
        type="file" 
        accept="image/jpeg" 
        name="img" 
        id="perfilfoto"/>

Function called when I choose a photo before sending;

    mostra = ()=> {
    
            var doc = document.querySelector("#perfilfoto");
    
            let fread = new FileReader();
            fread.readAsDataURL(doc.files[0]);
    
            fread.onloadend = event => {
                this.setState({url: ""});
                this.setState({fat: event.target.result});
            }
        }

When I look for the image of the gallery other than the camera, can be a print or download, it is in the normal position, however, if it is the camera or if it is taken at the time of sending, it is rotated... Thank you in advance

Answer 1

EXIF 'Orientation Flag'

mostra = ()=> { 
let doc = document.querySelector("#perfilfoto")
let fread = new FileReader()

fread.onloadend = event => {
let photoExif = event.target.result

let dataURL =
`data:${ doc.files[0].type };base64,${ 
btoa( 
    photoExif.match(/Orientation>3/)? photoExif.replace(/Orientation>3/, 'Orientation>1')
  : photoExif.match(/Orientation>6/)? photoExif.replace(/Orientation>6/, 'Orientation>8')
  : photoExif
) }`;

this.setState({ url: '' })
this.setState({ fat: dataURL })
}

fread.readAsBinaryString( doc.files[0] )
}