@salesforce/webapp-template-feature-react-file-upload-experimental 1.90.1 → 1.90.3

package/src/force-app/main/default/webapplications/feature-react-file-upload/src/features/fileupload/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 {
+			for (const uploadedFile of files) {
+				if (uploadedFile.contentVersionId) {
+					continue;
+				}
+				const userId = await getCurrentUserId();
+				// 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
+					recordId="500SG00001Bbi1dYAB"
+					accept="image/jpeg,.jpg,.jpeg,application/pdf,.pdf"
+					maxFileSize={50}
+					onUploadComplete={handleUploadComplete}
+				/>
+			</section>
+		</div>
+	);
+}

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

@@ -0,0 +1,28 @@
+/**
+ * File upload type definitions.
+ */
+
+export type UploadState =
+	| "idle"
+	| "loading_config"
+	| "uploading"
+	| "creating_record"
+	| "success"
+	| "error"
+	| "cancelled";
+
+export interface FileUploadItem {
+	file: File;
+	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/features/fileupload/utils/fileUploadUtils.ts

@@ -0,0 +1,54 @@
+/**
+ * File upload utility functions.
+ */
+
+import type { UploadState } from "../types/fileUpload";
+
+/** Maximum allowed file size: 2 GB */
+export const MAX_FILE_SIZE_BYTES = 2 * 1024 * 1024 * 1024;
+
+/** 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"];
+
+export function isUploading(state: UploadState): boolean {
+	return UPLOADING_STATES.includes(state);
+}
+
+export function formatFileSize(bytes: number): string {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+
+export function getFileExtension(name: string): string {
+	const lastDot = name.lastIndexOf(".");
+	return lastDot > 0 ? name.slice(lastDot + 1).toUpperCase() : "FILE";
+}
+
+export function formatUploadSummary(successCount: number, totalCount: number): string {
+	const noun = totalCount === 1 ? "file" : "files";
+	if (totalCount === 1) {
+		return successCount === 1 ? "1 of 1 file uploaded" : "1 file uploading";
+	}
+	return `${successCount} of ${totalCount} ${noun} uploaded`;
+}
+
+export function getProgressWidth(state: UploadState, progress: number): number {
+	if (state === "success") return 100;
+	if (state === "error" || state === "cancelled") return 0;
+	return progress;
+}

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

@@ -0,0 +1,23 @@
+/** User-visible text and accessibility labels. */
+export const LABELS = {
+	attach: "Attach",
+	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",
+	dropZone: "Upload files by clicking or dragging files here",
+	cancelUpload: (fileName: string) => `Cancel upload of ${fileName}`,
+	uploadComplete: "Upload complete",
+	uploadFailed: "Upload failed",
+	uploadStatus: "Upload status",
+	uploadedFiles: "Uploaded files",
+	uploadProgress: (fileName: string) => `Upload progress for ${fileName}`,
+	fileName: (name: string) => `File name: ${name}`,
+	fileSize: (size: string) => `File size: ${size}`,
+	fileTooLarge: (maxSize: string) => `File exceeds maximum size of ${maxSize}`,
+	doneButton: "Close dialog and finish upload",
+} as const;

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

@@ -0,0 +1,60 @@
+/**
+ * feature-react-file-upload – File upload API
+ *
+ * Provides programmatic APIs for file upload with progress tracking
+ * and Salesforce ContentVersion integration.
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * 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)
+ *
+ * Returns array of results with file names, sizes, and IDs.
+ * Provides progress callbacks for each file through all stages.
+ *
+ * @example
+ * ```tsx
+ * const results = await upload({
+ *   files: [file1, file2],
+ *   recordId: accountId,
+ *   onProgress: (progress) => {
+ *     console.log(`${progress.fileName}: ${progress.status} ${progress.progress}%`);
+ *   }
+ * });
+ * ```
+ */
+export { upload } from "./features/fileupload/api/fileUpload";
+
+/**
+ * Options for the upload API.
+ *
+ * @see upload
+ */
+export type {
+	UploadOptions,
+	FileUploadResult,
+	FileUploadProgress,
+	UploadStatus,
+} from "./features/fileupload/api/fileUpload";
+
+/**
+ * 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 "./features/fileupload/api/fileUpload";

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

@@ -0,0 +1,22 @@
+import type { RouteObject } from "react-router";
+import { Navigate } from "react-router";
+import AppLayout from "./appLayout";
+import UploadTest from "./features/fileupload/pages/UploadTest";
+
+export const routes: RouteObject[] = [
+	{
+		path: "/",
+		element: <AppLayout />,
+		children: [
+			{
+				index: true,
+				element: <Navigate to="/upload-test" replace />,
+			},
+			{
+				path: "upload-test",
+				element: <UploadTest />,
+				handle: { showInNavigation: true, label: "Upload Test (Component)" },
+			},
+		],
+	},
+];

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

@@ -0,0 +1,43 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { resolve } from "path";
+import tailwindcss from "@tailwindcss/vite";
+import salesforce from "@salesforce/vite-plugin-webapp-experimental";
+
+export default defineConfig(({ mode }) => {
+	return {
+		plugins: [tailwindcss(), react(), salesforce({ debug: true })] as import("vite").PluginOption[],
+
+		build: {
+			outDir: resolve(__dirname, "dist"),
+			assetsDir: "assets",
+			sourcemap: false,
+		},
+
+		resolve: {
+			dedupe: ["react", "react-dom"],
+			alias: {
+				react: path.resolve(__dirname, "node_modules/react"),
+				"react-dom": path.resolve(__dirname, "node_modules/react-dom"),
+				"@": path.resolve(__dirname, "./src"),
+				"@api": path.resolve(__dirname, "./src/api"),
+				"@components": path.resolve(__dirname, "./src/components"),
+				"@utils": path.resolve(__dirname, "./src/utils"),
+				"@styles": path.resolve(__dirname, "./src/styles"),
+				"@assets": path.resolve(__dirname, "./src/assets"),
+			},
+		},
+
+		test: {
+			root: resolve(__dirname),
+			environment: "jsdom",
+			include: [
+				"src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}",
+				"src/**/__tests__/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}",
+			],
+			testTimeout: 10000,
+			globals: true,
+		},
+	};
+});