[BUG] - Upload Image of Recipe Displays Wrong Orientation

[ChipSkylark37]

First Check

• This is not a feature request.
• I added a very descriptive title to this issue (title field is above this).
• I used the GitHub search to find a similar issue and didn't find it.
• I searched the Mealie documentation, with the integrated search.
• I already read the docs and didn't find an answer.
• This issue can be replicated on the demo site (https://demo.mealie.io/).

What is the issue you are experiencing?

When creating a new recipe and inserting and/or replacing the image of the recipe from the iPhone camera, the orientation is not correct, specifically when taking a picture in 'portrait mode' it then shows rotated 90 and not how I took the picture.

Steps to Reproduce

1. Create new recipe / Adjust existing recipe
2. Edit Recipe
3. Click 'Image'
4. Click 'Upload'
5. Click 'Take Photo or Video' (or Choose Existing Photo from Camera Roll)
6. Take photo in 'Portrait / 'Upright' mode
7. (wait for upload)
8. image shows rotated 90 degrees.

HOWEVER, I take the image in landscape / sideways mode, it does correctly show how I expect and how I saw the image in the 'viewfinder' when taking the image.

Part of the problem, is that if I choose a Photo I already took, I dont really know how I took it originally (Portrait / Landscape) so I only really find out after the image has been uploaded and set as the new recipe image.

Please provide relevant logs

If log files are required, please let me know.

Mealie Version

Recent Nightly: 2adbe5a

Deployment

Docker (Linux)

Additional Deployment Details

One addition detail here is that if I use the 'I made this" button and upload an image, that has features to rotate, crop, save, etc BEFORE saving it and uploading it which seems like the easiest way to solve this problem vs direct replace without confirmation.

Though its more a possible feature request: Would it make sense that that feature exists for uploading images to the recipe itself, not the "I made this" section.

[ChipSkylark37]

Any thoughts on this? I have tried changing the photo of a particular recipe a few times now and the photo always comes out sideways. I adjusted it in iOS to rotate but every time its uploaded it just goes sideways again.

[cwoodall21]

I also ran into this issue today. It happens when uploading a profile picture from iOS as well

[tommyalatalo]

Same thing here, photos taken with a phone camera end up in the wrong orientation sometimes, I'm guessing there is some issue or regression regarding image orientation metadata, because I don't remember this happening until recently.

[ChipSkylark37]

Added linked Discussion item that I believe is related:

#4780

[michael-genson]

The reason this happens has something to do with how portrait vs landscape is stored on photos; somehow that data gets lost when importing into Mealie.

The best solution would be to figure out why that happens and fix it, but at least in the meantime an easy solution is just to let the user edit the photo before saving it (or after saving it, I guess). We have a basic photo editor that allows you to crop/zoom/rotate: https://github.com/mealie-recipes/mealie/blob/mealie-next/frontend/components/Domain/Recipe/RecipeLastMade.vue#L75-L80

[ChipSkylark37]

Is this something that we could access now to fix the existing issue or will need someone to pull a PR and commit?

Admittedly I don't have much / any coding experience but I've been looking into how I may be able to learn to help out with things like this.

[michael-genson]

This would need a PR

[ChipSkylark37]

Though I am sure it's more involved / complicated than this, it seems like adding the related code from RecipeLastMade.vue that controls that, as you outlined:

              <v-row v-if="newTimelineEventImage && newTimelineEventImagePreviewUrl">
                <v-col cols="12" align-self="center">
                  <ImageCropper
                    :img="newTimelineEventImagePreviewUrl"
                    cropper-height="20vh"
                    cropper-width="100%"
                    @save="updateUploadedImage"
                  />
                </v-col>
              </v-row>

and adding that into RecipeImageUploadBtn.vue and updating the references to pull from the 'updateUploadedImage' instead of the 'uploadImage', as well as importing the function / const.

When I get some time, I may start playing around with some coding on this since I want to learn anyway after reading some of the documentation.

[michael-genson]

Yup, that's pretty much it!

[ChipSkylark37]

Is there a way to make those changes in my dev mealie instance without forking / pulling from github each time? Since initially I would just be playing around (and likely breaking things in the process). I haven't exposed the docker volume yet but was curious if was just these files in a flat folder structure that I could change to play around with.

To me that would be easier to make changes local on my docker than pulling from GitHub.

[ConduciveMocha]

Hey. I saw this issue this morning and missed the conversation here. Didn't mean to step on your toes, @ChipSkylark37 but didnt see the discussion until I was preparing to make a PR.

This draft should address the issue. The TLDR is that the orientation of the image is stored in the exif metadata of the file. When viewing the file on your phone, the image library app sees the orientation and automatically applies a transformation to the image so it appears correctly. For some reason (not sure why), PIL default to removing all exif metadata, including the orientation when you apply any transformation to the file. This leaves a photo that is rotated or mirrored, lacking the information to restore the original orientation. The code in the PR applies the correct transformation, fixing any flips or rotations, before saving the original.webp file.

This is probably not the only way to solve the issue, but is the way I solved it when I ran into the same issue in the past

[ChipSkylark37]

Oh not stepping on my toes at all! I was more brainstorming ideas and trying to solidify my own understanding of it more than anything else.

Fixing the root issue of stripping the metadata is great, and hoping that the "editor" could also be implemented in some fashion.

It's awesome to see an active community! I'm on the nightly pull so if there's anything I can help to test, let me know.