@salesforce/webapp-template-feature-react-file-upload-experimental 1.55.0

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/styles/global.css

@@ -0,0 +1,135 @@
+@import 'tailwindcss';
+
+@layer base {
+  html,
+  body,
+  #root {
+    @apply min-h-screen;
+  }
+
+  body {
+    @apply antialiased bg-white;
+  }
+}
+
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

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

@@ -0,0 +1,26 @@
+/**
+ * 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;
+	contentVersionId?: string;
+}
+
+export interface UploadedFile {
+	name: string;
+	size: number;
+	contentVersionId?: string;
+}

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

@@ -0,0 +1,44 @@
+/**
+ * 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;
+
+export function isFileTooLarge(file: File): boolean {
+	return file.size > MAX_FILE_SIZE_BYTES;
+}
+
+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/dist/force-app/main/default/webapplications/feature-react-file-upload/src/utils/labels.ts

@@ -0,0 +1,21 @@
+/** User-visible text and accessibility labels. */
+export const LABELS = {
+	attach: "Attach",
+	uploadFiles: "Upload Files",
+	dropFilesHere: "Drop files here",
+	orDropFiles: "Or drop files",
+	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/dist/force-app/main/default/webapplications/feature-react-file-upload/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@api/*": ["./src/api/*"],
+      "@components/*": ["./src/components/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@styles/*": ["./src/styles/*"],
+      "@assets/*": ["./src/assets/*"]
+    }
+  },
+  "include": ["src", "vite-env.d.ts", "vitest-env.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/dist/force-app/main/default/webapplications/feature-react-file-upload/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "outDir": "./build"
+  },
+  "include": ["vite.config.ts"]
+}

package/dist/force-app/main/default/webapplications/feature-react-file-upload/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/dist/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 })],
+
+		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,
+		},
+	};
+});

package/dist/force-app/main/default/webapplications/feature-react-file-upload/vitest-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vitest" />
+/// <reference types="@testing-library/jest-dom" />

package/dist/force-app/main/default/webapplications/feature-react-file-upload/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './vitest.setup.ts',
+  },
+});

package/dist/force-app/main/default/webapplications/feature-react-file-upload/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/dist/force-app/main/default/webapplications/feature-react-file-upload/webapplication.json

@@ -0,0 +1,7 @@
+{
+  "outputDir": "dist",
+  "routing": {
+    "trailingSlash": "never",
+    "fallback": "/index.html"
+  }
+}

package/dist/jest.config.js

@@ -0,0 +1,6 @@
+const { jestConfig } = require('@salesforce/sfdx-lwc-jest/config');
+
+module.exports = {
+    ...jestConfig,
+    modulePathIgnorePatterns: ['<rootDir>/.localdevserver']
+};

package/dist/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
+  "version": "1.55.0",
+  "description": "Base SFDX project template",
+  "private": true,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "echo 'No build required for base-sfdx-project'",
+    "clean": "echo 'No clean required for base-sfdx-project'",
+    "lint": "eslint **/{aura,lwc}/**/*.js",
+    "test": "npm run test:unit",
+    "test:coverage": "npm run test",
+    "test:unit": "sfdx-lwc-jest -- --passWithNoTests",
+    "test:unit:watch": "sfdx-lwc-jest --watch",
+    "test:unit:debug": "sfdx-lwc-jest --debug",
+    "test:unit:coverage": "sfdx-lwc-jest --coverage",
+    "prettier": "prettier --write \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
+    "prettier:verify": "prettier --check \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
+    "precommit": "lint-staged"
+  },
+  "devDependencies": {
+    "@lwc/eslint-plugin-lwc": "^2.0.0",
+    "@prettier/plugin-xml": "^3.2.2",
+    "@salesforce/eslint-config-lwc": "^3.2.3",
+    "@salesforce/eslint-plugin-aura": "^2.0.0",
+    "@salesforce/eslint-plugin-lightning": "^1.0.0",
+    "@salesforce/sfdx-lwc-jest": "^7.0.1",
+    "eslint": "8.57.1",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^28.8.1",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.1.0",
+    "prettier": "^3.1.0",
+    "prettier-plugin-apex": "^2.0.1"
+  }
+}

package/dist/scripts/apex/hello.apex

@@ -0,0 +1,10 @@
+// Use .apex files to store anonymous Apex.
+// You can execute anonymous Apex in VS Code by selecting the
+//     apex text and running the command:
+//     SFDX: Execute Anonymous Apex with Currently Selected Text
+// You can also execute the entire file by running the command:
+//     SFDX: Execute Anonymous Apex with Editor Contents
+
+string tempvar = 'Enter_your_name_here';
+System.debug('Hello World!');
+System.debug('My name is ' + tempvar);

package/dist/scripts/soql/account.soql

@@ -0,0 +1,6 @@
+// Use .soql files to store SOQL queries.
+// You can execute queries in VS Code by selecting the
+//     query text and running the command:
+//     SFDX: Execute SOQL Query with Currently Selected Text
+
+SELECT Id, Name FROM Account

package/dist/sfdx-project.json

