Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
forcedotcom avatar

Implementing Ui Bundle File Upload

  • 1.5k installs
  • 763 repo stars
  • Updated July 24, 2026
  • forcedotcom/afv-library

This is a copy of implementing-ui-bundle-file-upload by forcedotcom - installs and ranking accrue to the original listing.

implementing-ui-bundle-file-upload is a Claude Code workflow skill that adds secure file upload with progress tracking to Salesforce UI bundle React apps using ContentVersion integration APIs instead of custom FormData o

About

implementing-ui-bundle-file-upload is a version 1.0 workflow skill from forcedotcom/afv-library for Salesforce UI bundle React applications. It must activate when a project contains uiBundles/*/src/ and the task involves uploading, attaching, or dropping files. The skill provides programmatic upload() APIs with progress tracking and Salesforce ContentVersion integration only—developers build custom UI atop the API rather than using prebuilt widgets. It explicitly replaces hand-rolled FormData or XHR upload code. Follow the workflow when adding drag-drop or attachment flows to Lightning UI bundle apps while keeping Salesforce content storage compliance.

  • Exports upload() API with built-in progress tracking and Salesforce ContentVersion integration
  • API-only design: forces developers to build their own custom UI components and dropzones
  • Activates automatically when a uiBundles/*/src/ directory is present and file upload is mentioned
  • Prevents common mistakes of using raw FormData or XHR for Salesforce uploads
  • Includes reference components in source as learning examples but not as importable modules

Implementing Ui Bundle File Upload by the numbers

  • 1,475 all-time installs (skills.sh)
  • +1 installs in the week ending Jul 28, 2026 (Skillselion tracking)
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/forcedotcom/afv-library --skill implementing-ui-bundle-file-upload

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs1.5k
repo stars763
Security audit3 / 3 scanners passed
Last updatedJuly 24, 2026
Repositoryforcedotcom/afv-library

How do you add file upload to Salesforce UI bundles?

Add secure file upload with progress tracking to a Salesforce UI bundle React app without reinventing the integration.

Who is it for?

Salesforce developers building React UI bundle apps under uiBundles/*/src who need ContentVersion-backed uploads with progress events.

Skip if: Projects without uiBundles directories, non-Salesforce stacks, or teams wanting a drop-in upload widget without custom React UI.

When should I use this skill?

Project has uiBundles/*/src and user needs file upload, attachment, or drag-drop with Salesforce ContentVersion integration.

What you get

File upload integration using upload() API, progress callbacks, and ContentVersion attachment wiring.

  • upload() API integration with progress tracking
  • ContentVersion file attachment wiring

