Images

PowerApps SharePoint Images – Storing and viewing

Content

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.

Back to top

Power Apps V2 Trigger

The introduction of the Power Apps V2 Flow trigger has simplified the handling of images of all types in both Power Apps and Power Automate. The format to send the content and file name is

FlowName.Run(
   {
      file:
      {
         contentBytes: ImageReference
         name: FileName
      }
   }
)

Examples
Add Picture Control

contentBytes: UploadedImage.Image
name: AddMediaButton.FileName

Camera Control

contentBytes: Camera.Photo
name: "YourFileName" & ".jpg"

Attachment Control

contentBytes: Last(AttachmentControl.Attachments).Value
name: Last(AttachmentControl.Attachments).Name

Pen Input

contentBytes: PenInput.Image
name: "YourFileName" & ".jpg

The Flow is much simplified – the example below is for storing in a Document Library, but exactly the same references (name and content) can be used for email or list attachment.
Note in particular the highlighted Expression for the file name.

Base 64 JSON method

This is original method before the V2 trigger
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

So let’s get started and look at the basic structure of an image that is contained in one of these categories.

Back to top

Camera Image

I will deal firstly with the Camera control and I will use the common method that allows for the previewing of the picture before saving it.
Firstly, set the StreamRate of the Camera Control to 100 (10 times per second), then on the OnSelect of the Camera control, you would have something like: –

Set(varPhoto, Self.Stream)

This puts your photo “content” into a Variable called varPhoto, which would also be the Image property of your Image Control to review it.

Back to top

Saving Camera to SP Library

Your Flow run would in this example be

YourFlowName.Run(
      YourFileNameBox.Text & ".jpg",
      varPhoto,
      YourGalleryName.Selected.ID
   )
)

and your Flow would look something like this

