implementing-ui-bundle-file-upload

Implements file uploads in Salesforce UI bundle React apps using the upload() API with progress tracking.

1|Updated May 7, 2026
One-click install
npx skills add https://github.com/amanpraaj/sf-skill-hub --skill implementing-ui-bundle-file-upload-amanpraaj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: implementing-ui-bundle-file-upload
Source: https://github.com/amanpraaj/sf-skill-hub/tree/main/skills/salesforce/implementing-ui-bundle-file-upload
Command: npx skills add https://github.com/amanpraaj/sf-skill-hub --skill implementing-ui-bundle-file-upload-amanpraaj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @salesforce/ui-bundle-template-feature-react-file-upload, @salesforce/ui-bundle, @salesforce/sdk-data.

What problem does it solve? Adding file upload functionality to a Salesforce UI bundle React app normally requires hand-writing XHR or FormData logic, wiring progress callbacks, and manually creating ContentVersion records. This Skill provides a structured workflow for using the official @salesforce/ui-bundle-template-feature-react-file-upload package instead of building uploads from scratch. ## Core Features & Use Cases - Three upload patterns: basic upload returning contentBodyId, upload with immediate record linking via recordId, and deferred linking after record creation using createContentVersion. - Progress tracking and cancellation: onProgress callbacks report pending, uploading, processing, success, and error states, with AbortController support for cancelling uploads. - Custom UI guidance: the package exports APIs only, so the Skill shows how to build file inputs, dropzones, and progress bars yourself. - Use Case: A user building a "create Account with attachments" form uploads files first, creates the record, then links the uploaded files to the new record ID. ## Quick Start Ask the agent to add file upload with progress tracking to your UI bundle app using the Salesforce file upload feature package, and specify whether files should link to an existing record or be linked later.

Frequently Asked Questions about implementing-ui-bundle-file-upload

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add file upload to a Salesforce UI bundle React app?▼

Install @salesforce/ui-bundle-template-feature-react-file-upload and call the upload() function with your files and an onProgress callback. The package provides APIs only, so you build your own file input, dropzone, and progress bar UI around it.

How do I upload files and attach them to a Salesforce record?▼

Pass the existing record's ID as the recordId option to upload(). The API creates a ContentVersion record linked to that record, and each result includes both a contentBodyId and a contentVersionId.

Does the file upload package export React components or hooks?▼

No, the package exports programmatic APIs only, such as upload(), createContentVersion(), and getCurrentUserId(). Components like FileUpload and hooks like useFileUpload exist in the source as reference examples but are not exported for import.

How do I upload files before the record exists in Salesforce?▼

Call upload() without a recordId to get contentBodyId values, create the record, then call createContentVersion() with each contentBodyId and the new record ID. This deferred linking pattern suits create-record-with-attachments forms.

Why is my Salesforce file upload failing with a CORS error?▼

CORS errors occur when the UI bundle is not properly deployed to Salesforce or not running on localhost, or when the org does not allow the origin. Verify deployment and check the org's CORS settings for the requesting origin.

How do I track and cancel file upload progress in React?▼

Provide an onProgress callback to upload() that receives status and percentage updates per file, and store them in React state for progress bars. Pass an AbortController signal to upload() and call abort() to cancel in-flight uploads.