Power Apps – Rotate and Flip Images

Do you need your user to rotate or flip images when they upload from the app? Follow the blueprint below to create a simple upload picture tool with rotate and flip functionalities.

Step 1:

Insert an ‘Add Picture’ control. This will be named AddMediaWithImage1 by default.

Step 2:

From the tree view, expand AddMediaWithImage1 then select UploadedImage1. Change the following properties:

Height

300

Width

300

Step 3:

From the tree view, select AddMediaButton1. Change the following properties:

Fill

RGBA(153, 207, 236, 1)

Height

54

Text

"Add picture"

Width

UploadedImage1.Width

X

UploadedImage1.X

Y

UploadedImage1.Y+UploadedImage1.Height

Step 4:

Insert an icon (Reload) and name it Icon1. Change the following properties:

Icon

Icon.Reload

OnSelect

UpdateContext(
    {
        varRotation: Switch(
            UploadedImage1.ImageRotation,
            ImageRotation.None,
            ImageRotation.Rotate90,
            ImageRotation.Rotate90,
            ImageRotation.Rotate180,
            ImageRotation.Rotate180,
            ImageRotation.Rotate270,
            ImageRotation.Rotate270,
            ImageRotation.None,
            ImageRotation.Rotate90
        )
    }
);

Step 5:

Insert an icon (Sort) and name it Icon2. Change the following properties:

Icon

Icon.Sort

OnSelect

UpdateContext({varFlipHorizontal:!varFlipHorizontal})

Rotation

90

Step 6:

From the tree view, select UploadedImage1 again. Change the following properties:

FlipHorizontal

varFlipHorizontal

ImageRotation

varRotation

Note: If you are wondering why we did not do this in Step 2, it’s because the variables varFlipHorizontal and varRotation were not yet created, so it will show an error if we do this before Steps 4 and 5.

To test, run play mode and upload an image by clicking the “Add Picture” button. When the image is uploaded, try clicking the icons. You will notice the image either rotates or flips horizontally.

If you want to retain this position even when refreshing the app, you should save the rotation and horizontal flip setting in a datasource like SharePoint or Dataverse.