PowerApps SharePoint Images - Storing and viewing

Blog Index
Author: Warren Belz

In this blog, I have tried to put together the various options for storing and viewing images in Power Apps, using SharePoint as a data source. How you will do it in your app will depend on your business needs and the way you want your users to interact with these images.

To summarise the options, I will be covering three types of images

• Captured by the device camera using a Camera control
• Uploaded into a Add Picture control
• Drawn using a Pen Input

There are then three options for storing these images

• An Attachment to the item
• Stored in a SharePoint Library
• Written to a Multi-line Text field

Preparing the Image

So let’s get started and look at the basic structure of an image that is contained in one of these categories. Before an image can be stored, it must be “prepared” into a format called Base64 Text for its journey to the destination. This is done with a Power Apps function called JSON, which converts the image into a large text string.

Starting with the “preparation” of the image, I will deal firstly with the Camera and the Add Picture controls as the syntax is identical. The difference however is how the data is referred to. For the camera I will use the common method that allows for the previewing of the picture before saving it. On the OnSelect of the Camera control, you would have something like: -

ClearCollect(
   colPhoto,
   YourCameraControlName.Photo
)

photo in a Collection called colPhoto and your Image control Image property to review it would be

First(colPhoto).Url

If you are using the camera, there is a simpler way of storing using dataUriToBinary, which is below (not requiring JSON). Your Flow run would in this example be

YourFlowName.Run(
      YourFileNameBox.Text & ".jpg",
      First(colPhoto).Url,
      YourGalleryName.Selected.ID
   )
)

and your Flow would look something like this

Please note the detailed six-step process further down, particularly the construction of the expression.

However if you are using other methods (uploaded picture, pen input and it also works for the camera), you need to convert this to Base64 and this is done with JSON code. 

To de-mystify the below code a bit, the With() statements are no more than temporary variables that run in the statement and are there in this case simply to avoid a lot of repetitive code entry. When JSON text conversion is done, it needs to be dissected further to extract only the Base64 Text. Essentially the resulting text string is enclosed in quotes “” at the beginning and end and contains a “header” ending with a comma, so what is ultimately extracted is everything after the comma except the last character.

In the Flow a conversion needs to be made using base64ToBinary, allowing the text to be converted into a format compatible with image storage. This is done using the Expression facility in the Flow. Although I will not be covering this in detail here, the process involves first registering an “Ask in Power Apps” in the relevant field then putting in the expression shown to replace this.

Save in SharePoint Library

Below is a code and the accompanying Flow of what is required to create an image as a file in a SharePoint Library.

With(
   {
      vJSON: 
      With(
         {
            vJSONI: 
            JSON(
               First(colPhoto).Url,
               JSONFormat.IncludeBinaryData
            )
         },
         Mid(
            vJSONI,
            Find(
                 ",",
               vJSONI
            ) + 1,
            Len(vJSONI) - 
            Find(
               ",",
               vJSONI
            ) - 1
         )
      )
   },
   YourFlowName.Run(
      YourFileNameBox.Text & ".jpg",
      vJSON,
      YourGalleryName.Selected.ID
   )
)

Now the accompanying Flow to make this easier to understand. When filed in a Library, it is good practice to reference the Metadata so that you can easily display the images belonging to the item. I have used the ID of the “main” list in a field called IDRef, however you can use whatever common value exists.

Note that you need to include the extension (.jpg) in the file name. You can do this in the Flow name as above or add it at the end of the third box below.

to summarise the process above

1. The SharePoint Create File action selected and the Site and Folder chosen
2. Ask in Power Apps chosen for both the File Name and File Content
3. Delete the File Content reference and replace with the Expression shown
   

   base64ToBinary(triggerBody()['Createfile_FileContent'])

4. Next step - SharePoint Update File Properties with Site and Library chosen
5. Select the ItemId from the Create File step above as the Id
6. Choose Ask in Power Apps for the reference to the main list you have used

Sending Uploaded Photo or Pen Input

The only difference to this if you want to send either an Uploaded Image or a Pen Input is instead of

First(colPhoto).Url

 you need to refer to the Image control as

YourImageControlName.Image

Add as Attachment

Next, if you want to add the file as an Attachment to the current item in Power Apps, this can be done in a Flow as below. 

NOTE - this is essentially the same Power Apps code as the Library above - you will have the same three parameters here (they may be in a different order), but one (the ID) is used differently in the Flow. The file creation is OneDrive for Business.

Summarizing this process: -

1. Choose OneDrive for Business - Create File and select Root directory
2. Add a name of your choice to the File Name
3. Select Ask in Power Apps for the File Content, then delete the item and replace with the Expression shown below (as shown above)
   base64ToBinary(triggerBody()['Createfile_FileContent'])
4. Next Step - OneDrive for Business - Get file content using path and choose the Path of the Create File action above.
5. Next Step - SharePoint - Add Attachment and choose the Site and List name
6. Use Ask in Power Apps for both the Id and File Name
7. Use the File content of the OneDrive item above it.
8. Choose OneDrive for Business - Delete File and tidy up by deleting the OneDrive file.

Save as Multi-Line Text Field

Here, the JSON conversion needs to be a little different as the header is required to view the image in Power Apps, but the quotes at beginning and end are not. Using a Patch syntax, you would write the Base64 Text to a Multi-line Text field (NOTE – it must be Plain Text) with this: -

With(
   {
      vJSON: 
      Substitute(
         JSON(
            First(colPhoto).Url,
            JSONFormat.IncludeBinaryData
         ),
         """",
         ""
      )
   },
   Patch(
      YourListName,
      {ID: YourGalleryName.Selected.ID},
      {YourMLTextField: vJSON}
   )
)

Again, this is for the camera photo and the uploaded image and pen input can be referenced as noted above.

Viewing the images

SharePoint Library

Starting with a Gallery and assuming that it is based on the Library, or a collection formed from the Library and filtered to show the required images, there are two main ways of referencing an image in an Image control in the gallery. Firstly, if this is only used on a PC, this can be used.

ThisItem.'Link to item'

However, this will not display on mobile device apps due to the way that Power Apps resolves URLs anonymously. The following however works in both browser and app environments and generally resolves quicker.

ThisItem.'{Thumbnail}'.Large

Small and Medium are also available and are valid for images in Galleries or contained inside a card in a form.

Another variation on this – If displayed in a stand-alone image control to show a larger image of the Library item selected in the gallery.

YourGalleryName.Selected.'{Thumbnail}'.Large 

Attachments to SharePoint List

A gallery can be formed to display any Item Attachment images  – if the item is selected from a “main” gallery, the Items would be

YourGalleryName.Selected.Attachments

Image property of the Image control in the gallery is then

ThisItem.Value

If you want the First (you can also use Last) Attachment of a record that is selected in a Gallery

First(YourGalleryName.Selected.Attachments).Value

To show the First Attachment on a Custom Card within a form (good for item photos)

First(ThisItem.Attachments).Value

Multi-Line Text Fields

Finally, to Multi-Line text fields. As these are part of the SharePoint list, the field name needs to be referenced and this will always be (whether in a gallery or a form) an Image control will simply be

ThisItem.YourMLTextFieldName

Conclusion 

This summary is at a higher level assuming some existing Power Apps and Power Automate code knowledge, however it hopefully contains enough information to make your Power Apps image journey easier.