Everything About The Power Apps Camera And Add Picture Controls

The capability to take a photo within a Power App is easy to get up and running. However the relative merits of the Camera control versus the Add Picture control can be hard to weigh up as there are so many facets to consider. Not only that, they create images in different formats which impacts how they can be saved to data sources

In the article, I’ve summarised what I’ve learned from my recent experiences of using the Power Apps Camera and Add Picture controls and brought everything together in a single reference

Camera Control

The Power Apps Camera control is simple and intuitive to use. For many makers who are new to Power Apps, it’s a really pleasant experience finding out how easy it is to add the capability to take a photo within an app

There are downsides to the using the Camera control though. First and foremost it restricts the size of the image to 480×640 pixels. The size of the control in the screen can be increased (or decreased) but this won’t affect the size of the image it produces. This small size makes the image easy to transfer over a network as the file size is only around 50kb, but the major downside is that by today’s standards, the image quality is very poor. Except for the most basic of image requirements, it isn’t a workable option. This is particularly the case where photos are required in a business context, for example where photographic evidence is required to confirm that a repair had been successfully completed

Another downside of the Camera control is that many of the options that we have come to expect when using a camera on a smartphone, such as use of the flash or zoom features, just aren’t available to us

If a device has multiple cameras, by default, the Power Apps Camera control, doesn’t allow a user to select a particular camera, it just makes use of the primary camera on the back of the device. However, if you want users to be able to choose which camera to use, a neat workaround is to set the Items property of a dropdown box to:

Camera.AvailableDevices

This will automatically detect the different cameras attached to the device and allow the user to select the one they want to use from the dropdown box

Then set the Camera property of the Camera control to:

Dropdown.Selected.Id

The Camera control will then use the camera the user has selected in the dropdown box

Camera Control Image Format

The Camera control takes pictures that are created in Data URL format. Data URLs are made up of a large string of ASCII text characters that start with ‘data’ – see the truncated example below:

“data:image/svg+xml;base64,F5wGyT34647Stsgg344sFsgds43434sfsfsff3Rsst55tEY……….”

The actual number of characters in a Data URI image can be as large a several hundred thousand!

Data URLs allow content to be embed in documents as pure text and were formerly known as “data URIs”. Data URLs are frequently referred to as Base64 in the Power Platform documentation

Displaying an image taken using a Camera control is done in an Image control, where the Data URL is displayed as an image. Because the format of a Data URL is simply made up of ASCII text, interestingly it could be displayed in a label where the text characters themselves are displayed rather than the actual image

Data URL images load quickly and I have found them to infallibly load in a Power Apps screen where very occasionally JPEGs don’t. However, the overall file size is generally around a third larger than the equivalent JPEG

Add Picture Control

The Add Picture control has much greater functionality than the Camera control and taps into all the inherent settings of the device’s camera capability such as the flash, timer and many other settings

Additionally, instead of just taking photos using the device’s camera, as an alternative, existing photos can be attached too. The photos can be sourced from the device’s photo gallery or from other cloud locations that the device can access such as OneDrive

The capability to attach photos is set by the UseMobileCamera setting of the AddMediaButton control within the Add Picture control. If this is set to false, which it is by default, then the Add Picture control can be used either to take a photo or add an existing photo. If the UseMobileCamera property is set to true, then the Add Picture control can only be used to take a photo and an existing image cannot be added

At the time of writing, my experience is that setting this property to ‘true’ only takes effect on IOS devices. Users of Android devices will still be able to add an existing image whatever the setting of UseMobileCamera. This can be problematic, for example if you wanted to mandate that users take a photo while on site, and not allow them to upload an existing gallery photo instead

If users will be running your app in a browser on a PC or laptop, then be aware that the Add Picture control is not an option. Yes, users will be able to add an image from file (if you allow them to), but they won’t be able to use the PC or laptop camera. This is also true if the app is loaded using the Power Apps desktop app. If you want the app to use the PC or laptop’s camera then the only option is the Camera control and not the Add Image control

