Implementing Ui Bundle File Upload

Name: Implementing Ui Bundle File Upload
Author: forcedotcom

forcedotcom/sf-skills

2.1k installs
763 repo stars
Updated July 24, 2026
forcedotcom/sf-skills

implementing-ui-bundle-file-upload is a Salesforce UI bundle skill for upload() APIs with progress and ContentVersion linking.

About

The implementing-ui-bundle-file-upload skill guides React UI bundle file uploads using @salesforce/ui-bundle-template-feature-react-file-upload programmatic APIs only, not prebuilt components. Install the package when uiBundles/*/src exists and the task involves attaching or dropping files. Pattern A uploads files and returns contentBodyId without record linking for deferred attachment flows. Pattern B passes recordId to create ContentVersion records linked immediately to existing Accounts, Opportunities, or Cases. Pattern C uploads first, creates the record, then calls createContentVersion to link contentBodyId values after form submission. The upload function exposes onProgress callbacks for custom progress UI because FileUpload components and useFileUpload hooks are not exported. Reference demo components illustrate UI ideas but must be rebuilt locally. The skill pairs with Salesforce data access skills for record creation and forbids rolling custom FormData or XHR upload stacks when this API package is available.

API-only package: build custom UI around upload() and onProgress.
Three patterns cover deferred, immediate, and post-create record linking.
Returns contentBodyId and optional contentVersionId per uploaded file.
Explicitly rejects expecting exported FileUpload components or hooks.
Install @salesforce/ui-bundle-template-feature-react-file-upload in UI bundles.

Implementing Ui Bundle File Upload by the numbers

2,112 all-time installs (skills.sh)
+7 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #217 of 2,277 Frontend Development skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

implementing-ui-bundle-file-upload capabilities & compatibility

Capabilities: upload() api with onprogress callbacks · immediate and deferred contentversion linking pa · contentbodyid capture for multi step forms · custom ui guidance without exported components · package install and ui bundle activation rules
Use cases: frontend · api development · ui design

From the docs

What implementing-ui-bundle-file-upload says it does

ALWAYS use this instead of building file upload from scratch with FormData or XHR

SKILL.md

npx skills add https://github.com/forcedotcom/sf-skills --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](https://skillselion.com/badge/skills/forcedotcom/sf-skills/implementing-ui-bundle-file-upload.svg)](https://skillselion.com/skills/forcedotcom/sf-skills/implementing-ui-bundle-file-upload)

Installs	2.1k
repo stars	★ 763
Security audit	3 / 3 scanners passed
Last updated	July 24, 2026
Repository	forcedotcom/sf-skills ↗

How do I add file upload with progress to a Salesforce React UI bundle?

Add Salesforce UI bundle file upload with progress tracking via upload() APIs and ContentVersion linking patterns.

Who is it for?

uiBundles projects attaching files to Salesforce records with progress tracking.

Skip if: Skip for non-UI-bundle apps or raw FormData uploads when this API package applies.

When should I use this skill?

User adds file upload, attachments, or dropzones under uiBundles/*/src.

What you get

Custom upload UI wired to upload() with correct deferred or immediate ContentVersion linking.

upload() integration
Progress-tracked upload UI

By the numbers

