We might have already come across various tutorials, videos or blogs to upload images from attachment control in the Form in Canvas app to a destination either SharePoint or Dataverse. However, the challenge is the attachment control on Canvas app Forms only work with SP lists or Dataverse tables.

In our recent work, as mentioned above, we couldn’t use the SharePoint forms as we didn’t have the SharePoint lists but wanted to upload the images to a document library location.

So here is how we implemented the solution , we used the following components to achieve the functionality –

• Attachment Control – we copied the attachment control from the Canvas app Forms and placed the individual control to the screen outside of Forms. Attachment control stores the images in the local blob storage.

• Gallery Control – gallery control was used to read thru the images from the attachments so that we can convert the same in the base 64 format.

• Cloud Flow – all the uploaded (converted) images are read as and converted to base 64 array and pushed to document library and Dataverse tables. Now someone can argue that since we are using Dataverse table then we could have used attachment control that is available for Dataverse table in the form which could have uploaded the images to the notes section which was not our desired outcome as we wanted to use image associated with the Dataverse table record to generate a Document Core Pack template. Since we have the requirement to upload to SharePoint Document Library, we couldn’t use Document Library to display the images back to the user from Document Library using SharePoint connections in Canvas App, hence for this reason as well we had to rely on Dataverse table.

Below please find how all these controls came together to push multiple images to the Document Library –

• First thing we need to make sure we have Image control in the Gallery that references the Items property to the images from attachment control

• On the click of Upload button –
  • Since we know that the attachment control stores the images in the local blob storage, we need first extract the file in the base 64 format which can be done using approach mentioned in the code block below –
    • Set(Attachmentcontrol, JSON(Image1.Image, JSONFormat.IncludeBinaryData));
      Set(varBase64Only, Mid(Attachmentcontrol, Find(“,”, Attachmentcontrol)+1, Len(Attachmentcontrol) – Find(“,”, Attachmentcontrol)-1));
  • Form the JSON with Base 64 format of all the images and its file name
  • Call the power automate flow by passing the above JSON

• Call the power automate flow by passing the above JSON

• Within the power automate flow, run actions to upload the base 64 format images to the SharePoint Document Library and also Dataverse table which has a image column.

Hope this helps!