exif-orientation

[darrenlma]

I am trying to upload an avatar to firebase - much the same as your readme example but with a maxHeight and maxWidth prop being passed. However, any time I upload an image of Portrait Orientation (specifically, images taken on Android and IOS devices the orientation is removed from the metadata) the image is rotated 90 degrees.

I have read about this previously and I believe that these smart phone images taken are always in Landscape but the orientation is stored EXIF meta and not passed into the file input. Please correct me if I am mistaken?

Below is an example of a component that I am using - I know it is not an issue with this package and the solution to this question is likely applicable across many applications but I was wondering if you had an example of fixing this, either as a single prop or passing into the metadata prop.

class ProfilePage extends Component {
  state = {
    avatar: "",
    isUploading: false,
    progress: 0,
    avatarURL: ""
  };

  handleProgress = progress => this.setState({ progress });
  handleUploadError = error => {
    this.setState({ isUploading: false });
    console.error(error);
  };
  handleUploadSuccess = filename => {
    this.setState({ avatar: filename, progress: 100, isUploading: false });
    firebase
      .storage()
      .ref("images")
      .child(filename)
      .getDownloadURL()
      .then(url => this.setState({ avatarURL: url }));
  };

  render() {
    return (
      <div>
        <form>
          {this.state.isUploading && <p>Progress: {this.state.progress}</p>}
          {this.state.avatarURL && <img src={this.state.avatarURL} />}
          <FileUploader
            accept="image/*"
            name="avatar"
            maxHeight="91"
           maxWidth="90"
            randomizeFilename
            storageRef={firebase.storage().ref("images")}
            onUploadStart={this.handleUploadStart}
            onUploadError={this.handleUploadError}
            onUploadSuccess={this.handleUploadSuccess}
            onProgress={this.handleProgress}
          />
        </form>
      </div>
    );
  }
}

export default ProfilePage;

[sprmn]

Hi @discovrbookings, thanks for your detailed question. It seems to be a common problem with my crappy image resize code. The PR here seems to fix this problem. Does that branch perhaps work for you?

I will try to fix this.

[hudsonof]

Have you found a solution to this problem?