How to patch images from Power Apps to Dataverse

Introduction

Patching images or, in other words, uploading images from a canvas app is a very common use case. Whether the data source is Dataverse or SharePoint, it is a functionality of many canvas apps.

Patching images using the camera control

The setup is pretty simple:

1. there is a camera control and a gallery to display the pictures clicked.
2. there is also a signature control to capture the customer's signature.

Here is a demo of the functionality, I will share the code after that:

The OnSelect of the Capture button is:

Collect(
    colDeliveryReceiptImages,
    {
        ImageID: Text(GUID()),
        Value: camUploadPhoto_DeliveryReceiptImages.Stream,
        'Image Type': 'Image Type (Delivery Receipt Images)'.'Delivery Receipt'
    }
);

The 3 columns in the collection are:

1. Value is the image from the camera control
2. ImageID is a unique identifier assigned to each image
3. Image Type is a choice column to denote whether an image is a customer signature or a delivery receipt (this is unique to my use case)

The code of the Upload button that takes the signature as well as the images in the collection and patches them to a Dataverse table is as follows:

ForAll(
    colDeliveryReceiptImages As ThisImage,
    Patch(
        'Delivery Receipt Images',
        Defaults('Delivery Receipt Images'),
        {
            Name: "Delivery receipt image",
            Image: ThisImage.Value,
            'Image Type': 'Image Type (Delivery Receipt Images)'.'Delivery Receipt',
            'Delivery Receipt': locNewDeliveryReceipt
        }
    )
);
Patch(
    'Delivery Receipt Images',
    Defaults('Delivery Receipt Images'),
    {
        Name: "Delivery receipt image",
        Image: penSignature_DeliveryReceiptImages.Image,
        'Image Type': 'Image Type (Delivery Receipt Images)'.'Customer Signature',
        'Delivery Receipt': locNewDeliveryReceipt
    }
);

Patching images using the add picture control

If instead of the camera control, you use the add picture control, the code for the Capture button will change to:

Collect(
    colDeliveryReceiptImages,
    {
        ImageID: Text(GUID()),
        'Image Type': 'Image Type (Delivery Receipt Images)'.'Delivery Receipt',
        Value: imgUploadPhoto.Image
    }
); 

where imgUploadPhoto is the image control within the add picture control. The code of the Upload button will remain the same.

Patched images in Dataverse

This is how the images show up in D365:

Recent articles

1. How to patch images from Power Apps to D365 F&SCM
   
2. OnSelect – how to use for a clickable control in a gallery
3. How to connect an external barcode scanner with Power Apps