@@ -0,0 +1,12 @@
+{
+  "packageDirectories": [
+    {
+      "path": "force-app",
+      "default": true
+    }
+  ],
+  "name": "MyProject",
+  "namespace": "",
+  "sfdcLoginUrl": "https://login.salesforce.com",
+  "sourceApiVersion": "66.0"
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@salesforce/webapp-template-feature-react-file-upload-experimental",
+  "version": "1.55.0",
+  "description": "File upload feature with a component to upload files to core",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "author": "",
+  "type": "module",
+  "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",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "executor": "@salesforce/webapp-template-cli-experimental:apply-patches"
+      },
+      "watch": {
+        "executor": "@salesforce/webapp-template-cli-experimental:watch-patches"
+      },
+      "build:dist-app": {
+        "executor": "@salesforce/webapp-template-cli-experimental:build-dist-app"
+      },
+      "start": {
+        "executor": "@salesforce/webapp-template-cli-experimental:dev-server"
+      }
+    }
+  },
+  "devDependencies": {
+    "@salesforce/webapp-experimental": "^1.55.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "nodemon": "^3.1.0",
+    "react-dom": "^19.2.1",
+    "react-router": "^7.10.1",
+    "vite": "^7.3.1"
+  },
+  "gitHead": "1c1e2f3f2de3f9ef18a3efec5f477775ccf72d31"
+}

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

@@ -0,0 +1,154 @@
+/**
+ * File upload API – config, upload, and ContentVersion creation
+ */
+
+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;
+}
+
+declare const __SF_API_VERSION__: string;
+
+export interface UploadConfig {
+	token: string;
+	uploadUrl: string;
+}
+
+/**
+ * Get upload config (token, uploadUrl) from /connect/file/upload/config.
+ */
+export async function getUploadConfig(): Promise<UploadConfig> {
+	const sdk = await getSDK();
+	if (!sdk?.fetch) {
+		throw new Error("Failed to initialize SDK");
+	}
+	const API_VERSION = __SF_API_VERSION__ || "65.0";
+	const configRes = await sdk.fetch(`/services/data/v${API_VERSION}/connect/file/upload/config`, {
+		method: "GET",
+	});
+	if (!configRes.ok) {
+		throw new Error(`Failed to get upload config: ${configRes.status} ${configRes.statusText}`);
+	}
+	const config = (await configRes.json()) as UploadConfig;
+	const { token, uploadUrl } = config;
+	if (!token || !uploadUrl) {
+		throw new Error("Invalid upload config: missing token or uploadUrl");
+	}
+	return { token, uploadUrl };
+}
+
+/**
+ * Upload file via XHR
+ * @param signal - Optional AbortSignal to cancel the upload
+ */
+export function uploadToUrl(
+	file: File,
+	token: string,
+	uploadUrl: string,
+	onProgress: (percent: number) => void,
+	signal?: AbortSignal,
+): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const xhr = new XMLHttpRequest();
+		const formData = new FormData();
+		formData.append("token", token);
+		formData.append("fromUITier", "true");
+		formData.append("target", "ContentVersion");
+		formData.append("origin", "LWC");
+		formData.append("file", file, file.name);
+
+		xhr.upload.addEventListener("progress", (e) => {
+			if (e.lengthComputable) {
+				onProgress(Math.round((e.loaded / e.total) * 100));
+			}
+		});
+
+		xhr.addEventListener("load", () => {
+			if (xhr.status < 200 || xhr.status >= 300) {
+				reject(new Error(`Upload failed: ${xhr.status} ${xhr.statusText}`));
+				return;
+			}
+			try {
+				const data = parseJsonResponse(xhr.responseText);
+				const id =
+					(data.content_body_id as string | undefined) ??
+					(data.contentBodyId as string | undefined);
+				if (!id) {
+					reject(new Error("Response missing content_body_id"));
+					return;
+				}
+				resolve(id);
+			} catch (err) {
+				reject(err instanceof Error ? err : new Error(String(err)));
+			}
+		});
+
+		xhr.addEventListener("error", () => reject(new Error("Network error during upload")));
+		xhr.addEventListener("abort", () => reject(new Error("Upload aborted")));
+
+		if (signal) {
+			signal.addEventListener("abort", () => {
+				xhr.abort();
+			});
+		}
+
+		xhr.open("POST", uploadUrl);
+		xhr.send(formData);
+	});
+}
+
+/**
+ * Strip "while(1);" or similar JSON prefix from LWC-style responses.
+ */
+function parseJsonResponse(text: string): Record<string, unknown> {
+	const trimmed = text.trim();
+	const prefix = "while(1);";
+	const jsonStr = trimmed.startsWith(prefix) ? trimmed.slice(prefix.length).trim() : trimmed;
+	return JSON.parse(jsonStr) as Record<string, unknown>;
+}
+
+/**
+ * Create ContentVersion record via ui-api createRecord.
+ */
+export async function createContentVersion(
+	file: File,
+	contentBodyId: string,
+	userId: string,
+): Promise<string | undefined> {
+	const fields = {
+		FirstPublishLocationId: userId,
+		Title: fileNameWithoutExtension(file.name),
+		PathOnClient: file.name,
+		ContentBodyId: contentBodyId,
+	};
+
+	const response = await createRecord("ContentVersion", fields);
+	const id = (response as { id?: string }).id ?? response.fields?.Id?.value;
+	return id;
+}
+
+/**
+ * Get file name without extension.
+ */
+function fileNameWithoutExtension(name: string): string {
+	const lastDot = name.lastIndexOf(".");
+	return lastDot > 0 ? name.slice(0, lastDot) : name;
+}
+
+/**
+ * Get current user Id (for FirstPublishLocationId).
+ */
+export async function getCurrentUserId(): Promise<string> {
+	const user = await getCurrentUser();
+	if (!user?.id) {
+		throw new Error("Current user not found");
+	}
+	return user.id;
+}

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 />
+		</>
+	);
+}