@salesforce/webapp-template-feature-react-file-upload-experimental 1.90.0 → 1.90.2

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/{api → features/fileupload/api}/fileUpload.ts

@@ -144,3 +144,156 @@ export async function getCurrentUserId(): Promise<string> {
 	}
 	return user.id;
 }
+
+/**
+ * Upload status for a single file
+ */
+export type UploadStatus = "pending" | "uploading" | "processing" | "success" | "error";
+
+/**
+ * Progress callback for file upload
+ */
+export interface FileUploadProgress {
+	fileName: string;
+	status: UploadStatus;
+	progress: number; // 0-100 for uploading, 0 for other states
+	error?: string;
+}
+
+/**
+ * Result of a file upload
+ */
+export interface FileUploadResult {
+	fileName: string;
+	size: number;
+	contentBodyId: string;
+	contentVersionId?: string;
+}
+
+/**
+ * Options for the upload API
+ */
+export interface UploadOptions {
+	/** Files to upload */
+	files: File[];
+	/** Record ID to link files to (FirstPublishLocationId). If null/undefined, ContentVersion is not created. */
+	recordId?: string | null;
+	/** Callback for upload progress of each file */
+	onProgress?: (progress: FileUploadProgress) => void;
+	/** Optional abort signal to cancel all uploads */
+	signal?: AbortSignal;
+}
+
+/**
+ * Unified upload API that combines all steps:
+ * 1. Get upload config (once for all files)
+ * 2. Upload each file with progress tracking
+ * 3. Create ContentVersion (if recordId is provided)
+ *
+ * Returns array of upload results with file info and IDs.
+ * Calls onProgress for each file as it progresses through stages.
+ *
+ * @example
+ * ```tsx
+ * const results = await upload({
+ *   files: [file1, file2],
+ *   recordId: accountId,
+ *   onProgress: (progress) => {
+ *     console.log(`${progress.fileName}: ${progress.status} ${progress.progress}%`);
+ *   }
+ * });
+ * ```
+ */
+export async function upload(options: UploadOptions): Promise<FileUploadResult[]> {
+	const { files, recordId, onProgress, signal } = options;
+
+	if (!files || files.length === 0) {
+		return [];
+	}
+
+	// Get upload config once for all files
+	const config = await getUploadConfig();
+
+	const results: FileUploadResult[] = [];
+
+	// Upload each file sequentially (can be made parallel if needed)
+	for (const file of files) {
+		try {
+			// Update status: pending
+			onProgress?.({
+				fileName: file.name,
+				status: "pending",
+				progress: 0,
+			});
+
+			// Update status: uploading
+			onProgress?.({
+				fileName: file.name,
+				status: "uploading",
+				progress: 0,
+			});
+
+			// Upload file with progress tracking
+			const contentBodyId = await uploadToUrl(
+				file,
+				config.token,
+				config.uploadUrl,
+				(percent) => {
+					onProgress?.({
+						fileName: file.name,
+						status: "uploading",
+						progress: percent,
+					});
+				},
+				signal,
+			);
+
+			// Create ContentVersion if recordId is provided
+			let contentVersionId: string | undefined;
+			if (recordId) {
+				// Update status: processing (creating ContentVersion)
+				onProgress?.({
+					fileName: file.name,
+					status: "processing",
+					progress: 0,
+				});
+
+				contentVersionId = await createContentVersion(file, contentBodyId, recordId);
+			}
+
+			// Update status: success
+			onProgress?.({
+				fileName: file.name,
+				status: "success",
+				progress: 100,
+			});
+
+			results.push({
+				fileName: file.name,
+				size: file.size,
+				contentBodyId,
+				contentVersionId,
+			});
+		} catch (error) {
+			// Update status: error
+			const errorMessage = error instanceof Error ? error.message : String(error);
+			onProgress?.({
+				fileName: file.name,
+				status: "error",
+				progress: 0,
+				error: errorMessage,
+			});
+
+			// Optionally continue with other files or rethrow
+			// For now, we'll continue with remaining files
+			results.push({
+				fileName: file.name,
+				size: file.size,
+				contentBodyId: "",
+				contentVersionId: undefined,
+			});
+		}
+	}
+
+	return results;
+}

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/{components → features/fileupload/components}/FileUploadDialog.tsx

