How to save camera image to SharePoint list attachment in Power Apps

In Power Apps, there is a prebuilt media control named ‘Camera’ that allows users to capture photos with a device’s camera. In this Power Apps tutorial, we will see how to use a Power Apps camera control to save the captured images to SharePoint list attachments.

Recently, we got a requirement from one of our clients to save the captured images to a SharePoint list using the Power Apps canvas app. To meet the requirement, I have built a Power Apps canvas app using the camera control that will capture the image from the device’s camera and save that image to a specific data source (i.e., SharePoint list).

Below, I have described a step-by-step guide that will help you meet your business requirement.

Let’s build it!

Also, Read: Power Apps Pie Chart– Let’s Build It

Prepare a SharePoint list

To save the captured images from the Power Apps canvas app to a SharePoint list, we have prepared a SharePoint list named ‘User Information Details‘ having different types of columns such as User Name, User ID, Department, Login time, Logout time, project name, and attachments.

Save captured Images to SharePoint from Power Apps camera control

Here we will see how to save captured Images to a SharePoint list from Power Apps camera control using a canvas app. Follow the below steps to achieve this:

• We have prepared a Power Apps canvas app using the above-mentioned SharePoint list.

• On the above form, when the user clicks on the Save icon, the data inserted data will be submitted to the SharePoint list.
• As per the requirement, we will add a camera control to the above form. As a result, it will capture the live image of the user and store it in the SharePoint list.
• First, unlock the Attachments Datacard, add a Power Apps camera control, and place the control inside the attachments data card.
• Select the Attachment Datacard > Navigate to the Insert tab > Expand Media > Select Camera.

• Select the Camera control and insert the below expression on the Camera’s OnSelect property.

OnSelect = Collect(
    ColCapturedImg,
    {
        DisplayName: DataCardValue5 & ".jpg",
        Id: GUID() & ".jpg",
        Value: Self.Photo
    }
);
Reset(Attachment_DataCardValue);

Where ColCapturedImg is the name of the Power Apps collection, DataCardValue5 is the name of the User ID’s Data card value, and Attachment_DataCardValue is the name of the Atachment’s Data card value.

As per the above expression, we have created a Power Apps collection ‘ColCapturedImg‘ to store the captured image with the user’s Id, and the image will be stored in a jpg format. After that, it will reset the attachment’s data card to store the next captured image.

Example: If the user’s ID is Emp123, then the image will be stored as ‘Emp123.jpg‘.

• Next, select the Attachment Data card and set the collection name within the Defaults property.

Defaults = ColCapturedImg 

• Finally, insert the below expression on the Save icon’s OnSelect property. When the user clicks on the Save icon, the inserted data will be submitted to the SharePoint list as well as clear the collection.

OnSelect = SubmitForm(Form1);
Clear(ColCapturedImg);
NewForm(Form1);

Where Form1 is the name of the Power Apps edit form.

That’s it! Let’s save, publish and run the app. Insert data within the form and click on the camera control to capture an image. Also, you can insert multiple attachments to the attachment data card.

Once we click on the Save Icon it will be saved to the SharePoint list along with the captured image. Also, the form will be reset to a new form for another entry.

This is how to save captured images from a Power Apps camera control to SharePoint attachments using a Canvas app.

Conclusion

From this Power Apps tutorial, we learned how to save captured images from Power Apps camera control to SharePoint list.

You may also like:

• Power Apps Rich text editor control
• create multiple tabs form in Power Apps
• Get Gallery Item By ID in Power Apps