Please note the following detailed process, particularly the construction of the expression in step 3 this needs to look like the example above in relation to the File Content material shown.

  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
    dataUriToBinary(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

Back to top

Saving as attachment

It can be done as a flow with the process further down, however it can also be done with an Attachment control as per the process in this article.

Back to top

Uploaded Photo or Pen Image

The difference to this if you want to send either an Uploaded Image or a Pen Input is instead of setting varPhoto to the camera stream, you can set it to

YourImageControlName.Image

You can also refer directly to this (without setting it as a Variable) and I have done this in the example below.
When you are using these methods (Note this 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.

Back to top

Save to 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(
   {
      _JSON: 
      With(
         {
            _JSONI: 
            JSON(
               YourImageControlName.Image,
               JSONFormat.IncludeBinaryData
            )
         },
         Mid(
            _JSONI,
            Find(
                 ",",
               _JSONI
            ) + 1,
            Len(_JSONI) - 
            Find(
               ",",
               _JSONI
            ) - 1
         )
      )
   },
   YourFlowName.Run(
      YourFileNameBox.Text & ".jpg",
      _JSON,
      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.

Again using the process above, take particular note of the construction of the Expression in point 3 this needs to look like the example above in relation to the File Content material shown.

  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
    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

Back to top

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.

If you are using the camera control, there is a method not using a Flow or JSON per the process in this article.

Back to top

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(
   {
      _JSON: 
      Substitute(
         JSON(
            YourImageControlName.Image,
            JSONFormat.IncludeBinaryData
         ),
         """",
         ""
      )
   },
   Patch(
      YourListName,
      {ID: YourGalleryName.Selected.ID},
      {YourMLTextField: _JSON}
   )
)

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

Image field

This is a relatively new field type and has made the storing of images much simpler. The image content can be directly saved (if submitting a Form) or Patched directly into this field type.

Back to top

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 

Back to top

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

which will work on Image files, however if you want to extent the file types resolved, this will work on more of them including PDF and Word.

"https://yourdomainname.sharepoint.com/_layouts/15/getpreview.ashx?path=" & ThisItem.AbsoluteUri

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 

OR
https://yourdomainname.sharepoint.com/_layouts/15/getpreview.ashx?path=" & First(YourGalleryName.Selected.Attachments).AbsoluteUri

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

First(ThisItem.Attachments).Value

OR

https://yourdomainname.sharepoint.com/_layouts/15/getpreview.ashx?path=" & 
First(ThisItem.Attachments).AbsoluteUri

Back to top

Multi-Line Text or Image Fields

Finally, to Multi-Line text and the new Image 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.YourFieldName

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.

62 Comments

  • oscillate

    You actᥙally make it seem so easy with your presentation but I find this topic
    to be really sometһing which I think I ᴡould never understand.
    It ѕeems toо complеx аnd extremely broad for me.
    I’m looking forward for your next post, I will try to get the
    hang of it!

    • Warren Belz

      Thanks for your feedback oscillate.
      I try to target my posts for power apps users who have a basic understanding of the concepts involved, but need some assistance in implementing them. If there is something specific you found needing further explanation post the details on the Power Apps Community Forum and you will find very good assistance there.

    • RV

      I could not agree more. Obviously I thank Warren for the guide, but it is almost absurd that among sharepoint and power app the complexity of the passages for such an easy task like saving an image requires all those passages. If it was not for that damn (and for me not understandabale) delegation limit of the excel where saving an image is just a command file I would never use Sharepoint. Such a pity.

      • Warren Belz

        Hi Riccardo,
        The new PowerAppsV2 connector may solve some of the complexity, but I do not mind doing the JSON/Base64 conversions – once you have the code, they are very quick and always work as expected.
        Your Delegation comment is interesting – I have a blog on this if you have not read it before, but Excel is the “data source of last resort” and until recently, did not know how to spell Delegation and now still has very limited capabilities compared with SharePoint. You can of course pay extra licensing fees for Dataverse or SQL, but even they have some Delegation limitations.

  • Dean

    Hi Warren,

    Thank you for this. I’ve used this methods in the past but rather haphazaardly. I will be bookmarking this for reference as I use it a lot.

    I noticed

    • Dean

      Accidentally submitted my comment before I’d finished writing.

      I was going to say in the example for Uploaded Photo or Pen Image the code initiating the flow still references First(colPhoto).Url instead of YourImageControlName.Image.

  • Joe

    Are there any advantages to accessing images in a document library vs. as attachments in a list? I think a list attachment would make things tidier for me, but don’t want to regret it later on!
    Thanks

    • Warren Belz

      Hi Joe,
      This depends on your model and needs, however I use Libraries for the following reasons: –

    • You can store other metadata with the file (apart from the “linking” field to the main item) and as a result, they can take on the role of a “list”
    • They can be directly viewed (including thumbnails) in SharePoint as a “standalone” item and the metadata mentioned above used to group/sort which also makes them far easier to find when required.
    • There is no real limit how many you can store “per item”
    • Attachments have the advantage of “keeping it all in one place” and also have a built-in “upload” without using Power Automate.

  • Cicil

    Hi, thanks for sharing.
    I tried to use Patch () to send attachments with images through the camera but there was an error stating that the type does not match the attachment

    Patch (
    MyList,
    Defaults (MyList),
    {Attachments: DataCardValue9.Attachments})

    Is it possible to send to list without using SubmitForm?

    Ty!

  • Manny

    Thanks very much for sharing this. Awesome information and helped me a lot to understand how to work with images and Sharepoint.

  • Gian VInicius

    Good morning,

    Please help me,

    In my power apps i insert the photos and save them in sharepoint, this process is ok, i believe, but when i try to display it in my power apps, the loading is extremely slow, i would like to be able to work with a large number of photos, but I am not able to find a solution.

    Best regard.

    • Warren Belz

      Depending on how you display the photos (I assume using Thumbnail), how many you want to display at once and your available bandwidth, the speed of display will of course vary.

  • Chad West

    Here’s a curveball,

    We dump an sql query to a SP list that pulls the images into a images/url column. The images have url’s to the SP directory, but the images will not show on mobile apps. Any idea of how I can get these viewable without reinventing the wheel how the list is setup?

    • Warren Belz

      The only two ways to display images on a mobile device that I am aware of are either use the ‘{Thumbnail}’ property when the image is in a SharePoint Library (and the app has the Library as a data source) or have the image URL “external” and able to be resolved anonymously (without any login).
      This is because the mobile app resolves all URLs that way, whether you are logged into the source outside power apps or not.

  • Permana

    Hi Warren,
    I dont have the ‘{Thumbnail}’ available in my apps, the closest is ThisItem.’Thumbnail ({Thumbnail})’.Large
    however, the image becomes blank when i use this property on my gallery image

    any advice?

    • Warren Belz

      That is actually the same thing (you have to type in ThisItem.'{Thumbnail}’.Large) but your code should show the file if it is a .jpg or .png image file or a couple of others such as .docx and .pdf in a SharePoint Library. I assume that is where these are stored?

      • Permana

        yes, but no image is showing using ThisItem.’Thumbnail ({Thumbnail})’.Large

        images (jpg or png) file are stored in a sharepoint, then URL of each added as a column into “my item” list (also in sharepoint)

        • Warren Belz

          The code is meant for a gallery photo with the Items a filtered list from the Library. The company I work for does about 50,000 photos a year using this structure on iPads in the field and PCs in the office. It is not meant for URL-based images. I can assure you it works.

  • Permana

    Hi Warren,
    Meaning that i have to attached the image directly into my sharepoint list?
    or is there a way to display the URL based image on iPAD?

    • Warren Belz

      No – not to the list (this is another syntax using .Value) – for this it needs to be in a SharePoint Library (that is why my blog refers to SharePoint images). To show a URL-based image on a mobile device, the URL needs to be capable of being resolved anonymously (the user does not have to log in to the website) and then you would simply have the Image property as the URL.

  • zepim

    Hi, great post.
    I just want to know if it’s possible to call / store a picture in a column list through powerapps ? How can I link it ?
    Regards,
    ZP

  • Jerry

    HI Warren,
    You have helped me a few times on the community site.
    I am really struggling to get a single photo url store in a column on my Sharepoint list.
    (i assume you cannot PATCH) but then how do you do it?
    Any support would really be appreciated.
    Kind regards
    Jerry

  • Michael Grange

    Hi Warren,

    I am having consistent trouble saving images to SharePoint folders when the images are uploaded from a computer file system. I thought your processes would be definitive (for 2021) after trying to follow other procedures mostly of somewhat earlier vintages – with the software of course having changed over time.

    Although the canvas app and flow both execute without error, the result is a file that when an open is attempted in SharePoint results in “Hmm look like file doesn’t have a preview we can show you” and when downloaded and opened results in “It appears that we don’t support this file format”.

    An example file name is “Me with backpack11_12_2021 11_18 PM.jpg”, for which the input to the Create File flow step looked like this….(a file is created in the right library and folder as follows):

    “name”:”Me with backpack11/12/2021 11:08 PM.jpg”,”body”:”base64ToBinary(/9j/4TpFRXhpZgAASUkqAAgAAAAMAA4BAgAgAAAAngAAAA8BAgAWAAA…..with many lines of alphanumericandspecial characters after that… and ending with LQ4pX1SP//Z)”}}

    Camera photos from either the computer or mobile devices can be uploaded to SharePoint OK, using different canvas app logic and a different flow as per your procedures. Your response to another issue I had also resolved the inability to display images from SharePoint in the canvas app on a mobile device, so that led me to this set of preocedures.

    Any ideas – it is probably a simple issue to resolve, but trying different procedures is taking a frustrating amount of effort to no avail, so far?
    Hope you can help, let me know if you need more detail.

    Regards,

    Michael Grange

  • Michael Grange

    Hi Warren,

    Solved my own problem – typing in the function base64ToBinary() does not work but selecting it in the Expression tab does, knew it would be simple!

    So ignore my previous comment!

    Regards,

    Michael Grange

    • Warren Belz

      Hi Michael,
      Yes all the code in a Flow in my blog involving functions need to be Expressions. Once you get used to them, they are very powerful.
      Warren

  • Adam Hern

    Very well explained. Not only solved my problem but also enabled me to make my app a fucntion better. Thanks Warren!

  • David

    Hi Warren,

    I store images in an SP list using base64 text fields but find that it can be incredibly slow to retrieve the images in PowerApps and will often crash SP when trying to view the list directly.

    Was interested to read that your has thousands of images for PowerApps, my question is where are they storing them, and, in your experience, is base64 text an inneficient way to store 1000+ images?

    • Warren Belz

      Hi David,
      The only thing I use Base64 in Multiple-line text fields is for signatures for Word Merge / PDF forms.
      Other than that, I use SharePoint Libraries with a numeric field I call IDRef relating to the ID of the Parent List. You mentioned speed for example, a dozen photos can resolve thumbnails in a gallery on an iPad in seconds from a Library of 50k plus photos and then Launch a chosen photo equally quickly in a browser.

  • Venkatesan T

    I have just used an Multiline column in my Image control in Gallery. But Gallery is Still empty. Please let me know why

  • Tania

    Hi
    I have tried the flow for the Add picture in Powerapps to save picture to sharepoint. However when I test it I keep getting errors, i’ve got no idea what i’m doing wrong and really would like it to work. I have saved to excel but it comes up as appres:// No idea how to convert it.
    I am new to all this and help would be appreaciated.

    • Warren Belz

      Hi Tania,
      I am not sure on your reference to Excel here, but the Flow in question would be saving a picture to a SharePoint list, from either an uploaded file or the device camera. You need to have a bit of an understanding on what is happening, but if you follow the logic, you should be able to do it.

  • WAGNER

    Hey bro!
    Very well explained…but it didn’t work for me…LOL

    I am using just an image control and I am trying to display an image from sharePoint library..
    It works perfectly for PC, but yet not for mobile…. and I simply don’t get why..

    Any further help would be very kind

    thanks a lot!!

    • Warren Belz

      Hi Wagner,
      I suspect you have not linked the Library, but rather trying the SharePoint “external” URL ? You are correct – it will not work on a mobile device due to the fact the App needs to resolve the URL anonymously (not needing a log in, which SharePoint does). There is no workaround for this – you need to link the Library and use the Thumbnail syntax as per the blog.

  • Mathis

    Hi Warren,

    Thanks for this tutorial very welle explained.

    I’m building an app with images control.
    This app has to be able to run in offline mode. The data are stored in Sp Libraries and SP List and I use collections to store it on the device when it’s offline (combined with SaveData / LoadData functions).

    In the app, a user can take photos which are stored in collection and then sent to sharepoint library or SP list by Automate when connexion is back.

    But I don’t know if it’s possible to display images in offline mode.
    Indeed, I tried to use ” ‘{Thumbnail}’ ” property but I realized this parameter is also a url link to the sharepoint library where te image is stored so it doesn’t work when offline.

    Do you know if I can store the image (and not a link of the image) from SP on the device to use it later when I work in offline mode ?

    • Warren Belz

      Hi Mathis,
      Yes – if your LoadData puts it all back into a collection, you just need to reference the field name the image is contained in. Using Picture as the name if you had a Gallery with the Collection as the Items, then the Image Control in the Gallery Image property would be ThisItem.Picture.
      Warren

      • Mathis

        Thanks for the answer.
        But this doesn’t work for me…

        Maybe I’ve a problem in my data because the stored image in collections on Power apps is just an url link to the real image in SP.

        I tried to store Sharepoint list in a collection, in this list there is a ‘Image type’ column name “Picture” but it seems to be the link and not really the image store in it.

        I also tried to access a Sharepoint library where i have picture stored in it but when i store the data in collection and then save data and load on the device, i have the same issue that I have with a Sharepoint List.

        Mathis

        • Warren Belz

          Yes you are correct – that is only a URL and obviously will not work offline. You need to save the picture content in the collection and the only way to do this is directly off either a Camera or Upload Image control or possibly an Attachment control item before it is saved. I am not sure this would work with your model if you are getting other data from a List. I have always saved Pictures separately in a collection with metadata reflecting a unique value for the “parent” record.

  • Sabir Rehman

    Dear Waren,

    I have a sharepoint list and placing pictures as attachment there.

    my need is to get that picture from sharepoint and patch again to the same list with new record from powerapps.

    Thanks

  • Joan Connelly

    Hi Warren,
    I’m hoping you can help me. I’m stuck on getting the images out of the SharePoint List and mailmerged onto a document that i’ll convert to PDF. I’m able to create a .html file that displays the 2 signatures beautifully, but after that, nothing I try works… I’ve tried composing each of the 2 fields into base64, but that’s not working either.
    Thank you for any help you can give me!

    • Warren Belz

      Hi Joan,
      Not really related to this blog, but you will find you need to create a jpg file in OneDrive with your signatures (you do not need the HTML) and then use the content of that in your Word Mail Merge.

  • Joan Connelly

    Thanks Warren! Right – my issue is how to get this multi-text column data into that .jpg?? Nothing i’m doing works!
    “data:image/png;base64,iVBOR…mCC”

    thank you so much!

  • Erin

    Great and informative article! Out of the above, which is the preferred/best method when using SP and SP library with PowerApps to save/display images?

    • Warren Belz

      A Library is the one I use the most, mnainly as a lot of my applications are a many-to-one relationship, however all have their use including the new Image type column (which is not in this blog due to timeline it was written)

  • Suresh

    Hi I have doing the same thing but the issue for me is with the image control. So when I update a existing image with a new image then the thumbnail is not refreshing with the new image the code I’m using is [LookUp(‘Sourcel’, ID_1 = Text(ThisItem.ID),'{Thumbnail}’.Small)] . Here the source is my sharepoint document library and the image control is in a gallery so that gallery source is SQL so thisitem.id refers to SQL db’s id if both id’s match then load the image that was the functionality. Now the Image is not loading or refreshing when I update the image.

  • Jeremiah

    I am trying to get this to work on mobile and failing so far. I’m doing something a little different with my gallery I think so I can’t get the ThisItem to work. My gallery Items is referencing a sharepoint list of data, the image is not in this sharepoint list. I am currently using this in the Image field. Concatenate(“https://bazookafarmstar.sharepoint.com/nesting/”, ItemNum.Text,”.png”)

    The ItemNum is data coming from the sharepoint list that is referenced in my gallery items. I do have both sharepoint lists as data connections.

    The items data sharepoint list is the schedule of items we are making on the shop floor, if that item happens to have an image saved in the nesting sharepoint list I want to show it. Is there a way to get this to work on mobile?

    • Warren Belz

      Unfortunately that is not going to work on a mobile device as all URL-based images need to be resolved anonymously (not needing a login and publicly available)

  • Jeferson Altamirano

    Hello,

    Thank you for all the information provided, It helped me a lot.

    I would like to ask you about this case: Suddenly, my control images stopped working and the content is not displayed anymore. I get the value of these images from SharePoint List > Image Column with LookUp function like this: LookUp(Database, ).Image Column.Full.

    I’ve tried many things, test in different devices (laptop, cell phone, desktop), checking permissions of the list, recreating the image control, etc but without success. In another module I use another image control and I get the same issue. The strange thing is that this happens in some devices and user accounts and others work normally.

    Could you please help me?

    Thanks in advance,

  • M. Saleh

    Thanks for your efforts and all the information provided. I have a question please I don’t know if you can help. I use to show the thumbnail of file from SP Doc. library. I just need to know how to refresh the thumbnail after the use edit that file. I tried to refresh the datasourse itself but the thumbanail seems that it has been cached and doesn’t updated, do you have any idea?

    • Warren Belz

      I have never tested this before, but you are correct – the Thumbnail does not update. I assume it is generated when the file is first stored and is never actioned again. You can use the ‘Link to Item’ syntax, which does update on Image-type files.

Leave a Reply

Your email address will not be published. Required fields are marked *