@salesforce/webapp-template-feature-react-file-upload-experimental 1.60.0 → 1.60.2

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

@@ -1,25 +1,12 @@
-import { FileUpload } from "../components/FileUpload";
-
-/**
- * Home page for testing the file-upload feature standalone.
- * Renders FileUpload for dialog-based file upload with progress.
- */
 export default function Home() {
-	return (
-		<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-16">
-			<section>
-				<h2 className="text-2xl font-bold text-gray-900 mb-2">File Upload (Dialog + Progress)</h2>
-				<p className="text-gray-600 mb-8">
-					Choose files to open a dialog showing upload status with progress bar for each file.
-				</p>
-				<FileUpload
-					multiple
-					onUploadComplete={(files) => {
-						// eslint-disable-next-line no-console
-						console.log("Uploaded files:", files);
-					}}
-				/>
-			</section>
-		</div>
-	);
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">Home</h1>
+        <p className="text-lg text-gray-600 mb-8">
+          Welcome to your React application.
+        </p>
+      </div>
+    </div>
+  );
 }

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

@@ -0,0 +1,56 @@
+import { FileUpload } from "../components/FileUpload";
+import { createContentVersion, getCurrentUserId } from "../api/fileUpload";
+
+/**
+ * Upload test page for testing the file-upload feature standalone.
+ * Renders FileUpload for dialog-based file upload with progress.
+ * Demonstrates manual ContentVersion creation after file upload.
+ */
+export default function UploadTest() {
+	const handleUploadComplete = async (
+		files: { name: string; size: number; contentBodyId: string; contentVersionId?: string }[],
+	) => {
+		// eslint-disable-next-line no-console
+		console.log("Uploaded files:", JSON.stringify(files, null, 2));
+
+		try {
+			const userId = await getCurrentUserId();
+			// eslint-disable-next-line no-console
+			console.log("Current user ID:", userId);
+
+			for (const uploadedFile of files) {
+				// Create a File object from the uploaded file info (for API signature)
+				const file = new File([""], uploadedFile.name);
+				const contentVersionId = await createContentVersion(
+					file,
+					uploadedFile.contentBodyId,
+					userId,
+				);
+				// eslint-disable-next-line no-console
+				console.log(`Created ContentVersion for ${uploadedFile.name}:`, contentVersionId);
+			}
+		} catch (error) {
+			// eslint-disable-next-line no-console
+			console.error("Error creating ContentVersion:", error);
+		}
+	};
+
+	return (
+		<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-16">
+			<section>
+				<h2 className="text-2xl font-bold text-gray-900 mb-2">File Upload (Dialog + Progress)</h2>
+				<p className="text-gray-600 mb-8">
+					Choose files to open a dialog showing upload status with progress bar for each file.
+					ContentVersion is created manually after upload using current user ID.
+				</p>
+				<FileUpload
+					multiple
+					accept="image/jpeg,.jpg,.jpeg,application/pdf,.pdf"
+					maxFileSize={50}
+					formatHint="JPEG and PDF formats, up to 50MB"
+					onUploadComplete={handleUploadComplete}
+				/>
+			</section>
+		</div>
+	);
+}

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

@@ -1,7 +1,8 @@
 import type { RouteObject } from 'react-router';
 import AppLayout from './appLayout';
-import Home from './pages/Home';
 import NotFound from './pages/NotFound';
