How to Upload images to Dataverse from Power Apps

Do you know how to upload dataverse images from Power Apps? Also, any ideas on how to create and work with the Dataverse Image column? Keep reading this detailed tutorial to learn everything about it.

This Microsoft Dataverse tutorial will let you understand what a Dataverse Image is, what the dataverse image file size limit is, how to create an image column in the dataverse table and many more.

We will also discuss all the following associated topics:

• Dataverse image column or Create Image Column in Dataverse Table
• Add image in Dataverse Form
• Can Dataverse store images?
• Can we store files in Dataverse?
• Dataverse create image
• Working with Dataverse image url
• How to work with Dataverse table image
• Dataverse Upload Images from Power Apps

Dataverse Image Column

• A dataverse image column is a specific column that helps the application show a single picture in each row.
• Dataverse standard tables cannot have an image column added, only Dataverse custom tables can. 
• Dataverse Image columns are defined in certain standard tables.
• Even if a table contains an image column, you must enable two options in a model-driven app in order to display that picture. such as:

1. Default Image must be entered as the value for the Primary Image attribute of the dataverse standard table definition. A custom image column is necessary for dataverse custom tables. Then, in the custom table definition, you may choose that image column as the Primary Image value.
2. The Show image in the form attribute must be enabled on the table form where the picture will be shown.

NOTE:

Business process flows, business rules, charts, rollup columns, and calculated columns cannot be used with image columns.

Dataverse image size

• When using the Dataverse image field, we always select the option to only upload images from within our own system. However, we should also be aware of the maximum image size that may be uploaded to the dataverse image field.
• An image needs to be less than 10 MB in size and in one of the formats listed below:

1. jpg
2. jpeg
3. gif
4. tif
5. tiff
6. bmp
7. png

• The image will be converted to a .jpg file when it is uploaded, and any downloaded photos will likewise follow this format. Only the first frame of an animated.gif is kept when it is published.
• A picture will be downsized as a “thumbnail” image when it is uploaded, with a maximum size of 144 pixels by 144 pixels.
• Before uploading, users should crop or resize their pictures to ensure they appear adequately at this level. All photos have been square-cropped.
• If an image’s two sides are both less than 144 pixels, the picture will be cropped into a square with the smaller side’s measurements.

This is all about the image file size limit in Dataverse.

Create Image Column in Dataverse Table

Next, we will see how to create an image column in the Dataverse Table.

NOTE:

Wondering how to create a table in Dataverse? Are you also interested in learning how to add other columns to a Dataverse table? Refer to this complete dataverse tutorial to learn more: Dataverse Create Table [With Examples]

Let’s say we have a Dataverse Custom table named TSinfo Site Galleries. In this table, we will create an image field called SiteImage that will help us to store the images or pictures.

In the Dataverse table, to create an image column, click on + New column and then enter the below field details on the new column pane:

• Display name = This is a mandatory field. Enter the name of the image column (SiteImage) that you want to create in the Dataverse table.
• Description = This is an optional field. Provide the field description for the purpose to create it.
• Data type = Expand the chevron, go to the File and then select the Image option.

• Primary image = The image columns selected as the primary image are shown in the form’s upper right corner. For each table, there can only be one main image.
• Schema name = This is a pre-populated column that comes from the Display name. It includes the Dataverse solution publisher’s customization prefix. After you’ve saved the table, you won’t be able to edit it.
• Maximum image size = 10,240 KB is the default value for the image size. The total maximum size must be between 1 KB and 30720 KB.
• Can store full images = To store the full images, we need to enable this option.
• Enable column security = If it is enabled, then it will be used to restrict access to particular columns.
• Enable auditing = If it is enabled, then it will allow the tracking of user access changes and table record modifications so that you may evaluate the activity at a later time.
• Sortable = It defines how the column will be set up for interactive dashboards.

Once everything is done, click on Save. After a while, the image column will be created in the dataverse table.

