Skip to content
PowerLibs LogoPowerLibs

Uploads for Power Apps

Uploads are styled cards built around three real Power Apps controls: the Attachments control for documents, the Add picture control for one image, and the Pen Input control for a signature. Reach for them when a screen has to take a file, a photo or a signature from the user and you do not want to build a form first: the Document Upload variants paste onto an empty screen with no form and no data source behind them. Every component in this family needs a Components, Ultra, Team or Lifetime plan.

Pick a variant

ComponentPlanWhat it is forSettings you can change
Photo UploadPaidPicking one image from the device, with a live preview in the cardCard label, Helper text, Label after an image is chosen
Document UploadPaidDrag and drop PDFs and Office files onto a standalone dropzone cardCard label, Helper text, Maximum number of files
Document Upload CompactPaidAn attachments field with a label, sized for a column of inputsCard label, Helper text, Maximum number of files
Document Upload TintedPaidA dropzone washed in your primary colour that stands out on the pageCard label, Helper text, Maximum number of files
Document Upload MinimalPaidA quiet dropzone with monochrome chips for content-heavy screensCard label, Helper text, Maximum number of files
Signature PadPaidSigning off inspections, approvals and deliveries with a finger or stylusCard label, Helper text, Clear button text

Paid means a Components, Ultra, Team or Lifetime plan (pricing). Open the category in the library: Uploads.

To copy a variant into Power Apps Studio, follow Getting Started.

After you paste

The controls hold what the user adds; nothing is saved until one of your formulas sends it somewhere. The snippets below use the control names from the default YAML. A custom variable prefix renames the labels, buttons and image, while attDocumentUploadPicker and penSignaturePad keep their fixed names.

Put this in the DisplayMode property of your submit button to keep it disabled until at least one file sits in the Document Upload. The Compact, Minimal and Tinted variants name their control attDocumentUploadCompactPicker, attDocumentUploadMinimalPicker and attDocumentUploadTintedPicker:

If(IsEmpty(attDocumentUploadPicker.Attachments), DisplayMode.Disabled, DisplayMode.Edit)

Put this in the OnSelect property of a save button to hand every attached file, name and content included, to a Power Automate flow with a Power Apps trigger. The flow parses the JSON and runs Create file once per row:

SaveDocumentsFlow.Run(
    JSON(attDocumentUploadPicker.Attachments, JSONFormat.IncludeBinaryData)
)

Put this in the OnSelect property of a save button to write the chosen photo and the signature into image columns of your own list (swap Inspections for its name), then clear the pad for the next person. The photo is the Media property of btnPhotoUploadPicker; the signature is the Image property of penSignaturePad:

Patch(Inspections, Defaults(Inspections), {
    Photo: btnPhotoUploadPicker.Media,
    Signature: penSignaturePad.Image
});
Reset(penSignaturePad)

Good to know

  • Every Uploads component has an Instructions tab, and it leads with the one thing that trips people up: the Attachments control holds the files in attDocumentUploadPicker.Attachments and the pen control holds the signature in penSignaturePad.Image, but neither stores anything. If the user closes the app first, it is gone.
  • This family is Classic YAML only. Copy YAML is a plain button here rather than the Classic or Modern menu, because none of the Uploads generators has a Modern version.
  • Photo Upload has no drag and drop. Its Add picture control opens the device picker on tap and ships with UseMobileCamera set to false; set it to true to open the camera on phones. For PDFs and Office files use a Document Upload variant instead.
  • The Maximum number of files setting on the four Document Upload variants becomes the MaxAttachments property of the Attachments control. The Instructions tab also lists the OnAddFile and OnRemoveFile events, handy for a live file counter.
  • The light and dark toggle changes the card surface, border and text colours, except the signature pad itself, which stays white with dark ink in both themes so it prints like paper. The Clear button runs Reset(penSignaturePad), and the pen control's own toolbar is hidden with ShowControls set to false.

Related

Browse the components at Uploads. See also Input Fields and the tutorial Power Apps File Upload Without a Form.

Uploads for Power Apps | PowerLibs