Upload and show images in Power Apps

In this article we are going to approach a way to upload some images to a SharePoint list(using a text column) and show them back in a gallery.

First, create a canvas app and insert the following controls:

  • Media
    • Add picture
  • Input
    • Text input
    • Button ( “Create” )
  • Labels
  • Horizontal Gallery ( linked to your Sharepoint list )
power-apps-canvas-add-controls

On the button “OnSelect” function it should look like this:

‘Patch(UploadedImagesTestList,Defaults(UploadedImagesTestList),{Title:TextInput1.Text,Image:Substitute(JSON(UploadedImage1.Image,IncludeBinaryData),"""","")})’
power-apps-canvas-code-editor

Here we patch the Column “Image” with the based64 string of the uploaded image using the JSON() and removing the extra double quotes. With mobile devices the “Add picture” control let us use the camera, just set the ‘UseMobileCamera’ property from the “AddMediaButton” to true.Above is an image with a text overlay. Click inside the image to replace the text with your own.

On your list it should be like below:

power apps sharepoint list base64

To show the image in the Gallery, simply “call” the column with the base64 string.

power apps canvas display image

And that’s it! You can store and show Images on your App using only one Sharepoint list.

Ready to accelerate your business with Microsoft Power Apps?

Contact us for:

  • Custom App Development: Create tailored apps to meet your unique business needs without extensive coding. 
  • Enhanced Productivity: Streamline workflows and automate processes with powerful apps. 
  • Integration Capabilities: Seamlessly integrate with Microsoft 365 and other services. 
  • Rapid Deployment: Quickly build and deploy apps to address immediate business challenges. 
  • User-Friendly Design: Design intuitive and user-friendly interfaces with drag-and-drop simplicity. 
  • Mobile Accessibility: Access your apps on any device, anywhere, ensuring business continuity. 
  • Scalable Solutions: Develop scalable apps that grow with your business. 
  • Data Insights: Leverage integrated data sources for real-time insights and analytics. 
  • Security and Compliance: Protect your data with enterprise-grade security and compliance features. 
  • Expert Support: Benefit from our consultancy services to optimize your Power Apps strategy.

If you are interested in learning more about us and how we can help you, contact us.

You can also check out our blog for more articles and insights on Microsoft 365 technologies.