Building a Canvas App PCF Control to Download Files from SharePoint

This post will cover how to enable file downloads from SharePoint within a Power Apps (Canvas App) via a PCF component - without granting users direct access to the underlying SharePoint location. The goal is to allow users to trigger the download of a specific file (generated by an external process) to their local machine via a single button click.

Prerequisites

• Visual Studio Code
• Node.js
• Microsoft Power Platform CLI
• .NET
• PCF components enabled for Canvas Apps in your environment

Solution Overview

This solution includes:

• A PCF control for handling the file download

• A Power Automate flow to retrieve and convert SharePoint files to Base64

• A Canvas App that ties everything together

This post will show how to download files stored in SharePoint:

…directly from this Canvas App:

1 PCF Component: File Downloader

You can download the PCF solution here: Solutions.zip on GitHub

The PCF control handles the actual file download within the Canvas App. It takes file metadata and content as input and triggers a download on the user's device without exposing the SharePoint source.

There are two main files that define the component, the manifest (ControlManifest.Input.xml) and the implementation logic (index.ts).

The manifest file ControlManifest.Input.xml defines four properties passed in from Power Apps:

1. fileName - The name users will see when the file is downloaded.
2. fileMIMEType - The MIME type used to correctly format the file.
3. fileBase64 - The file’s content encoded in Base64.
4. fileDownload - A boolean flag that triggers the download.

The index.ts file contains the component logic:

The UpdateView() method listens for changes in the control's context and initiates a file download if the fileDownload flag is set to true. It creates a temporary a element with the file data, triggers the download, and then signals the framework to reset the flag to avoid repeated downloads.

The getOutputs() method resets fileDownload to false to ensure the download only occurs once per trigger.

2 Power Automate Flow: Convert SharePoint File to Base64

A Power Automate Flow that takes the name of a file in a SharePoint location (passed through from a Canvas App) and returns the file MIMEType and the file as base64.

The MIMEtype of the file is obtained via body('Get_file_content_using_path')?['$content-type']
The file as base64 is obtained via outputs('Get_file_content_using_path')?['body']?['$content']

3 Canvas App: Integration

Steps to connect it all up in your Canvas App:

1. Import the PCF component into your environment as a solution:

2. In Power Apps, go to Insert > Code components, and add the control to your screen:
   

3. Add your Power Automate flow to the app:
   

4. Add UI Elements:
   -A text input field (e.g., TextInput1) for the filename
   -A Download button

5. Set the OnSelect property of the Download button to the following:
   Set(fileDownload, false);
Set(flowResult, Filetobase64.Run(TextInput1.Text));
Set(fileBase64, flowResult.base64);
Set(fileType, flowResult.filetype);
Set(fileDownload, true);

6. Bind the PCF component properties to the variables you’ve set:
   

7. Test it out by providing a filename and clicking the Download button
   

Final Thoughts

This approach provides a secure and user-friendly way to enable file downloads from SharePoint without giving users direct access to the document library. It’s lightweight, flexible, and can be extended to support dynamic files or other data sources.