0

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.

Here the image form code :

export const ImageDropZone = ({ input, fetching, handleOnDrop, isImageUploading, handleRemoveImage, imagefile, libelle, meta: { touched, error, warning }, ...field}) => {
    if(fetching || isImageUploading){
      return(
        <div id="post-single-page">
            <Spinner/>
        </div>
      )
    }
    return (
      <div className={classnames("form-group", { "has-error": touched && ((error || warning)) })}>
      {imagefile 
                ? (<ImagePreview className="dropzone undashed" onChange={input.onChange} imagefile={imagefile} id={field.id} handleRemoveImage={handleRemoveImage} />) 
                :
        (<Dropzone
          name={input.name}
          className="dropzone"
          onChange={file => input.onChange(file)}
          onDrop={file => handleOnDrop(file, input.onChange, field.id)}
          accept="image/jpeg, image/png, image/gif, image/bmp"
          multiple={false}
          >
          <div className="instructions"><i className="fas fa-cloud-upload-alt fa-3x"  /><p>Cliquez ici ou glissez/déposez une image.</p></div>     
        </Dropzone>)}
        {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
      </div>
    );
  };

Here the image preview 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 (
          <div className="render-preview">
            <div className="image-container">
              <div 
                onClick={() => handleRemoveImage(onChange, id)}
                className='delete'
              >
                <FontAwesomeIcon icon={faTimesCircle} size='2x' />
              </div>
              <img src={preview} alt={name} />
            </div>
          </div>
        )
    }    
}

Thank you very much !

PS: Don't care about the "field.id", I just put an ID for each image.

Dipak Telangre
  • 1,792
  • 4
  • 19
  • 46
Julien MILINKOVITCH
  • 36
  • 1
  • 6
  • I don't think the rotation issue has anything to do with your React app. [check this out](https://www.howtogeek.com/254830/why-your-photos-dont-always-appear-correctly-rotated/) – TKoL Nov 25 '19 at 09:53
  • Your resource was really helpful, thank you so much !! – Julien MILINKOVITCH Nov 25 '19 at 21:21

1 Answers1

3

I had the same problem with image upload on mobile devices. This is not a problem with React but with orientation of the image. You need to process the image after upload and change the orientation. I used exif-js and this stackoverflow answer was really helpful.

gergana
  • 681
  • 6
  • 11