This is how to create an image column in the Dataverse Table.

Also read: Delete All Records From Dataverse Table [With Examples]

Add image in Dataverse Form

The image field in the Dataverse form is now ready to be added. so that a user can upload a picture straight through the form itself.

• To do so, in the Dataverse table (TSinfo Site Gallery), Tap on the Forms under the Data experiences section.

• Select the Information Main form on the Forms page, as shown in the screenshot below.

• On the next page, go to the Table columns (from the left navigation) -> Drag the Image field (SiteImage) and drop in the main form where you want to place it.
• Once the image field is placed in the form, then the main form will display as in the figure below. Finally, Save and Publish the form to enable users to access the image column.

• Now go back to the table and open the dataverse table using the Edit button.

• Expand the + New row and select the New row using form option to create a new record in the specific table.

• Enter the Site Name on the next screen, and then save the data. The image field (SiteImage) will prompt you to upload the image once you save the record. Until you save the record, a message like this will appear in the image field “This record hasn’t been created yet. To enable image upload, create this record.“

• Then, tap on the Choose File button to upload the picture, select the specific image from your local system and click on Open.

• Again save the record and click on the Open button from the image field. You can display the full-size image in the new browser tab. Also, the image also displays on the top left of the form since the image column in this example acts as the primary image.
• Similarly, to delete the picture from the record and Dataverse table, choose the Delete button.

• Once you go back to the dataverse table, you will see the table entry looks like the screenshot below.

This is how to add an image in the Dataverse Forms.

Check out: Dataverse Primary Name Column Autonumber

Can Dataverse store images?

Microsoft Dataverse stores thumbnail photos and image metadata, which also contains the data required to obtain the complete image. To save on data storage, full photos are kept in file storage on the Azure blob.

Can we store files in Dataverse?

Next, Can we store files in Dataverse?

You may store files on any record in Dataverse due to the File data type. Any table you have the authority to alter allows you to add the data type to a new column.

Check out: Filter Dataverse Choice Column [With Various Examples]

Dataverse create image

Do you want to retrieve full-sized images stored in an Image type column in a dataverse table through the Azure API Management? Check out this Dataverse forum post to learn about it: Dataverse create image

Dataverse image URL

Do you know how to add a dataverse image’s URL to a Power App? Either the whole image or the thumbnail. Check out this Power Apps forum post for more details: Dataverse Image URL

Dataverse table image

Would you prefer to store images in a Dataverse table? Refer to this link to understand it more: Dataverse table image

Dataverse Upload Images from Power Apps

A Power Apps picture uploaded to a Dataverse table: Have you ever tried this? It’s quite easy and simple to accomplish this. Here, we’ll use Power Automate in Power Apps to achieve this. Let’s follow the steps below.

• In the image below, you can see there is a Dataverse table called TSinfo Site Galleries. This table has an image column named SiteImage where all images will store.

• Now I would like to upload the Power Apps Image to this Dataverse image column. To do so, we will create a Blank Canvas app in Power Apps.
• Go to Apps (from the left navigation) -> Expand + New app -> Canvas -> Provide a name to the canvas app and Choose the app Format either Tablet or Phone -> Hit on the Create button.

• Once the app is ready to use, the next thing we need to create the Dataverse connection and connect that specific Dataverse table (TSinfo Site Galleries) where we want to store the image.
• To connect the dataverse table, go to Data (from the left nav) -> Click on Add data button -> Select the Dataverse table name (TSinfo Site Galleries) under the Tables section. Now the dataverse table has been added and is ready to use in the Power Apps.

• Now add a Power Apps Picture control to the screen that will help you to upload your desired image once you click on it. Go to Insert tab -> Media -> Select Add picture control as shown below.

• After that, provide a Button input control that, when clicked, will allow you to upload the Power Apps picture to the Dataverse image column. Rename the button to Upload Image.

That’s it to do in Power Apps. Next, we will create a flow in the app.

