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

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/hooks/useFileUpload.ts

@@ -13,14 +13,14 @@
  */
 import * as React from "react";
 import { flushSync } from "react-dom";
-import {
-	getUploadConfig,
-	uploadToUrl,
-	createContentVersion,
-	getCurrentUserId,
-} from "../api/fileUpload";
+import { getUploadConfig, uploadToUrl, createContentVersion } from "../api/fileUpload";
 import type { FileUploadItem, UploadedFile, UploadState } from "../types/fileUpload";
-import { isFileTooLarge, MAX_FILE_SIZE_BYTES, formatFileSize } from "../utils/fileUploadUtils";
+import {
+	isFileTooLarge,
+	MAX_FILE_SIZE_BYTES,
+	bytesFromMB,
+	formatFileSize,
+} from "../utils/fileUploadUtils";
 import { LABELS } from "../utils/labels";
 
 export interface UseFileUploadOptions {
@@ -28,12 +28,14 @@ export interface UseFileUploadOptions {
 	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. */
+	/** Called when uploads complete. Receives array of successfully uploaded files with name, size, contentBodyId, and contentVersionId (if ContentVersion was created). */
 	onUploadComplete?: (files: UploadedFile[]) => void;
 	/** Called when an upload fails. Receives the file and error message. */
 	onUploadError?: (file: File, error: string) => void;
+	/** Maximum file size in MB. Files exceeding this limit are rejected with an error. Omit for default (2 GB). */
+	maxFileSize?: number;
 }
 
 function updateItem(
@@ -69,7 +71,16 @@ interface UseFileUploadReturn {
 }
 
 export function useFileUpload(options: UseFileUploadOptions = {}): UseFileUploadReturn {
-	const { accept, multiple = false, recordId, onUploadComplete, onUploadError } = options;
+	const {
+		accept,
+		multiple = false,
+		recordId,
+		onUploadComplete,
+		onUploadError,
+		maxFileSize,
+	} = options;
+
+	const maxBytes = maxFileSize != null ? bytesFromMB(maxFileSize) : MAX_FILE_SIZE_BYTES;
 
 	const [fileItems, setFileItems] = React.useState<FileUploadItem[]>([]);
 	const [isDragging, setIsDragging] = React.useState(false);
@@ -96,11 +107,11 @@ export function useFileUpload(options: UseFileUploadOptions = {}): UseFileUpload
 			const files = e.target.files ? Array.from(e.target.files) : [];
 			if (files.length === 0) return;
 
-			const maxSizeLabel = formatFileSize(MAX_FILE_SIZE_BYTES);
+			const maxSizeLabel = formatFileSize(maxBytes);
 			const errorMessage = LABELS.fileTooLarge(maxSizeLabel);
 
 			const items: FileUploadItem[] = files.map((file) => {
-				if (isFileTooLarge(file)) {
+				if (isFileTooLarge(file, maxBytes)) {
 					onUploadError?.(file, errorMessage);
 					return {
 						file,
@@ -171,23 +182,24 @@ export function useFileUpload(options: UseFileUploadOptions = {}): UseFileUpload
 						continue;
 					}
 
-					if (!publishLocationId) {
-						publishLocationId = recordId ?? (await getCurrentUserId());
+					// Only create ContentVersion if recordId is provided
+					let contentVersionId: string | undefined;
+					if (recordId) {
+						if (!publishLocationId) {
+							publishLocationId = recordId;
+						}
+						setFileItems((prev) =>
+							updateItem(prev, file.name, { state: "creating_record", progress: 100 }),
+						);
+						contentVersionId = await createContentVersion(file, contentBodyId, publishLocationId);
 					}
-					setFileItems((prev) =>
-						updateItem(prev, file.name, { state: "creating_record", progress: 100 }),
-					);
-					const contentVersionId = await createContentVersion(
-						file,
-						contentBodyId,
-						publishLocationId,
-					);
 
 					flushSync(() => {
 						setFileItems((prev) =>
 							updateItem(prev, file.name, {
 								state: "success",
 								progress: 100,
+								contentBodyId,
 								contentVersionId,
 							}),
 						);
@@ -195,6 +207,7 @@ export function useFileUpload(options: UseFileUploadOptions = {}): UseFileUpload
 					uploadedFiles.push({
 						name: file.name,
 						size: file.size,
+						contentBodyId,
 						contentVersionId,
 					});
 				} catch (err) {
@@ -222,7 +235,7 @@ export function useFileUpload(options: UseFileUploadOptions = {}): UseFileUpload
 
 			e.target.value = "";
 		},
-		[recordId, onUploadComplete, onUploadError],
+		[recordId, onUploadComplete, onUploadError, maxBytes],
 	);
 
 	const handleDragOver = React.useCallback((e: React.DragEvent) => {

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

@@ -54,3 +54,21 @@ export { useFileUpload } from "./hooks/useFileUpload";
  * @see useFileUpload
  */
 export type { UseFileUploadOptions } from "./hooks/useFileUpload";
+
+/**
+ * Create ContentVersion record programmatically. Useful when you need to create
+ * ContentVersion separately from the file upload process (e.g., after uploading
+ * file to a different location first).
+ *
+ * @param file - The file to create ContentVersion for
+ * @param contentBodyId - The ContentBody ID from a previous upload
+ * @param recordId - The record ID for FirstPublishLocationId (e.g., Account, Opportunity, or User ID)
+ * @returns ContentVersion ID if successful
+ *
+ * @example
+ * ```tsx
+ * const contentBodyId = await uploadToUrl(file, token, uploadUrl, onProgress);
+ * const contentVersionId = await createContentVersion(file, contentBodyId, recordId);
+ * ```
+ */
+export { createContentVersion, getCurrentUserId } from "./api/fileUpload";

package/src/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/src/force-app/main/default/webapplications/feature-react-file-upload/src/routes.tsx

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

package/src/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/src/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/src/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/src/force-app/main/default/webapplications/feature-react-file-upload/src/pages/Home.tsx

@@ -1,25 +0,0 @@
-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>
-	);
-}