@@ -1,4 +1,4 @@
-import { Button } from "./ui/button";
+import { Button } from "../../../components/ui/button";
 import {
 	Dialog,
 	DialogClose,
@@ -6,7 +6,7 @@ import {
 	DialogFooter,
 	DialogHeader,
 	DialogTitle,
-} from "./ui/dialog";
+} from "../../../components/ui/dialog";
 import { FileUploadFileItem } from "./FileUploadFileItem";
 import { formatUploadSummary } from "../utils/fileUploadUtils";
 import { LABELS } from "../utils/labels";

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/{components → features/fileupload/components}/FileUploadFileItem.tsx

@@ -1,4 +1,4 @@
-import { Button } from "./ui/button";
+import { Button } from "../../../components/ui/button";
 import { FileTypeIcon, IconImageClose, SuccessIcon } from "./FileUploadIcons";
 import {
 	formatFileSize,

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/index.ts

@@ -1,59 +1,45 @@
 /**
- * feature-react-file-upload – File upload component
+ * feature-react-file-upload – File upload API
  *
- * Provides a React file upload experience with drag-and-drop, progress tracking,
- * and Salesforce ContentVersion integration. Supports single or multiple files,
- * optional record linking (FirstPublishLocationId), and custom accept filters.
+ * Provides programmatic APIs for file upload with progress tracking
+ * and Salesforce ContentVersion integration.
  *
  * @packageDocumentation
  */
 
 /**
- * File upload component. Renders a drop zone for selecting files, a modal dialog
- * showing upload progress, and a list of successfully uploaded files. Supports
- * click-to-select and drag-and-drop.
+ * Unified upload API that handles the complete upload flow:
+ * 1. Gets upload config
+ * 2. Uploads files with progress tracking
+ * 3. Creates ContentVersion records (if recordId provided)
  *
- * @example
- * ```tsx
- * <FileUpload
- *   accept="image/*"
- *   multiple
- *   recordId={accountId}
- *   onUploadComplete={(files) => console.log('Uploaded:', files)}
- * />
- * ```
- */
-export { FileUpload } from "./components/FileUpload";
-
-/**
- * Props for the FileUpload component.
- *
- * @see FileUpload
- */
-export type { FileUploadProps } from "./components/FileUpload";
-
-/**
- * Hook that manages file upload state and logic: config fetch, upload to URL,
- * and ContentVersion creation. Use for custom upload UIs or with the FileUpload
- * component. Returns fileItems, getInputProps, getDropZoneProps, and helpers
- * for progress, cancel, and reset.
+ * Returns array of results with file names, sizes, and IDs.
+ * Provides progress callbacks for each file through all stages.
  *
  * @example
  * ```tsx
- * const { fileItems, getDropZoneProps, openFilePicker } = useFileUpload({
- *   accept: '.pdf',
- *   onUploadComplete: (files) => handleComplete(files),
+ * const results = await upload({
+ *   files: [file1, file2],
+ *   recordId: accountId,
+ *   onProgress: (progress) => {
+ *     console.log(`${progress.fileName}: ${progress.status} ${progress.progress}%`);
+ *   }
  * });
  * ```
  */
-export { useFileUpload } from "./hooks/useFileUpload";
+export { upload } from "./features/fileupload/api/fileUpload";
 
 /**
- * Options for the useFileUpload hook.
+ * Options for the upload API.
  *
- * @see useFileUpload
+ * @see upload
  */
-export type { UseFileUploadOptions } from "./hooks/useFileUpload";
+export type {
+	UploadOptions,
+	FileUploadResult,
+	FileUploadProgress,
+	UploadStatus,
+} from "./features/fileupload/api/fileUpload";
 
 /**
  * Create ContentVersion record programmatically. Useful when you need to create
@@ -71,4 +57,4 @@ export type { UseFileUploadOptions } from "./hooks/useFileUpload";
  * const contentVersionId = await createContentVersion(file, contentBodyId, recordId);
  * ```
  */
-export { createContentVersion, getCurrentUserId } from "./api/fileUpload";
+export { createContentVersion, getCurrentUserId } from "./features/fileupload/api/fileUpload";

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/routes.tsx

@@ -2,7 +2,7 @@ import type { RouteObject } from 'react-router';
 import AppLayout from './appLayout';
 import NotFound from './pages/NotFound';
 import { Navigate } from "react-router";
-import UploadTest from "./pages/UploadTest";
+import UploadTest from "./features/fileupload/pages/UploadTest";
 
 export const routes: RouteObject[] = [
   {
@@ -20,7 +20,7 @@ export const routes: RouteObject[] = [
       {
         path: "upload-test",
         element: <UploadTest />,
-        handle: { showInNavigation: true, label: "Upload Test" }
+        handle: { showInNavigation: true, label: "Upload Test (Component)" }
       }
     ]
   }

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.90.0",
+  "version": "1.90.2",
   "description": "Base SFDX project template",
   "private": true,
   "files": [

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "@salesforce/webapp-template-feature-react-file-upload-experimental",
-  "version": "1.90.0",
+  "version": "1.90.2",
   "description": "File upload feature with a component to upload files to core",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
-  "type": "module",
-  "main": "index.js",
+  "main": "src/force-app/main/default/webapplications/feature-react-file-upload/src/index.ts",
+  "types": "src/force-app/main/default/webapplications/feature-react-file-upload/src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/force-app/main/default/webapplications/feature-react-file-upload/src/index.ts",
+      "import": "./src/force-app/main/default/webapplications/feature-react-file-upload/src/index.ts",
+      "default": "./src/force-app/main/default/webapplications/feature-react-file-upload/src/index.ts"
+    }
+  },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
     "clean": "rm -rf dist"
   },
