MUST activate when the project contains a uiBundles/*/src/ directory and the task involves uploading, attaching, or dropping files. Use this skill when adding file upload functionality to a UI bundle app. Provides progress tracking and Salesforce ContentVersion integration. This feature provides programmatic APIs ONLY — build custom UI using the upload() API. ALWAYS use this instead of building file upload from scratch with FormData or XHR.
A workflow skill for adding file upload functionality to a Salesforce React UI bundle (a project containing a uiBundles/*/src/ directory). It activates when the task involves uploading, attaching, or dropping files, and it integrates progress tracking with Salesforce ContentVersion records. A defining constraint is that the underlying package, @salesforce/ui-bundle-template-feature-react-file-upload, exposes programmatic APIs only — it does not export pre-built React components, hooks like useFileUpload, or dropzone components. Developers build their own UI (file input, dropzone, progress bars) on top of the provided upload() function and track progress through its onProgress callback, and the skill is meant to be used instead of building uploads from scratch with FormData or XHR.
The skill documents three upload patterns. Pattern A is a basic upload with no record linking, returning a contentBodyId for each file while contentVersionId stays undefined, useful for multi-step forms where the record does not exist yet. Pattern B uploads and immediately links files to an existing record by passing a recordId, creating ContentVersion records and returning both contentBodyId and contentVersionId. Pattern C handles deferred linking for record-creation flows: upload files first, create the record, then call createContentVersion for each file to attach it to the new record ID. A special case links files to the current user via getCurrentUserId.
Progress is reported through onProgress, which fires repeatedly as a file moves through pending, uploading (0-100%), processing, success, and error states, and the skill urges always showing file name, status, a progress bar during uploading, and any error message. Uploads can be cancelled with an AbortController passed as signal. The documented API surface includes upload(options) with files, optional recordId, onProgress, and signal, returning a Promise of FileUploadResult objects, alongside createContentVersion and getCurrentUserId.
No. It is an API-only package — it does not export components like <FileUpload />, hooks like useFileUpload, or dropzone components. You build your own UI using the upload() function, with the source's reference components serving only as examples.
Use Pattern B by passing a recordId to upload(); it creates ContentVersion records and returns both contentBodyId and contentVersionId. For records that do not exist yet, use Pattern C and call createContentVersion after the record is created.
Through the onProgress callback, which fires multiple times per file as it moves through pending, uploading (0-100%), processing, success, and error. The skill recommends showing the file name, status, a progress bar while uploading, and any error message.
Yes. Create an AbortController and pass its signal to upload(); calling abort() cancels the upload, which then rejects and can be caught for error handling.
A Promise resolving to an array of FileUploadResult objects, each with fileName, size, a contentBodyId (always available), and a contentVersionId that is present only when a recordId was provided.
Quick Setup:
.claude/skills/Repository
forcedotcom/sf-skills