Attachments list with upload

Use lcsAttachmentList wherever people add files to a record: a request's quotes and photos, a case's documents, an expense's receipts. Two questions come up again and again on the forums: "how do I upload files outside a form?" and "how do I show the attachments, with a remove button, in a nice list?". This component answers both in one card:

• A drop card at the top: choose files, or drag them onto it on the web. It shows the accepted types as chips and the limits under them, and it lights up in your colour while a file is dragged over it;
• Each added file as a row with its type tile, and a status: a green tick for Ready to upload, or a red row with the reason it can't go (a type you don't accept, a file that's already attached). A round button takes it off again;
• The files already attached from your table (Key, Name, Size, Url, Who, When), each with Open, and a remove button that marks the file, with Undo, until the changes are saved;
• One Upload button ("Upload 2 files") that runs OnSave(Ready, Removed) in your app, with how many files to upload and to remove. Your app saves the files and the removals, shows progress with IsUploading, and resets the card when it's done. Cancel clears the changes and runs OnCancel(Discarded);
• ReadyCount, StagedFiles, StagedFilesData (the files as base64 for a flow), RemovedKeys, HasChanges, Count and TotalSize for the rest of your screen.

It's built on Power Apps' classic Attachments control, the same way as many makers' own upload components: the control is the click-and-drop target across the drop card, and the component keeps the files you add until you save them.

The examples call it alRequest on a request's screen, with galRequests listing the requests.

The files already attached, from the selected item's SharePoint attachments:

// alRequest.Files
ForAll(
    galRequests.Selected.Attachments As a,
    {Key: a.Name, Name: a.DisplayName, Size: 0, Url: a.Value, Who: "", When: Blank()}
)

Save through a flow that takes text (one run per file), with progress while it runs. SaveRequestFile and DeleteRequestFile stand for your own flows:

// alRequest.IsUploading
varSavingFiles

// alRequest.OnSave
Set(varSavingFiles, true);
ForAll(
    alRequest.StagedFilesData As f,
    SaveRequestFile.Run(galRequests.Selected.ID, f.Name, f.ContentBytes)
);
ForAll(alRequest.RemovedKeys As k, DeleteRequestFile.Run(galRequests.Selected.ID, k.Key));
Set(varSavingFiles, false);
Reset(alRequest);
Notify(Ready & " uploaded, " & Removed & " removed", NotificationType.Success)

StagedFilesData is built when Upload is selected, so read it in OnSave. If your flow's trigger takes a file instead of text, send each row of StagedFiles (its Name and Value) and skip the base64.

One file into a Dataverse file column, with the record Microsoft's docs build for a file column (FileName and Value):

// alDocument.MaxFiles
1

// alDocument.OnSave
Patch(
    'Project Documents',
    galDocuments.Selected,
    {'Document File': {FileName: First(alDocument.StagedFiles).Name, Value: First(alDocument.StagedFiles).Value}}
);
Reset(alDocument)

Accept only some types, and change the limits:

// alRequest.AcceptedTypes
"pdf,docx,xlsx,jpg,png"

// alRequest.MaxFiles
5

// alRequest.MaxFileSize
20

A list people can open but not change:

// alRequest.AllowUpload
false

// alRequest.AllowRemove
false

• Columns. Files wants exactly Key, Name, Size, Url, Who and When; build the rows with ForAll as in Use it. Size is bytes; pass 0 when the source doesn't give it, and the size is left out of the details.
• Notes with files (the Notes table): list them with Filter(Notes, Regarding = varRequest), 'File Name' as Name, 'File Size (Bytes)' as Size, 'Created By'.'Full Name' as Who and 'Created On' as When. A note has no link the app can open directly, so leave Url empty, set OpenOnSelect off, and open it through a flow in OnOpen.
• A file column holds one file per record: set MaxFiles to 1 and patch it as in Use it.
• Opening files. The row opens Url with Launch, in a new tab, where the browser's own sign-in applies. Power Apps can't attach your sign-in to a download itself, so a link that needs authentication works in the browser and may not in the mobile app; test on the devices your people use.

• The drop card is Power Apps' Attachments control, named with your title and "add files", so a screen reader says what it's for.
• Each added file is named with its status as text ("Ready to upload", "Not accepted: MP4 isn't an accepted type"), with an icon beside it, so it's never colour alone; each remove button is named "Remove" and the file's name.
• Each attached file is a button named "Open" or "Select" and the file's name, plus "removed when you save" when it's marked; Open, Remove and Undo are buttons with their own names.
• The summary next to the buttons ("2 ready · 1 to remove") says what Upload will do.
• With Motion on, the arrow in the drop card bobs three times when the card appears, tiles pop in, the ready tick draws itself in, a refused file's mark shakes once, the count pops when it changes, and bars move while your app uploads. None plays for people who've asked their device for reduced motion, and Motion off shows everything at once.

• Uploading outside a form. Microsoft documents the classic Attachments control's upload inside a form only. Makers use it outside one, as this card does; try adding files in Preview (F5) and in your published app before you rely on it.
• File sizes. The Attachments control doesn't give a file's size before it's saved, so added files show no size. It refuses a file over MaxFileSize itself, with its own message. Power Apps' 1 MB is 1,000,000 bytes.
• Types are checked by the extension in the file's name, not its contents. Keep checking files where you store them.
• One card per screen. "Access app scope" is on, so the added files are kept in the app's collections colLcsAttachStaged, colLcsAttachRemoved and colLcsAttachPayload, and two cards on one screen would share them. Paste the component into the app itself, not into a component library, where app scope isn't available.
• On Power Apps Mobile, people add files one at a time (a limit of the Attachments control).
• The card keeps room for three added files; more scroll in that space. Rows are 64 pixels each; with MaxHeight 0 the attached files grow the card, so put it on a scrollable screen when files are many, or set MaxHeight.
• Launch opens the link in a new tab; in the mobile app it opens the device's browser. There's no in-app preview.

• 0.2.0: adds files. A tonal drop card (choose or drag) with the accepted types and limits, added files with their status and reason, attached files marked for removal with Undo, Cancel and one Upload button, OnSave(Ready, Removed), OnCancel(Discarded), IsUploading, ReadyCount, StagedFiles, StagedFilesData, RemovedKeys and HasChanges. ShowRemove, OnRemove, Select, ClearSelection and SelectedKey are gone: removing is saved with Upload.
• 0.1.0: first version: rows from a table, the typed icon, the details, Open and Remove, the empty state, OnOpen, OnRemove, Select, ClearSelection, the outputs, light and dark, the icon motion.