experience-ui-bundle-file-upload-generate

File Upload API (workflow)

When the user wants file upload functionality in a React UI bundle, follow this workflow. This feature provides APIs only — you must build the UI components yourself using the provided APIs.

CRITICAL: This is an API-only package

The package exports programmatic APIs, not React components or hooks. You will:

• Use the upload() function to handle file uploads with progress tracking
• Build your own custom UI (file input, dropzone, progress bars, etc.)
• Track upload progress through the onProgress callback

Do NOT:

• Expect pre-built components like <FileUpload /> — they are not exported
• Try to import React hooks like useFileUpload — they are not exported
• Look for dropzone components — they are not exported

The source code contains reference components for demonstration, but they are not available as imports. Use them as examples to build your own UI.

1. Install the package

npm install @salesforce/ui-bundle-template-feature-react-file-upload

Dependencies are automatically installed:

• @salesforce/ui-bundle (API client)
• @salesforce/platform-sdk (data SDK; the old @salesforce/sdk-data name is dead — see the experience-ui-bundle-salesforce-data-access skill)

2. Understand the three upload patterns

Pattern A: Basic upload (no record linking)

Upload files to Salesforce and get back contentBodyId for each file. No ContentVersion record is created.

When to use:

• User wants to upload files first, then create/link them to a record later
• Building a multi-step form where the record doesn't exist yet
• Deferred record linking scenarios

import { upload } from "@salesforce/ui-bundle-template-feature-react-file-upload";

const results = await upload({
  files: [file1, file2],
  onProgress: (progress) => {
    console.log(`${progress.fileName}: ${progress.status} - ${progress.progress}%`);
  },
});

// results[0].contentBodyId: "069..." (always available)
// results[0].contentVersionId: undefined (no record linked)