
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-uploadAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.5k |
|---|---|
| repo stars | ★ 763 |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 24, 2026 |
| Repository | forcedotcom/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
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 *orsf 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
sqlv2or 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 --json2. 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/null3. Use describe before guessing fields
sf data360 query describe -o <org> --table ssot__Individual__dlm 2>/dev/null4. 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/null5. Reuse curated search-index examples when creating indexes
Use the phase-owned examples instead of inventing JSON from scratch:
examples/search-indexes/vector-knowledge.jsonexamples/search-indexes/hybrid-structured.json
---
High-Signal Gotchas
- Data Cloud SQL is not SOQL.
- Table names should be double-quoted in SQL.
sqlv2is 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 describeis 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
Credits & Acknowledgments
Primary contributor: Gnanasekaran Thoppae
This skill is part of the *-datacloud family. Shared attribution, upstream source mapping, and maintenance notes live in:
- ../data360-orchestrate/CREDITS.md
- ../data360-orchestrate/UPSTREAM.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/nullExample 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
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.