• To create a new flow, on the Power Apps screen, go to the Action tab -> Click on Power Automate -> Crete new flow -> + Create from blank as below.

• The Power Apps flow will appear like the below screenshot. Click on + New step to add a new step below the PowerApps.

• Search Add a new row action under the Microsoft Dataverse section. The action will come up with the PREMIUM version. Click and add it over there.

• Expand the Add a new row action and provide the Dataverse table name (TSinfo Site Galleries) where you want to upload the image.

• Expand on Show advanced options and enter the below field values as:

1. SiteName = Go to the Dynamic content of this field and click on Ask in PowerApps. Then the field value will add whatever you provide in Power Apps.

2. SiteImage = Similarly, go to the Dynamic content and click on the Ask in PowerApps. If you can not see this option, then tap on the See More option to make it visible.

• Provide a name for the flow (Upload PA Image to DV) and save it.

• Come back to the Power Apps screen and apply the code below on the button’s (Upload Image) OnSelect property as:

OnSelect = UploadPAImagetoDV.Run("New Image",JSON(UploadedImage1.Image,JSONFormat.IncludeBinaryData))

Where,

1. UploadPAImagetoDV = Flow name that you have created recently
2. “New Image” = Provide a name for the image that will upload to the Dataverse table
3. UploadedImage1 = Image control name from the Power Apps Picture Control

• Once it’s done, then save, publish, and preview the app. Tap on the picture control to upload an image from the system, and then click on the Upload Image button.

• Now go to the flow and check the flow run history (My Flows –> Select Flow Name -> Tap on Show more option -> Run history). You will see that the flow run has failed. The right side of the page represents the error details that say: “InnerException : Microsoft.OData.ODataException: Cannot convert the literal ‘”data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHC….”

• The above error message specifies “Cannot convert the literal data image“, which means the Dataverse image column is expecting only the binary types, not any other content types.
• To overcome this issue, edit the flow and add a Compose action below the PowerApps trigger action. Click on the + icon -> Add an action -> Search for “Compose” in the search bar -> Select “Compose” under the Data Operation section as shown below.

• The compose action has only one field, i.e.,

Inputs = Go to the Expression tab and apply the code below,

Inputs = replace(split(triggerBody()['Addanewrow_SiteImage'],',')[1],'"','')

Where,

‘Addanewrow_SiteImage‘ = This is the Site image column name from the Add a new row action. (As before you have selected the Ask in PowerApps option to add it)

Once you have applied the formula, click on the OK button.

• Next, expand the “Add a new row” action and remove the image name (Addanewrow_SiteImage) from the SiteImage field. Go to the Dynamic content tab and add the Outputs under the Compose section as like below.

• That’s all there is to do in the flow. Now save the flow and go back to the Power Apps app.

• Then save, publish, and preview the app. Upload an image using the Upload Image button. You will notice the flow status has been successful after you look at the flow run history.

• Go to the Dataverse table (TSinfo Site Gallery) now to see the newly uploaded image in the table’s top row.

This way we can upload images to Dataverse from Power Apps.

Also, you may like the below Dataverse and Power Apps tutorials:

• Power Apps Add Data to Dataverse Table
• How to create and use dataflow in Dataverse
• Dataverse Solution [Complete Tutorial]
• How to Create Dataverse View
• How to Create Dataverse File Field
• Power Apps Sort Gallery [With 15 Useful Examples]
• PowerApps Search Function + How to use with example
• Power Apps Sort Function [With 19 useful examples]
• Power Apps Search Gallery + 19 Examples

This Dataverse tutorial explained how to create an Image Column in a Dataverse Table, How to add an image in Dataverse Form and many more like below:

• Can Dataverse store images?
• Can we store files in Dataverse?
• What is Dataverse create image
• Working with Dataverse image url
• How to work with Dataverse table image
• Working with Dataverse Upload Images from Power Apps