Skill metadata version 1.0
Targets uiBundles/*/src/ directory layout

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

{
  "label": "<INDEX_NAME>",
  "developerName": "<INDEX_NAME>",
  "description": "Hybrid search index on a structured Data Cloud DMO",
  "sourceDmoDeveloperName": "<SOURCE_DMO>__dlm",
  "chunkDmoName": "<INDEX_NAME> chunk",
  "chunkDmoDeveloperName": "<INDEX_NAME>_chunk",
  "vectorDmoName": "<INDEX_NAME> index",
  "vectorDmoDeveloperName": "<INDEX_NAME>_index",
  "searchType": "HYBRID",
  "vectorEmbedding": {
    "vectorEmbeddingRelatedFields": []
  },
  "rankingConfigurations": [],
  "chunkingConfiguration": {
    "fieldLevelConfigurations": [
      {
        "sourceDmoDeveloperName": "<SOURCE_DMO>__dlm",
        "sourceDmoFieldDeveloperName": "<TEXT_FIELD>__c",
        "config": {
          "id": "passage_extraction",
          "userValues": [
            { "id": "max_tokens", "value": "512" },
            { "id": "strip_html", "value": "true" }
          ]
        }
      }
    ]
  },
  "vectorEmbeddingConfiguration": {
    "embeddingModel": {
      "id": "e5_large_v2",
      "userValues": [
        { "id": "dimension", "value": "1024" },
        { "id": "max_token_limit", "value": "512" }
      ]
    },
    "index": {
      "id": "HNSW",
      "userValues": []
    },
    "similarityMetric": "COSINE"
  }
}

{
  "label": "My_kav",
  "developerName": "My_kav",
  "sourceDmoDeveloperName": "ssot__KnowledgeArticleVersion__dlm",
  "chunkDmoName": "My_kav chunk",
  "chunkDmoDeveloperName": "My_kav_chunk",
  "vectorDmoName": "My_kav index",
  "vectorDmoDeveloperName": "My_kav_index",
  "searchType": "VECTOR",
  "vectorEmbedding": {
    "vectorEmbeddingRelatedFields": []
  },
  "chunkingConfiguration": {
    "fieldLevelConfigurations": [
      {
        "sourceDmoDeveloperName": "ssot__KnowledgeArticleVersion__dlm",
        "sourceDmoFieldDeveloperName": "ssot__Name__c",
        "config": {
          "id": "passage_extraction",
          "userValues": [
            { "id": "strip_html", "value": "true" },
            { "id": "max_tokens", "value": "512" }
          ]
        }
      }
    ]
  },
  "vectorEmbeddingConfiguration": {
    "embeddingModel": {
      "id": "e5_large_v2",
      "userValues": [
        { "id": "dimension", "value": "1024" },
        { "id": "max_token_limit", "value": "512" }
      ]
    },
    "index": {
      "id": "HNSW",
      "userValues": []
    },
    "similarityMetric": "COSINE"
  },
  "rankingConfigurations": []
}

data360-query

Query and search workflows for Salesforce Data Cloud.

Use this skill for

quick SQL counts
paginated SQL (sqlv2)
async query lifecycles
table describe
vector search
hybrid search with optional prefilter
search index inspection and lifecycle work

Example requests

"Run a Data Cloud SQL query against unified profiles"
"Describe this Data Cloud table before I write SQL"
"Help me troubleshoot vector search in Data Cloud"
"Run a hybrid search with a prefilter in Data Cloud"
"Create and inspect a search index"

Common commands

sf data360 query sql -o myorg --sql 'SELECT COUNT(*) FROM "ssot__Individual__dlm"' 2>/dev/null
sf data360 query describe -o myorg --table ssot__Individual__dlm 2>/dev/null
sf data360 search-index list -o myorg 2>/dev/null
sf data360 query vector -o myorg --index Knowledge_Index --query "reset password" --limit 5 2>/dev/null
sf data360 query hybrid -o myorg --index Knowledge_Index --query "reset password" --limit 5 2>/dev/null

Example payloads

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

References

SKILL.md
../data360-orchestrate/assets/definitions/search-index.template.json
CREDITS.md

Related skills

Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4k

Vercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k

ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k

Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72

Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9k

Vercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4k

Forks & variants (1)

Implementing Ui Bundle File Upload has 1 known copy in the catalog totaling 1.5k installs. They canonicalize to this original listing.

forcedotcom - 1.5k installs

How it compares

Use implementing-ui-bundle-file-upload for Salesforce UI bundle upload(); use generic React upload patterns only outside uiBundles platform constraints.

FAQ

Are FileUpload React components exported?

No. Only programmatic APIs export; build your own input, dropzone, and progress UI.

When should I omit recordId on upload?

Use Pattern A or C when the target record does not exist yet or linking happens after creation.

What does onProgress provide?

Per-file status and percent progress for custom progress bars during upload.

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

About

Implementing Ui Bundle File Upload by the numbers

implementing-ui-bundle-file-upload capabilities & compatibility

What implementing-ui-bundle-file-upload says it does

Add your badge

How do I add file upload with progress to a Salesforce React UI bundle?

Who is it for?

When should I use this skill?

What you get

By the numbers

Files

data360-query: Data Cloud Retrieve Phase

When This Skill Owns the Task

Required Context to Gather First

Core Operating Rules

Recommended Workflow

1. Classify readiness for retrieve work

2. Choose the smallest correct query shape

3. Use describe before guessing fields

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

5. Reuse curated search-index examples when creating indexes

High-Signal Gotchas

Output Format

References

Credits & Acknowledgments

data360-query

Use this skill for

Example requests

Common commands

Example payloads

References

Related skills

Forks & variants (1)

How it compares

FAQ

Are FileUpload React components exported?

When should I omit recordId on upload?

What does onProgress provide?

Is Implementing Ui Bundle File Upload safe to install?

This week in AI coding