Take and upload mixed-reality photos in Power Apps
You can add a control to take photos of the mixed-reality (MR) experience in your apps that use the following controls:
This topic will guide you through creating a test app that you can use to take and upload photos from within an MR session, including:
- Inserting a View in 3D control with the default sample 3D object included so you can see and manipulate a 3D object.
- Connecting the View in 3D control to a View in MR control button so you can view the 3D object in MR.
- Testing the controls using an MR-capable device.
- Inserting a gallery to view recorded photos taken from the View in MR control on the MR-capable device.
- Uploading photos to OneDrive with a Power Automate flow.
Prerequisites
- Create a blank canvas app.
- Create a OneDrive folder called MRPhotos to store your photos when testing the upload feature.
Tip
- The MR controls work best in well-lit environments with flat-textured surfaces. When establishing tracking, point the device at the surface you would like to track and slowly pan the device from right to left in broad arm motions. If tracking fails, exit and enter the MR view to reset the tracking and try again.
- LIDAR-enabled devices will also result in better tracking.
Insert and connect a 3D object to the View in MR control and test your app
With an app open for editing in Power Apps Studio, you can insert and connect the View in 3D and View in MR controls. Using these controls lets you overlay a sample 3D object (which looks like a box's frame) into the real world using your device's camera.
Open the Insert tab.
Expand Media.
Select the control View in 3D to place it in the center of the app screen, or drag it to position it anywhere on the screen.
A default shape is included in the control. You can change this shape to another by altering the Source property. For more information, see how to define where the 3D content is stored. In this example, we'll use the URL https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/robot_arm.glb.
Open the Insert tab.
Expand Mixed reality.
Select the control View in MR to place it in the app screen, or drag it to position it anywhere on the screen.
In the Properties panel for the View in MR control, on the Advanced tab, select the Source field and enter
ViewIn3D1.Sourceto set the source object as the 3D object you inserted with the View in 3D control.You can also use the expression editor at the top of the window: type
ViewIn3D1.Source.
Save (and, if necessary, publish) the app and load it on your mobile device to test that you can view the 3D object in MR by selecting the View in MR button.
Insert a gallery to view photos taken in the app
You can now insert a gallery control into your app. The gallery control lets users of the app take and view photos from within the app.
Photos you take by selecting the camera icon in the MR view on the app will be loaded into the gallery control on the app. If you exit the MR view to see the gallery, reentering the MR view and taking more photos will overwrite the photos.
Open the Insert tab.
Select the Vertical gallery control to place it in the center of the app screen, or drag it to position it anywhere on the screen.
In the Properties panel for the gallery control, on the Advanced tab, set the Items property to equal
ViewInMR1.Photos.You can also use the expression editor at the top of the window.

Hold the
Altkey and select View in MR to generate sample photos and data. You should now see the gallery populate with a sample picture.
Tip
You can load all photos taken across multiple MR controls by adding
Collect(AllPhotos,ViewInMR1.Photos)to the OnChange property of each MR control.
You can insert a "pop-up" overlay of the selected image so users of the app can see the photo full size.
Open the Insert tab.
Expand Media and select the Image control to place it in the app screen. Drag and position it so it covers the entire screen (or however much of the screen you want the image to cover when selected from the gallery).

Go to the Advanced tab of the Properties pane:
- Change the OnSelect property to
UpdateContext({vVisibleImageZoom:false}). - Change the Image property to
Gallery1.Selected.Image1(or whatever the first image in the gallery control is labeled). - Change the Visible property to
vVisibleImageZoom.
- Change the OnSelect property to
Select the first image in the gallery control.
Go to the Advanced tab of the Properties pane and change the OnSelect property to
UpdateContext({vVisibleImageZoom:true}).
Tap the View in MR button to open MR view.
Tap the screenshot icon at the bottom of the screen, then tap the back arrow at the top of the screen.
You should see the screenshot now showing underneath the View in MR button. Tap the screenshot's thumbnail, and a large version of the screenshot will appear. Tap anywhere on the image to hide it.
Upload photos to Sharepoint with a Power Automate flow
Go to the Action tab and select Power Automate, followed by Create a new flow. This option opens Power Automate in a new browser tab. You might need to sign in at the top.

Choose the template for a PowerApps button.

To make it easier to find later, rename the flow by selecting PowerApps button at the top and entering a new name of "Upload MR Photo".

Select ... (ellipsis) next to the Power Apps trigger, select Delete, and then select OK.
In the search box type in "PowerApps (V2)" and then select the "PowerApps (V2)" trigger.
Select Add an input, select File type, and then change the name from "File Content" to "Image".
Select + New step. Search for Sharepoint Create file and select the Create file action that appears in the results.
Fill in the following information:
- For Site Address, select the Sharepoint site that you want the photo's uploaded to.
- For Folder Path, select the folder button to browse the sharepoint site, and select a folder.
- For File Name, copy and paste this value: @{triggerBody()?['file']?['name']}
- For File Content, copy and paste this value: @{triggerBody()['file']['contentBytes']}
The complete flow should now look like this:
Save the flow and return to the browser tab that has your canvas app open. You'll see your flow now shows up in the Data pane.

Open the Insert tab and select Button.
Change the Text property of the button to
Upload photos, and set the font size to 16. Move the button to a free area on the app screen and change its size so the button label fits inside it properly.In the expression editor at the top of the Power Apps window, select the OnSelect property, and then select the Action tab. Select Power Automate, and then select the flow you created.

The OnSelect method will be populated with
UploadMRPhoto.Run(. Insert the following code to upload the last photo taken to the MRPhotos folder on OneDrive:UploadMRPhoto.Run({file:{name:GUID() & ".png", contentBytes:Last(ViewInMR1.Photos).ImageURI}})
If you're inside a gallery of the MR photos, instead use the following formula:
UploadMRPhoto.Run({file: {name:GUID() & ".png", contentBytes:ThisItem.ImageURI}})If you want to create a button that uploads all of the photos taken in the MR session, use this formula:
ForAll(ViewInMR1.Photos, UploadMRPhoto.Run({file:{name:GUID() & ".png", contentBytes:ImageURI}}))You can test the new button in the studio by pressing the Play button at the top of the studio and then press the View in MR button followed by your button to upload the photo. The sample photo should be uploaded to your sharepoint site.
Use SaveData and LoadData functions
You can use the SaveData and LoadData functions In Power Apps with the MR controls.
See the SaveData, LoadData, and ClearData functions in Power Apps topic for how to use these functions.