We have a B2B marketplace platform developed in React. Users can submit vehicles for sale.
We have a problem with portrait photos taken from IOS. Actually when user take a photo from his gallery or directly, we show the photo in the form like in the following screenshot.
So it is properly shown just after selecting / taking the portrait photo.
But once it gets uploaded and saved, if we come back on the form, the portrait photo flipped to landscape and got saved as flipped, like shown in the next screenshot.
We don't do any photo processing so I guess it comes from IOS at some point. It works like a charm on laptop and android devices.
Do you guys have any idea about this problem ? Did you already encounter / resolve it ?
I did not find pertinent information about this problem on the web, any input will be really appreciated.
Could I force IOS to work only in Landscape mode from the website somehow ?
After more investigations. It appears the problem comes from the EXIF data as well explained here https://stackoverflow.com/a/63877633/5535520
However it did not help us to find out how to resolve the issue.
In fact, we are using in our API sharp package to actually make thumbnails and convert image into webp (so actually we do photo processing, my bad).
Sharp is providing withMetadata() method to keep EXIF data but it is not sufficient in our case.
However, using rotate() method from sharp will rotate the photo on EXIF data basis as explained in the sharp documentation : https://sharp.pixelplumbing.com/api-operation#rotate
And now it works perfectly.
