skills.rest
padjei
padjeiCOMMUNITY
Explore all skills by this author →
GitHub

experience-ui-bundle-file-upload-generate

Implements file upload with progress tracking and Salesforce ContentVersion linking in React UI bundles.

Updated Jul 2, 2026
Search Tags:#react#progress tracking#file upload#drag and drop#salesforce#contentversion#ui bundle
One-click install
npx skills add https://github.com/padjei/SF_Build --skill experience-ui-bundle-file-upload-generate-padjei
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: experience-ui-bundle-file-upload-generate
Source: https://github.com/padjei/SF_Build/tree/main/.claude/skills/experience-ui-bundle-file-upload-generate
Command: npx skills add https://github.com/padjei/SF_Build --skill experience-ui-bundle-file-upload-generate-padjei

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Adding file upload functionality to Salesforce UI bundle apps normally requires hand-writing XHR or FormData logic, progress tracking, and ContentVersion record creation. This Skill provides the correct workflow for using the official upload API package instead of building upload plumbing from scratch. ## Core Features & Use Cases - Three Upload Patterns: Basic upload returning contentBodyId, upload with immediate record linking via ContentVersion, and deferred linking after record creation. - Progress Tracking: Uses the onProgress callback with pending, uploading, processing, success, and error statuses to drive custom progress bars and dialogs. - Cancellation and User Linking: Supports AbortController-based cancellation and uploading files to the current user's profile via getCurrentUserId. - Use Case: A user building a React UI bundle form that attaches PDFs to a new Opportunity record uploads files first, creates the record, then links each file using createContentVersion. ## Quick Start Add file upload with progress tracking to my UI bundle app and link the uploaded files to an existing Salesforce record.

Frequently Asked Questions about experience-ui-bundle-file-upload-generate

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 UI around it.

How do I attach uploaded files to a Salesforce record?▼

Pass the recordId option to upload() and it creates a ContentVersion record linked to that record, returning a contentVersionId. For records created later, upload first without recordId, then call createContentVersion with the contentBodyId and new record ID.

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

No, the package exports programmatic APIs only, not components like FileUpload or hooks like useFileUpload. Reference implementations exist in the source for demonstration, but you must build your own UI using the upload() API.

How do I track file upload progress in React?▼

Provide an onProgress callback to upload() that receives FileUploadProgress objects with fileName, status, and progress percentage. Store these in React state keyed by file name and render a progress bar during the uploading status.

Can users cancel an in-progress file upload?▼

Yes, create an AbortController and pass its signal to the upload() options. Calling abortController.abort() cancels the upload, and the promise rejects with an error you can catch and handle.

Why is ContentVersion not created after my file upload?▼

ContentVersion is only created when recordId is provided to upload(). Verify the record ID is valid, the record exists in the org, and the user has permission to create ContentVersion records.

Related Skills

Explore More Software Engineering Skills→
padjeipadjei

experience-ui-bundle-metadata-generate

Scaffolds Salesforce UI bundles and configures ui-bundle.json, meta XML, and CSP Trusted Sites.

Community
Intermediate
padjeipadjei

experience-ui-bundle-file-upload-generate

Implements file upload with progress tracking and Salesforce ContentVersion linking in React UI bundles.

Community
Intermediate
forcedotcomforcedotcom
803

implementing-ui-bundle-file-upload

Upload files from React UI bundles to Salesforce with progress tracking.

Official
Intermediate
angryracoonangryracoon

experience-ui-bundle-file-upload-generate

Generate Salesforce UI bundle file upload flows with progress tracking and record linking.

Community
Intermediate