Add Picture Control Image Format

The Add Media control creates images in JPEG format, which in Power Platform parlance is usually referred to as a ‘binary’ format

The files size depends on both the device and image being taken. Typically the file size for photos taken using the Add Image control has been around 500k for both IOS and Android devices. Recently though, I’ve noticed on Android phones that has jumped in size and can now be as large as 2-2.5mb

Optimise an Image for Upload

By default, all images from the Camera control or the Add Image control are optimised for upload. This essentially means that the dimensions, and hence also the definition of the image, is reduced

There is a user amendable setting that can be changed so photos are not optimised for upload. This is accessed via the User Profile when using the app on IOS or Android

With a Data URL image taken using the Camera control, this setting has a very limited impact because the image file size is already very small and irrespective of whether it is set to on or off, the image always remains at 480×640 pixels which is around 50kb in size

Using the Add Picture control with this setting turned off, the image size will depend on the device being used but will typically be between 2.5 – 4mb. If the user attaches Large high-definition images from the device’s gallery, that image will be uploaded at its existing size

All users have the option to be able to turn image optimisation on or off so bear this in mind when developing apps that allow users to upload images

Storing a Data URL Image

Because Data URL format is a string of text, it can be stored in a Text column in Dataverse, SharePoint or any other textual data source including Azure Blob. However, bear in mind that the maximum length of a Dataverse Text column is 4000 characters and this is way too small to store Data URL images that can easily run to half a million characters or more, so a Multiline Text column would be required instead

Storing a Binary Image

Dataverse, Azure Blob and SharePoint can all store binary images. Images created via the Add Media control can be stored in a Dataverse Image column, in a SharePoint Library or as a List attachment or in Azure Blob Store

Binary images can be saved directly to Dataverse or Azure Blob directly from a Canvas App. They can also be saved as a SharePoint list attachment directly from a Canvas App, but to save to a SharePoint Library requires a Flow

Converting an Image from Data URL to Binary

If an image generated from the Camera control is required to be stored in SharePoint or Dataverse you would usually want to convert it to Binary format

Transforming the format of an image from Data URL to Binary cannot be done simply by using Power Apps but can be performed using Power Automate

The best way to do this is to invoke a Flow from Power Apps that both converts the image to Binary and moves it to the desired location

Converting an Image from Binary to Data URL

There usually isn’t a need to do this, except where an image is required to be used in a Canvas App HTML control or if a PDF needs to be created. Then the format of the image has to be in Data URI / Base64 so it can be embedded directly within a HTML file

A JPEG binary image can be converted to Data URI by using the JSON function within Power Apps using the following formula:

Substitute(
   JSON(
      Image,
      IncludeBinaryData
   ),
   """",
   ""
)

Once the file has been converted and stored as a variable it can be embedded within a HTML control

Summary

So which control do I recommend you use? Well, it depends on the circumstances

Unless you are OK with having very low-definition images, the Camera control isn’t a good solution so generally I would recommend the Add Image control. The exception to this is if you specifically want users to be able to take pictures using a PC or laptop. If this is the case then because the camera function of the Add Image control won’t work on a PC/laptop, your only option is to use the Camera control instead

The use of the Add Media control can be managed much better when the end user’s device is IOS because you can define whether you want to allow users to upload images from their device or connected cloud libraries as well as being able to take a photo using the devices camera. As I pointed out earlier, in my experience this functionality doesn’t always work when the end user is using an Android device and they can add gallery images even if you disable this setting

Using the camera via the Add Media control can create significantly larger images using an Android device than a device running IOS, even with the ‘Optimize and Image for Upload’ switched on!

Finally, because a binary image is produced by the Add Media control, it can be stored in the most popular data sources used with Power Apps without any conversion

In short, use Add Media as your ‘go to’ control for creating images, except when your circumstances mean that you can’t. Just be aware of possible Android related peculiarities!