@@ -26,13 +31,13 @@
       "build:dist-app": {
         "executor": "@salesforce/webapp-template-cli-experimental:build-dist-app"
       },
-      "start": {
+      "dev": {
         "executor": "@salesforce/webapp-template-cli-experimental:dev-server"
       }
     }
   },
   "devDependencies": {
-    "@salesforce/webapp-experimental": "^1.90.0",
+    "@salesforce/webapp-experimental": "^1.90.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "nodemon": "^3.1.0",

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/appLayout.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from "react-router";
+
+export default function AppLayout() {
+	return (
+		<>
+			<Outlet />
+		</>
+	);
+}

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/components/ui/__inherit__button.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+				outline:
+					"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Button({}: React.ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	return <> </>;
+}
+
+export { Button, buttonVariants };

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/components/ui/__inherit__dialog.tsx

@@ -0,0 +1,102 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+
+import { Button } from "./__inherit__button";
+import { XIcon } from "lucide-react";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+	return <DialogPrimitive.Overlay data-slot="dialog-overlay" {...props} />;
+}
+
+function DialogContent({
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+	showCloseButton?: boolean;
+}) {
+	return (
+		<DialogPortal>
+			<DialogOverlay />
+			<DialogPrimitive.Content data-slot="dialog-content" {...props}>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close data-slot="dialog-close" asChild>
+						<Button variant="ghost" className="absolute top-2 right-2" size="icon">
+							<XIcon />
+							<span className="sr-only">Close</span>
+						</Button>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="dialog-header" {...props} />;
+}
+
+function DialogFooter({
+	className,
+	showCloseButton = false,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	showCloseButton?: boolean;
+}) {
+	return (
+		<div data-slot="dialog-footer" {...props}>
+			{children}
+			{showCloseButton && (
+				<DialogPrimitive.Close asChild>
+					<Button variant="outline">Close</Button>
+				</DialogPrimitive.Close>
+			)}
+		</div>
+	);
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return <DialogPrimitive.Title data-slot="dialog-title" {...props} />;
+}
+
+function DialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return <DialogPrimitive.Description data-slot="dialog-description" {...props} />;
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};