Capture and Store Images in SharePoint from Power Apps: Step-by-Step

Many Power Apps request a way to let users attach a photo — either captured live with a mobile camera or selected from a device folder. The built-in Add picture control handles both cases smoothly and delivers a better user experience than the older Camera control. When paired with a Power Automate flow, you can save those images directly to a SharePoint document library along with custom metadata.

In this walkthrough we'll build a lightweight asset photo log app. A warehouse employee can snap a picture of a new item, add a brief description, and upload it to a SharePoint library. The same app displays all stored images in a thumbnail gallery and lets anyone view existing records.

Scenario and SharePoint Setup

We'll use a SharePoint document library called AssetPhotos to store the uploaded pictures. Add a single text column named Description to capture a short label for each image.

The library should already contain a few test images with descriptions so we have data to show in the gallery. Thumbnails will be generated automatically for common image formats (JPEG, PNG, etc.).

App Structure

The app uses two screens:

• BrowseScreen – shows a grid of existing photos from the library.
• DetailScreen – displays a full‑sized image, allows editing or entering a description, and triggers the upload (or deletes a record).

Creating the Thumbnail Gallery

1. In Power Apps, start a blank app. Rename the default screen to BrowseScreen.
2. Add a label at the top with the text "Asset Photo Log".
3. Insert a blank Vertical gallery and set its Items property to the AssetPhotos SharePoint library.

'AssetPhotos'

1. Set the gallery's WrapCount to 3 to display images in a grid. Adjust TemplateFill to a neutral color (e.g., RGBA(237, 237, 237, 1)).
2. Inside the gallery, place an Image control. Set its Image property to ThisItem.Thumbnail.Medium or Large. The thumbnail will automatically scale to fit.

ThisItem.Thumbnail.Large

1. On the gallery's OnSelect action, store the selected item's thumbnail and record, then navigate to the detail screen.

Set(varImage, ThisItem.Thumbnail.Large);
Set(varRecord, ThisItem);
Navigate(DetailScreen, Fade)

Capturing a New Photo

The Add picture control can launch the device camera (on mobile) or open the file picker (on desktop). We'll place it over a camera icon so the icon is visible and the control itself is invisible.

1. On BrowseScreen, insert a Photo icon (or a camera icon) at the top right.
2. Insert an Add picture control directly on top of the icon. Ungroup the control (right‑click if needed) and move the automatically added image control out of the way (it will not be used).
3. Make the Add picture control fully transparent by setting these properties:

Color: Transparent
HoverColor: Transparent
PressedColor: Transparent
Fill: Transparent
HoverFill: Transparent
PressedFill: Transparent

1. In the OnChange property of the Add picture control, store the captured image and go to the next screen.

Set(varImage, img_AddButton.Image);
Set(varRecord, Blank());
Navigate(DetailScreen, Fade)

The img_AddButton is the name of the Add picture control. Its Image property holds the most recent photo taken or selected.

Reviewing and Describing the Image

On DetailScreen:

• Use an Image control to display the photo. Set its Image property to varImage.
• Add a Text Input control for the description. Use these properties:

HintText: If(IsBlank(varRecord), "Enter asset description", "[No description]")
Default: varRecord.Description
DisplayMode: If(IsBlank(varRecord), DisplayMode.Edit, DisplayMode.View)

• Add two icons in a footer: a Check icon for upload and a Trash icon for cancel/delete.

Uploading to SharePoint with Power Automate

Because Power Apps cannot write directly to SharePoint document libraries, we need a flow to accept the image data and create a file.

Build the Flow

1. Go to Power Automate and create an Instant cloud flow with the trigger Power Apps (V2).
2. Add two inputs to the trigger:
   • imageData (type File)
   • description (type Text)
3. Add a Create file action for your SharePoint site and library AssetPhotos. Set the File Content to imageData from the trigger. Set File Name to a unique string, for example concatenate the description and the current timestamp:

concat(triggerBody()['imageData']['name'], '_', formatDateTime(utcNow(), 'yyyyMMddhhmmss'), '.jpg')

1. To store the description as metadata, add an Update file properties action after the file creation. Set the Id to the file ID from the previous action and the Description to the description input.

Call the Flow from Power Apps

Back in Power Apps, on the Check icon's OnSelect property, run the flow and then return to the gallery.

AssetPhotos_UploadAsset.Run(
  {
      contentBytes: img_DetailScreen.Image,
      name: Text(Now(), "yyMMddhhmmss")
  },
  txtDescription.Text
);
Navigate(BrowseScreen, Fade)

Note: The img_DetailScreen.Image property provides the image as a base64-encoded string. Power Apps automatically converts this to the binary file content expected by the flow trigger. If you encounter upload errors, verify that the flow input types match exactly.

Deleting or Cancelling

For the Trash icon set:

Navigate(BrowseScreen, Fade)

Make it visible only when not viewing an existing record:

IsBlank(varRecord)

For viewing existing records, add a Cancel icon (or back arrow) on the detail screen that also navigates back to the gallery.

Security, Performance, and Delegation Notes

• Thumbnails: Using ThisItem.Thumbnail.Large in galleries avoids downloading full images and keeps the gallery fast. Thumbnails are stored in SharePoint automatically for image files.
• Connectors: The flow must be granted permission to the SharePoint site (typically via the creator's account). Test with appropriate data sources.
• Delegation: The gallery's Items property references an entire SharePoint library. For large libraries, apply filtering or delegate queries to avoid hitting the 2000‑item row limit. For example, use Filter('AssetPhotos', StartsWith(Title, SearchText)) with a search input.
• File size: The Add picture control currently compresses the photo when the device camera is used. For very high‑resolution images, performance may degrade during the base64 conversion. Consider adding a step in Power Automate to compress the image if needed.

Common Mistakes and Troubleshooting

• Flow not executing: Ensure the flow is saved, turned on, and the Power Apps connector is correctly listed in the app's actions.
• Image not showing in gallery after upload: Refresh the gallery data source (Refresh('AssetPhotos')) after navigating back.
• Missing thumbnails: If the uploaded file is a format that SharePoint doesn't thumbnail (e.g., SVG), the gallery will show a blank placeholder. Stick with JPEG/PNG for full support.
• Flow input mismatch: If the flow expects a File type but the property passed is a string (like Image), the upload may fail silently. Double‑check the trigger input names and types.
• Metadata not saved: The Update file properties action requires the file id; use the output of Create file to retrieve it.

Final Recommendation

The Add picture control gives you both camera and file picker in one widget, making it ideal for photo capture in Power Apps. By combining it with a Power Automate flow, you can store images in SharePoint and add custom metadata. This pattern is reusable for any use case — employee badges, inspection photos, expense receipts, etc.

Always test on target devices (mobile vs. desktop) because the control behaves slightly differently on each platform (camera available on mobile, file picker on desktop). And remember to check the flow history for any failed runs.

References

• Original article that inspired this walkthrough: Power Apps Add Picture Control And Save To SharePoint Library by Matthew Devaney
• Microsoft Learn: Add picture control in Power Apps
• Microsoft Learn: Create a flow for Power Apps