+import { Navigate } from "react-router";
+import UploadTest from "./pages/UploadTest";
 
 export const routes: RouteObject[] = [
   {
@@ -10,12 +11,16 @@ export const routes: RouteObject[] = [
     children: [
       {
         index: true,
-        element: <Home />,
-        handle: { showInNavigation: true, label: "Home" }
+        element: <Navigate to="/upload-test" replace />
       },
       {
         path: '*',
         element: <NotFound />
+      },
+      {
+        path: "upload-test",
+        element: <UploadTest />,
+        handle: { showInNavigation: true, label: "Upload Test" }
       }
     ]
   }

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

@@ -16,11 +16,13 @@ export interface FileUploadItem {
 	state: UploadState;
 	progress: number;
 	error?: string;
+	contentBodyId?: string;
 	contentVersionId?: string;
 }
 
 export interface UploadedFile {
 	name: string;
 	size: number;
+	contentBodyId: string;
 	contentVersionId?: string;
 }

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

@@ -7,8 +7,18 @@ import type { UploadState } from "../types/fileUpload";
 /** Maximum allowed file size: 2 GB */
 export const MAX_FILE_SIZE_BYTES = 2 * 1024 * 1024 * 1024;
 
-export function isFileTooLarge(file: File): boolean {
-	return file.size > MAX_FILE_SIZE_BYTES;
+/** Convert megabytes to bytes */
+export function bytesFromMB(mb: number): number {
+	return mb * 1024 * 1024;
+}
+
+/**
+ * Check if file exceeds size limit.
+ * @param file - File to check
+ * @param maxBytes - Max size in bytes. Defaults to MAX_FILE_SIZE_BYTES when omitted.
+ */
+export function isFileTooLarge(file: File, maxBytes: number = MAX_FILE_SIZE_BYTES): boolean {
+	return file.size > maxBytes;
 }
 
 const UPLOADING_STATES: UploadState[] = ["loading_config", "uploading", "creating_record"];

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

@@ -4,6 +4,8 @@ export const LABELS = {
 	uploadFiles: "Upload Files",
 	dropFilesHere: "Drop files here",
 	orDropFiles: "Or drop files",
+	chooseFileOrDrop: "Choose a file or drag & drop for reference here.",
+	formatHint: "JPEG, PNG, PDF, and MP4 formats, up to 50MB",
 	uploadFilesDialogTitle: "Upload Files",
 	done: "Done",
 	cancelled: "Cancelled",

package/dist/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-feature-react-file-upload-experimental",
-  "version": "1.60.0",
+  "version": "1.60.2",
   "description": "File upload feature with a component to upload files to core",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -41,7 +41,7 @@
     }
   },
   "devDependencies": {
-    "@salesforce/webapp-experimental": "^1.60.0",
+    "@salesforce/webapp-experimental": "^1.60.2",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "nodemon": "^3.1.0",
@@ -49,5 +49,5 @@
     "react-router": "^7.10.1",
     "vite": "^7.3.1"
   },
-  "gitHead": "c8b46bfc786c8d2c3e04bf8a179fc201a8e6a3c5"
+  "gitHead": "abc41ea9a3be79240ce212be95208320d197d14a"
 }

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/api/fileUpload.ts

@@ -3,16 +3,8 @@
  */
 
 import { createRecord, getCurrentUser } from "@salesforce/webapp-experimental/api";
-import { createDataSDK, type DataSDK } from "@salesforce/sdk-data";
 
-// Lazy-initialized SDK instance
-let sdkInstance: DataSDK | null = null;
-async function getSDK() {
-	if (!sdkInstance) {
-		sdkInstance = await createDataSDK();
-	}
-	return sdkInstance;
-}
+import { getDataSDK } from "@salesforce/sdk-data";
 
 declare const __SF_API_VERSION__: string;
 
@@ -25,7 +17,7 @@ export interface UploadConfig {
  * Get upload config (token, uploadUrl) from /connect/file/upload/config.
  */
 export async function getUploadConfig(): Promise<UploadConfig> {
-	const sdk = await getSDK();
+	const sdk = await getDataSDK();
 	if (!sdk?.fetch) {
 		throw new Error("Failed to initialize SDK");
 	}
@@ -120,10 +112,10 @@ function parseJsonResponse(text: string): Record<string, unknown> {
 export async function createContentVersion(
 	file: File,
 	contentBodyId: string,
-	userId: string,
+	recordId: string,
 ): Promise<string | undefined> {
 	const fields = {
-		FirstPublishLocationId: userId,
+		FirstPublishLocationId: recordId,
 		Title: fileNameWithoutExtension(file.name),
 		PathOnClient: file.name,
 		ContentBodyId: contentBodyId,

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

@@ -9,13 +9,21 @@ export interface FileUploadProps {
 	accept?: string;
 	/** Whether to allow multiple file selection. Default: false */
 	multiple?: boolean;
-	/** Record Id for FirstPublishLocationId (e.g. Account, Opportunity). When provided, files are linked to this record. Otherwise, current user Id is used. */
+	/** Record Id for FirstPublishLocationId (e.g. Account, Opportunity). When provided, files are linked to this record and ContentVersion is created. When null/undefined, only uploads file and returns contentBodyId without creating ContentVersion. */
 	recordId?: string;
-	/** Called when uploads complete. Receives array of successfully uploaded files with name, size, and contentVersionId. */
-	onUploadComplete?: (files: { name: string; size: number; contentVersionId?: string }[]) => void;
+	/** Called when uploads complete. Receives array of successfully uploaded files with name, size, contentBodyId, and contentVersionId (if ContentVersion was created). */
+	onUploadComplete?: (
+		files: { name: string; size: number; contentBodyId: string; contentVersionId?: string }[],
+	) => void;
 	onUploadError?: (file: File, error: string) => void;
 	/** Optional CSS class for the wrapper div */
 	className?: string;
+	/** Optional CSS class for the drop zone (e.g. "h-full" for flex layouts) */
+	dropZoneClassName?: string;
+	/** Optional format hint for drop zone (e.g. "JPEG, PNG, PDF, and MP4 formats, up to 50MB") */
+	formatHint?: string;
+	/** Maximum file size in MB. Files exceeding this limit are rejected with an error. Omit for default (2 GB). */
+	maxFileSize?: number;
 }
 
 /**
@@ -30,6 +38,9 @@ export function FileUpload({
 	onUploadComplete,
 	onUploadError,
 	className = "",
+	dropZoneClassName = "",
+	formatHint,
+	maxFileSize,
 }: FileUploadProps) {
 	const { fileItems, getInputProps, getDropZoneProps, isDragging, reset, cancelFile, allDone } =
 		useFileUpload({
@@ -38,6 +49,7 @@ export function FileUpload({
 			recordId,
 			onUploadComplete,
 			onUploadError,
+			maxFileSize,
 		});
 
 	const { dialogOpen, uploadedFileNames, handleOpenChange } = useFileUploadDialog({
@@ -45,6 +57,9 @@ export function FileUpload({
 		reset,
 	});
 
+	const effectiveFormatHint =
+		formatHint ?? (maxFileSize != null ? `Up to ${maxFileSize}MB` : undefined);
+
 	const inputProps = getInputProps();
 	const dropZoneProps = getDropZoneProps();
 
@@ -55,6 +70,8 @@ export function FileUpload({
 					inputProps={inputProps}
 					dropZoneProps={dropZoneProps}
 					isDragging={isDragging}
+					formatHint={effectiveFormatHint}
+					className={dropZoneClassName}
 				/>
 
 				<FileUploadDialog

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

@@ -1,12 +1,12 @@
+import { Button } from "./ui/__inherit__button";
 import {
-	Button,
 	Dialog,
 	DialogClose,
 	DialogContent,
 	DialogFooter,
 	DialogHeader,
 	DialogTitle,
-} from "@/components/ui";
+} from "./ui/__inherit__dialog";
 import { FileUploadFileItem } from "./FileUploadFileItem";
 import { formatUploadSummary } from "../utils/fileUploadUtils";
 import { LABELS } from "../utils/labels";

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

@@ -1,6 +1,7 @@
-import { UtilityIcon } from "./FileUploadIcons";
 import { LABELS } from "../utils/labels";
 
+import { UtilityIcon } from "./FileUploadIcons";
+
 export interface FileUploadDropZoneProps {
 	/** Props for the hidden file input (ref, type, accept, multiple, onChange) */
 	inputProps: {
@@ -20,63 +21,70 @@ export interface FileUploadDropZoneProps {
 	};
 	/** Whether the user is currently dragging over the drop zone */
 	isDragging: boolean;
+	/** Optional format hint (e.g. "JPEG, PNG, PDF, and MP4 formats, up to 50MB"). Defaults to LABELS.formatHint. */
+	formatHint?: string;
+	/** Optional CSS class for the drop zone (e.g. "h-full" for flex layouts) */
+	className?: string;
 }
 
 const DROP_ZONE_BASE_CLASSES =
-	"mb-2 flex cursor-pointer flex-wrap items-center gap-3 rounded-[4px] border border-dashed p-1 transition-colors";
+	"mb-2 flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed bg-white px-6 pt-4 pb-8 transition-colors";
 const DROP_ZONE_DRAGGING_CLASSES = "border-blue-500 bg-blue-50";
-const DROP_ZONE_IDLE_CLASSES = "hover:bg-gray-50";
-const BORDER_COLOR_IDLE = "rgb(116, 116, 116)";
+const DROP_ZONE_IDLE_CLASSES = "border-gray-300 hover:border-gray-400 hover:bg-gray-50";
 
 /**
- * Drop zone for file selection. Renders a dashed border area with "Upload Files"
- * button and "Or drop files" / "Drop files here" text. Accepts click and drag-and-drop.
+ * Drop zone for file selection. Renders a dashed border area with document icon,
+ * primary instruction text, and format hint. Accepts click and drag-and-drop.
  * Uses a hidden file input; props come from useFileUpload.
  */
 export function FileUploadDropZone({
 	inputProps,
 	dropZoneProps,
 	isDragging,
+	formatHint = LABELS.formatHint,
+	className = "",
 }: FileUploadDropZoneProps) {
 	const dropZoneClassName = [
 		DROP_ZONE_BASE_CLASSES,
 		isDragging ? DROP_ZONE_DRAGGING_CLASSES : DROP_ZONE_IDLE_CLASSES,
-	].join(" ");
+		className,
+	]
+		.filter(Boolean)
+		.join(" ");
 
 	return (
-		<>
-			<p className="mb-1 text-sm font-semibold text-gray-900">{LABELS.attach}</p>
-			<div
-				role="button"
-				tabIndex={0}
-				onClick={dropZoneProps.onClick}
-				onDragOver={dropZoneProps.onDragOver}
-				onDragLeave={dropZoneProps.onDragLeave}
-				onDrop={dropZoneProps.onDrop}
-				onKeyDown={dropZoneProps.onKeyDown}
-				className={dropZoneClassName}
-				style={!isDragging ? { borderColor: BORDER_COLOR_IDLE } : undefined}
-				aria-label={LABELS.dropZone}
-				data-testid="file-upload-drop-zone"
+		<div
+			role="button"
+			tabIndex={0}
+			onClick={dropZoneProps.onClick}
+			onDragOver={dropZoneProps.onDragOver}
+			onDragLeave={dropZoneProps.onDragLeave}
+			onDrop={dropZoneProps.onDrop}
+			onKeyDown={dropZoneProps.onKeyDown}
+			className={dropZoneClassName}
+			aria-label={LABELS.dropZone}
+			data-testid="file-upload-drop-zone"
+		>
+			<input
+				id="file-upload-input-id"
+				ref={inputProps.ref}
+				type="file"
+				accept={inputProps.accept}
+				multiple={inputProps.multiple}
+				onChange={inputProps.onChange}
+				className="sr-only"
+				aria-hidden
+			/>
+			<span
+				className="inline-flex h-12 w-12 shrink-0 items-center justify-center text-gray-500"
+				aria-hidden
 			>
-				<input
-					id="file-upload-input-id"
-					ref={inputProps.ref}
-					type="file"
-					accept={inputProps.accept}
-					multiple={inputProps.multiple}
-					onChange={inputProps.onChange}
-					className="sr-only"
-					aria-hidden
-				/>
-				<span className="inline-flex items-center gap-2 rounded-[4px] border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-blue-600 hover:bg-gray-50">
-					<UtilityIcon id="upload" size="sm" />
-					{LABELS.uploadFiles}
-				</span>
-				<span className="text-sm text-gray-900">
-					{isDragging ? LABELS.dropFilesHere : LABELS.orDropFiles}
-				</span>
-			</div>
-		</>
+				<UtilityIcon id="image" />
+			</span>
+			<p className="text-center text-sm font-medium text-gray-900">
+				{isDragging ? LABELS.dropFilesHere : LABELS.chooseFileOrDrop}
+			</p>
+			<p className="text-center text-xs text-gray-500">{formatHint}</p>
+		</div>
 	);
 }

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

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

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

@@ -1,6 +1,6 @@
-import symbolsUrl from "@assets/symbols.svg?url";
+import symbolsUrl from "../assets/symbols.svg?url";
 
-import utilitySvg from "@assets/utility.svg?url";
+import utilitySvg from "../assets/utility.svg?url";
 
 const IMAGE_EXTENSIONS = new Set([
 	"jpg",

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

@@ -0,0 +1,45 @@
+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({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: 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-sm">
+							<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,
+};