By the numbers

  • Skill metadata version 1.0
  • Targets uiBundles/*/src directory structure

Files

SKILL.mdMarkdownGitHub ↗

data360-query: Data Cloud Retrieve Phase

Use this skill when the user needs query, search, and metadata introspection for Data Cloud: sync SQL, paginated SQL, async query workflows, table describe, vector search, hybrid search, or search index operations.

When This Skill Owns the Task

Use data360-query when the work involves:

  • sf data360 query *
  • sf data360 search-index *
  • sf data360 metadata *
  • sf data360 profile * or sf data360 insight * inspection
  • understanding Data Cloud SQL results or query shape

Delegate elsewhere when the user is:

  • writing standard CRM SOQL only → platform-soql-query
  • designing segment or calculated insight assets → data360-segment
  • analyzing STDM/session tracing/parquet telemetry → agentforce-observe

---

Required Context to Gather First

Ask for or infer:

  • target org alias
  • whether the user needs quick count, medium result set, large export, schema inspection, or semantic search
  • table/index name if known
  • whether the task is read-only SQL or search-index lifecycle management

---

Core Operating Rules

  • Treat Data Cloud SQL as its own query language, not SOQL.
  • Run the shared readiness classifier before relying on query/search surfaces: node ../data360-orchestrate/scripts/diagnose-org.mjs -o <org> --phase retrieve --json.
  • Use describe before guessing columns.
  • Prefer sqlv2 or async query flows for larger result sets.
  • Use vector search or hybrid search only when the search index lifecycle is healthy.
  • Keep STDM/parquet/session-tracing workflows out of this skill family.

---

Recommended Workflow

1. Classify readiness for retrieve work

node ../data360-orchestrate/scripts/diagnose-org.mjs -o <org> --phase retrieve --json
# optional query-plane probe, only with a real table name
node ../data360-orchestrate/scripts/diagnose-org.mjs -o <org> --phase retrieve --describe-table MyDMO__dlm --json

2. Choose the smallest correct query shape

sf data360 query sql -o <org> --sql 'SELECT COUNT(*) FROM "ssot__Individual__dlm"' 2>/dev/null
sf data360 query sqlv2 -o <org> --sql 'SELECT * FROM "ssot__Individual__dlm"' 2>/dev/null
sf data360 query async-create -o <org> --sql 'SELECT * FROM "ssot__Individual__dlm"' 2>/dev/null

3. Use describe before guessing fields

sf data360 query describe -o <org> --table ssot__Individual__dlm 2>/dev/null

4. Use vector or hybrid search only when an index exists

sf data360 search-index list -o <org> 2>/dev/null
sf data360 query vector -o <org> --index Knowledge_Index --query "reset password" --limit 5 2>/dev/null
sf data360 query hybrid -o <org> --index Knowledge_Index --query "reset password" --limit 5 2>/dev/null
sf data360 query hybrid -o <org> --index Insurance_Index --query "weather damage coverage" --prefilter "Type_of_Insurance__c='Home'" --limit 10 2>/dev/null

5. Reuse curated search-index examples when creating indexes

Use the phase-owned examples instead of inventing JSON from scratch:

  • examples/search-indexes/vector-knowledge.json
  • examples/search-indexes/hybrid-structured.json

---

High-Signal Gotchas

  • Data Cloud SQL is not SOQL.
  • Table names should be double-quoted in SQL.
  • sqlv2 is better than ad hoc OFFSET paging for medium result sets.
  • async query is preferable for large results.
  • search-index operations and vector/hybrid queries depend on the index lifecycle being healthy.
  • Hybrid search can use --prefilter, but only on fields configured as prefilter-capable when the search index was created.
  • HNSW index parameters are typically read-only on create; leave userValues: [] unless the platform explicitly documents otherwise.
  • query describe is not a universal tenant probe; only run it with a known DMO or DLO table after broader readiness has been confirmed.

---

Output Format

Retrieve task: <sql / sqlv2 / async / describe / vector / search-index>
Target org: <alias>
Target object: <table or index>
Commands: <key commands run>
Verification: <query rows / schema / status>
Next step: <segment / harmonize / follow-up>

---

References

  • README.md
  • examples/search-indexes/vector-knowledge.json
  • examples/search-indexes/hybrid-structured.json
  • ../data360-orchestrate/assets/definitions/search-index.template.json
  • ../data360-orchestrate/references/plugin-setup.md
  • ../data360-orchestrate/references/feature-readiness.md

Related skills

How it compares

Use this skill instead of generic React upload tutorials when files must land in Salesforce ContentVersion from a UI bundle app.

FAQ

Does implementing-ui-bundle-file-upload include ready-made upload UI?

implementing-ui-bundle-file-upload provides programmatic APIs only, including upload() with progress tracking and ContentVersion integration. Developers must build custom React UI in uiBundles/*/src rather than receiving a prebuilt upload widget.

When must implementing-ui-bundle-file-upload activate?

The skill must activate when the project contains uiBundles/*/src and the task involves uploading, attaching, or dropping files. Version 1.0 directs agents to use its APIs instead of building FormData or XHR upload from scratch.

Is Implementing Ui Bundle File Upload safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Frontend Developmentfrontendintegrations

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.