Upload a File to SharePoint in Power Apps

Building an app with the ability to upload files is a great feature which previously required a complicated flow to accomplish until now. In this post I will show you step by step how to upload a file to SharePoint in Power Apps. Continue reading and you too will become an Office Power User!

How-To-Upload-File-To-SharePoint-In-Power-Apps

Setting up the Flow in Power Automate

In order to upload a file to SharePoint in Power Apps we have to pass in the file to flow in Power Automate. Let’s create the flow now. Open Power Automate and create a flow from blank then choose PowerApps as the trigger.

Upload-a-file-To-SharePoint-In-PowerApps-Flow
  • Site Address: https://yoursite.sharepoint.com/sites/OfficePowerUser/
  • Folder Path: /Shared Documents
  • File Name: Choose dynamic content and select Createfile_FileName
  • File Content: Choose dynamic content and select Createfile_FileContent

Getting Our Attachment Control

Now in Power Apps we will need to do a little trick to get the needed attachment control. We will do this by connecting to a SharePoint list. Any list will do we just need it to supply an edit form temporally so that we can copy the attachment control out of the form and on to our canvas screen.

  • Insert Edit Form
    • Select your SharePoint list
    • Select attachment field and click copy.
    • Click outside of form and click paste.
    • Delete the newly created edit form. We do not need it anymore.
  • Attachment control – Let’s clear the errors
    • BorderColor: Transparent
    • FocusedBorderColor: Transparent
    • Items: “”
    • Tooltip: “”
    • DisplayMode: DisplayMode.Edit
    • Name: Attach
    • AddAttachmentText: “”
    • NoAttachmentsText: “”
    • Color: Transparent
    • File: Transparent
    • HoverFill: Transparent
    • HoverColor: Transparent
    • X: 388
    • Y: 60
    • Width: 100
    • Height: 100
    • OnAddFile:
      Set(
      varAttachValueToPassSub,
      JSON(
      ImgForAttachment.Image,
      JSONFormat.IncludeBinaryData
      )
      );
      Set(
      varAttachValueToPass,
      Mid(
      varAttachValueToPassSub,
      Find(
      “,”,
      varAttachValueToPassSub
      ) + 1,
      Len(varAttachValueToPassSub) – Find(
      “,”,
      varAttachValueToPassSub
      ) – 1
      )
      );
      SaveFileFromPowerAppsToSharePoint.Run(
      First(Attach.Attachments).Name,
      varAttachValueToPass
      );Reset(Attach);
      UpdateContext({varStartTimer: true});
      Refresh(Documents)

Setting up Icon, Image and Timer Controls

Now we will add an icon for the user to click to add the attachment and a hidden image to pass binary data to JSON and also a timer control to refresh the document library after the upload.

  • Icon //Layer this behind the attachment control.
    • Icon: Icon.Add
    • X: 388
    • Y: 60
    • Width: 100
    • Height: 100
  • Image //Used to pass to JSON as you will see later.
    • Name: imgForAttachment
    • Visible: false
    • Image: First(Attach.Attachments).Value
  • Timer //Used to refresh the data source after a few seconds to allow the flow to complete.
    • Start: varStartTimer
    • Duration: 3000
    • OnTimerEnd: UpdateContext({varStartTimer:false});Refresh(Documents)

Wrapping it UP!

Lastly we will add a gallery control to view our documents and launch the attachments.

  • Gallery //Insert a vertical gallery control.
    • Items: Documents
  • Label // Insert in gallery control.
    • Text ThisItem.Name
    • OnSelect: Launch(ThisItem.’Link to item’)

Now you know how to upload a file to SharePoint in Power Apps! Please leave your feedback. I hope this article has been helpful for you so bookmark this blog as new articles are posted regularly.

Additional Resources

how-to-create-a-spinner-component-in-powerapps/
PowerApps upload file to SharePoint document library

Share the knowledge!

Paul Rodrigues

Business Analyst with 20 years of IT experience creating practical solutions. I love to automate business processes through the use of technology while making the end users work easier. My current favorite tools are Power Apps, Power BI and Power Automate. #PowerAddict

You may also like...

8 Responses

  1. A Labz says:

    Great content! Super high-quality! Keep it up! 🙂

  2. Pei Pei says:

    Paul. thank you for the excellent article. Do you know if there is a way we can set up an email notification or any confirmation message to the user after the file has been successfully uploaded to the SharePoint library?

  3. Nader hayek says:

    Thank you for a much needed detailed explanation, much appreciate the effort

  4. Asmo57 says:

    Thank you Paul, very interesting.
    Unfortunately I was not able to have a working version: the process runs fine but the document is corrupted in Sharepoint (tried with Excel and png files).
    I debug the two variables extracted from the JSON and they seem ok.
    Automate receives the same binary value in FileContent so I do not think the problem is in Automate.
    I will try to serialize the files I used to compare the JSON content.

    • Asmo57 says:

      I found my error: in the File Content field in Power Automate, we need to convert from base 64 to binary, so the expression should be:
      base64ToBinary(triggerBody…)

      • Paul Rodrigues says:

        Hi Asmo57,
        This is what the image control does for us so there is no need to do it in Automate!

        • Asmo57 says:

          The JSON function encodes in base64 the result of the Image control, so I needed to convert it back to binary. The file was in Sharepoint Online without it but corrupted and not useable.

Leave a Reply

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