Yet another File Import/Upload control for a Canvas App in Power Apps. I created it for two reasons. The first one is that I couldn’t find any “modern” control with extensive visual properties, and not all of them allow uploading multiple files at once. The second reason is that I want to learn how to write custom PCFs for future projects.
Table of contents of the post
About the controls
Just to be clear—what does this control do? It allows users to upload a file or multiple files to a Canvas App either by clicking a button or by dragging and dropping files.I tried to add as many modern UI properties as possible. I used the Fluent UI v9 documentation as a reference and included the components I liked.
List the features
- You can choose between a Button and a CompoundButton.
- More icons available to choose from.
- Allows uploading a single file or multiple files.
- Supports allowed file extensions.
- You can enables drag and drop functionality.
- Adapts colors to the currently selected theme.
- Built-in dedicated animation on the button indicating file upload progress (can be disabled).
- Various text and display styles, similar to modern built-in controls in Canvas Apps.
Screenshots with different configuration combinations:
And thededicated animation:
Download
Download control, go to my GitHub site https://github.com/KarolFilipKozlowski/PCFControl.CitDev.FileImport/ and check the releases.
How use
Here is screenshot from demo app:
Files are stored in a JSON array with three properties:
- name – the file name with extension
- size – the file size in bytes
- contentBytes – the file’s data URL in Base64 format
To upload a file into SharePoint library, create a flow, like that:
And in an app use following Fx:
ForAll(
Table(ParseJSON(S1_FilesImportControl.FilesAsJSON)),
'FluentFileImportControl-Flow'.Run(
{ contentBytes: Text(ThisRecord.Value.contentBytes), name: Text(ThisRecord.Value.name) }
)
)Icons
Here are icons visually related to file uploading in some way, to use copy the name without Regular or Filled:
DocumentMultiple
DocumentTableArrowRight
MailAdd
MailAttach
AttachArrowRight
DocumentBulletListMultiple
DocumentAdd
DocumentImage
SendPerson
NoteAdd
AttachText
DocumentArrowUp
DocumentOnePageMultiple
DocumentOnePageAdd
ReceiptAdd
DocumentFolderTo see/preview all encoded icons, go to https://react.fluentui.dev/?path=/docs/icons-catalog–docs and check their names below.
- AttachArrowRight
- Attach
- AttachText
- DocumentAdd
- DocumentArrowUp
- DocumentBulletListMultiple
- DocumentFolder
- DocumentMultiple
- DocumentImage
- DocumentOnePageAdd
- DocumentOnePageMultiple
- DocumentTableArrowRight
- AddCircle
- Add
- AddSquare
- AddSquareMultiple
- CloudAdd
- ArrowUpload
- MailAttach
- SendPerson
- StackAdd
- ReceiptAdd
- NoteAdd
- MailAdd
- Airplane
- AppsListDetail
- AppsList
- ArrowClockwise
- ArrowDownload
- ArrowDown
- ArrowExit
- ArrowLeft
- ArrowReset
- ArrowRight
- ArrowSort
- ArrowSync
- ArrowUndo
- ArrowUp
- CalendarAdd
- Calendar
- Camera
- Cart
- Chat
- CheckmarkCircle
- Checkmark
- ChevronDown
- ChevronLeft
- ChevronRight
- ChevronUp
- Circle
- ClockAlarm
- Clock
- Copy
- Database
- Delete
- DismissCircle
- Dismiss
- DocumentBulletList
- DocumentPdf
- Document
- Edit
- EmojiSmileSlight
- Eraser
- ErrorCircle
- Eye
- Filter
- GlobeArrowUp
- GlobeError
- GlobeProhibited
- Globe
- GlobeSync
- GlobeWarning
- GridDots
- History
- Home
- Info
- Link
- Money
- MoreHorizontal
- Open
- PeopleAdd
- People
- Person
- Question
- SaveCopy
- Save
- Search
- Send
- ServiceBell
- Settings
- TextCaseTitle
- Warning
The
To use any PCF controls (Power Apps component framework) for canvas apps, at your environments must be turn on feature – Allow publishing of canvas apps with code components:
