Jean1
March 19, 2021, 12:42pm
1
[details=“System Information”]
Strapi Version : 3.3.4
Operating System :
Database : mongo
Node Version : 12.16.1
NPM Version :
Yarn Version : 1.19.1
Hi There,
When I upload a photo with the back office Strapi, sometimes the image rotate after upload
Original image :
Image after upload :
I read things about this subject in the strapi github :
opened 05:04PM - 30 Jun 20 UTC
closed 01:37PM - 31 Aug 20 UTC
type: bug
severity: low
good first issue
source: plugin:upload
**Describe the bug**
When uploading images, with the "Enable size optimizatio… n" enabled, the EXIF data is being removed. The consequence for us, is that the rotation flag is missing, and we do not have anyway to know in which rotation the image should be displayed.
**Steps to reproduce the behavior**
1. With the "Enable size optimization" enabled in `/admin/settings/media-library`.
2. Upload an image taken in portrait-mode.
3. Open the image from `/admin/plugins/upload`.
Now you'll see that the image is tilted 90 degrees.
1. Now with the "Enable size optimization" disabled in `/admin/settings/media-library`.
2. Upload an image taken in portrait-mode.
3. Open the image from `/admin/plugins/upload`.
Now you'll see that the image is upright, as expected.
**Expected behavior**
Image should "keep" it's meta-date. Sharp library has a feature for doing that called `withMetadata`.
**Screenshots**

**System**
- Node.js version: v12.16.3
- NPM version: 6.14.4
- Strapi version: 3.0.2
- Database: Postgres
- Operating system: Ubuntu/OSx
opened 08:10PM - 28 Apr 20 UTC
closed 04:40AM - 24 Jul 20 UTC
type: feature request
severity: low
**Describe the bug (feature)**
In Strapi of version beta.20 there is a new poss… ibility - creation of thumbnails of images. This is very useful and convenient feature. Thank you. In previous versions I had to do it by my own with help of [sharp](https://www.npmjs.com/package/sharp) package: I could resize and rotate an image according to EXIF orientation tag.
New upload plugin does not automatically rotate images, so photos from iphone with "portrait" orientation (orientation tag 6) appears with wrong rotation.
So I want to ask:
1. Is there any way to "hook" upload process to rotate an image (or do some other manipulations)?
2. Is there any way to choose necessary formats? For example, I need thumbnail and medium size, but I don't need large size, sometimes I don't even need original file.
**Steps to reproduce the behavior**
1. Upload any image with EXIF orientation tag equaled 6 (photo from iphone with "portrait" orientation).
2. Go to "Media Library".
3. Ensure the image has improper rotation.
**Expected behavior**
I would like images to be properly rotated.
**Screenshots**
In Finder:

In Media Library (the building "fell down"):

**Code snippets**
My implementation of auto rotation:
```javascript
// sharp automatically rotates image according to orientation tag
const thumbnailBuffer = await sharp(file.path)
.resize(300)
.rotate()
.toBuffer();
```
**System**
- Node.js version: 13.13.0
- NPM version: 6.14.4
- Strapi version: 3.0.0-beta.20.1
- Database: PostgreSQL 12.2
- Operating system: MacOS Catalina 10.15.4
It is because of the EXIF in the photo not managed when uploading.
I can use this option on the media lib in the Strapi BO to use EXIF param to manage the rotation of the image :
Why the option (auto orientation) is disabled by default ?
If I activate the option, can there be side effects ?
Thanks you in advance
alxnkt
March 29, 2021, 7:03pm
2
Hello!
This option is disabled by default because this feature have been added when Media Library already existed. So it could break usual functionality. In theory this option shouldn’t have side effects. But some software can produce images with wrong rotation tag. As I tested original pictures produced by modern iOS or Android devices, I had no problems.
whriss
June 22, 2021, 5:55am
3
I have also faced this problem in the past. At that time, I remember that I use to flipped images to upload on strapi.
I flip those images on google docs.
So you can also use that same method until the problem is not solved. The below link has tutorial to rotate an image.