How to upload files in canvas app

Dominic Liu, 03 March 2022

If you want to allow your Canvas App user to upload documents and saved in your database, but when you search for all the out of box Canvas App input components you can’t find one that support all types of documents, that is because Microsoft currently only has two types of input components for file upload.

First is ‘Add Picture’ input component, which you can find it via Insert -> Media -> Add picture. When you test it, you can find that it defaults to image file only, sure you can manually change the file type to ‘All Files’ however, most of the Canvas App user use mobile devices and when they click this button, it will automatically open the album on user’s mobile device.

Second is ‘Import Data’ input component, which you can find it via Insert -> Media -> Import. This type of input only allows user to upload .zip file

Now here is the workaround. You need to have SharePoint List, this List is only used as a reference, it can be any list in your SharePoint environment. Add the SharePoint connection in your Canvas App, finally, insert a Forms -> Edit -> Select the SharePoint connection method and choose your List. You can see the Attach file segment in your screen as shown below.

In your Tree view list from the left pane, you should see the DataCardValue under Attachments_DataCard as a sub component for the Form, copy the DataCardValue component only and paste to your main screen, delete the Form we just created afterwards.

Now you can see the Attach file option on your screen, you will notice there’s error warning of this component, that’s is because some PowerFx code for this components is related with the parent form, which we just deleted, we can simply delete all the error PowerFx that related with the keyword ‘Parent’

Now you should have a nice Attach file option on your screen, you can also create a Collection in your Canvas App that holds the files user uploaded and use Power Automate to achieve more complex business process.