Power Apps Add Picture Control [Complete Guide]

Did you know how to work with Power Apps Add picture control? If Not, No worries!

In this Power Apps tutorial, I will explain the Power Apps Add picture control and the key properties of an Add picture in Power Apps.

Further, you will learn how to insert a Power Apps Add picture control, and many more:

  • How to work with an Add Picture control in Power Apps
  • Save Power Apps Add Picture Control Data to the Collection

Power Apps Add Picture Control

Power Apps Add picture control is a valuable control that allows images to be uploaded from a local device. When this control is used and accessed through a desktop browser, the local file explorer selects the file.

This control allows Users to update their data source with visual content seamlessly.

The user can choose images directly from the local image store on mobile devices.

The Add Picture control comprises an “Image control” and an “Add Picture button“. The Image control displays either the uploaded image or a placeholder in the absence of any uploaded images. The Add Picture button, on the other hand, enables users to upload an image.

Power Apps Add picture

This is the overview of Add picture control in Power Apps.

Power Apps Add Picture Control Properties

In this section, I will explain all the properties of the Power Apps add picture control:

Property NameDescription
AccessibleLabelThis property is assigned to a screen reader label.
AlignThis refers to the horizontal positioning of the text relative to the center of its control.
Border ColorA user can specify the color for a border.
Border StyleThis property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
ChangePictureTextThe color of a control’s border will be affected when the “DisplayMode” property is set to Disabled.
ColorDefine the color of a text.
DisabledBorderColorThe color of a control’s border will be affected when the “DisplayMode” property is set to Disabled.
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
FillDefine the background color of the control.
FocusedBorderColorThe color of a control’s border when it is in focus.
HoverBorderColorThe color of a control’s border will be affected when the “DisplayMode” property is set to Disabled.
OnChangeWhen the user changes a selection, it specifies what action to perform.
OnSelectWhen the user clicks on a control, it specifies what action to perform.
PressedBorderColorThis refers to the color of a control’s border when a user taps or clicks on it.
RadiusBottomRightHere, we can specify whether the Add Picture control can be visible.
ResetResetting the controls to their default value can be beneficial.
TabIndexThis refers to the keyboard navigation sequence that is related to other controls.
VisibleHere, we can specify whether the Add picture control can be visible.

These are the properties of a Power Apps Add picture control.

How to Add Power Apps Add Picture Control

I will show you how to insert an Add picture control in Power Apps.

  • Sign in to Power Apps with your valid Microsoft 365 Credentials.
  • Create a Blank canvas app -> On the Power Apps screen, insert an Add picture control. [Click on +Insert -> Expand Media -> Select Add picture].
Power Apps Add picture control
  • The Power Apps Add picture control will appear like the screenshot below.
Add picture control in Power Apps
  • By default, the Add picture control name will be “AddMediaWithImage1“; it is always better to provide a meaningful name [you can Rename it using “pic”]
How to add Power Apps Add picture control
  • Save, Publish, and Preview the app. When the user clicks on control, it will navigate to your local device to upload an image.
Insert a Power Apps Add picture control
  • Once you upload an image, it will look like the screenshot below:
How to insert a Power Apps Add picture control
  • But, if you want to change the image, click on ‘Change picture’ and it will again navigate to your local device to change your image.
Insert Add picture control in Power Apps

This is how we can insert a Power Apps Add picture control.

How to Use Power Apps Add Picture Control

This section will show you how to use Power Apps Add picture control.

Example 1:

I have created a Blank canvas app and added a Add picture control and a Text label. Whenever the user uploads a particular image, the text label will display its file format [img, jpg, gif, etc…] as shown below:

Power Apps Add picture control

To achieve this, follow the below steps:

  • On the Power Apps screen, insert an Add picture control as shown below:
How to use Power Apps Add picture control
  • Select the Add picture control -> Set its OnChange property to:
Set(
   varFileName,
   Mid(
      btn_FileFormat.FileName,
      Find(".", btn_FileFormat.FileName),
      Len(btn_FileFormat.FileName) - Find(".", btn_FileFormat.FileName) + 1
   )
)

Where,

  1. varFileName = Provide the variable name
  2. btn_FileFormat = It enables users to upload an image [AddMediaButton contro name].
Add picture control in Power Apps
  • Insert a Text label -> Set its Text property as:
"File Format: " & varFileName

Where,

  1. varFileName = Variable name
How to work with Power Apps Add picture control
  • Once your app is ready, Save, Publish, and Preview the app. When the user uploads an image using the Add image control, the text label will display its file format as img, png, jpg, etc…
How to use Add picture control in Power Apps

This is how to work with a Power Apps Add picture control.

Save Power Apps Add Picture Control Data to the Collection

Here, I will explain how to save the Power Apps Add picture control data to the collection.

Example,

I have created a Blank canvas app and added an Add picture, Button control, and Gallery control. When the user uploads an image using the Add image control and clicks on a button control.

How to save the Power Apps add picture control to collection

The uploaded image will be saved to a gallery control as shown below:

Power Apps Add picture control data and save to collection

Follow the below steps to achieve this:

  • On the Power Apps screen, insert an Add picture control as shown below:
How to save the add picture control to collection in Power Apps
  • Insert a Button control -> Set its OnSelect property to:
Collect(colImage,btnUploadImage.Media)

Where,

  1. colImage = Provide the collection name
  2. btnUploadImage = It enables users to upload an image [AddMediaButton contro name].
How to work with Add picture control in Power Apps
  • Insert a Horizontal gallery control -> Set its Items property to:
colImage

Where,

  1. colImage = Collection name
Add picture control data and save to collection in Power Apps
  • On the gallery, select the Image control -> Set its Image property as:
ThisItem.Value
How to add picture control data and save to collection in Power Apps
  • Once your app is ready, Save, Publish, and Preview the app. When the user uploads an image using the Add image control, that uploaded image will display on the gallery as shown below:
Save the Power Apps add picture control to collection

This is how to save the Power Apps Add picture control to a collection.

Conclusion

I hope this Power Apps tutorial gave you complete knowledge of “Power Apps Add picture control.”

Also, in this tutorial, I have explained the key properties of a Power Apps Add picture control and how to insert a Add picture control in Power Apps and

Lastly, you will see how to work with Power Apps Add picture control and Power Apps Add picture control data save to collection.

 Moreover, you may like some more Power Apps tutorials: