diff --git a/packages/back-end/src/functions/httpFunctions.ts b/packages/back-end/src/functions/httpFunctions.ts
index 236953b..b193e09 100644
--- a/packages/back-end/src/functions/httpFunctions.ts
+++ b/packages/back-end/src/functions/httpFunctions.ts
@@ -12,6 +12,7 @@ import {
 } from "../lib/azure-storage.js";
 import { DICT_TYPE } from "../types/generalTypes.js";
 import { example_products } from "../dummyData/exampleProducts.js";
+import {getFileNameAndFileType} from '../utils/utils.js';
 import _ from "lodash";
 
 // make sure important environment variables are present
@@ -38,7 +39,8 @@ const routeFunctions: DICT_TYPE = {
   getOKH,
   getOKHs,
   getExampleProducts,
-  "getFile/{containerName}/{fileName}/{fileType}": getFile, // Example: "getFile/okh/bread/yml"
+  // "getFile/{containerName}/{fileName}/{fileType}": getFile, // Example: "getFile/okh/bread/yml"
+  "getFile/{containerName}/{fullFileName}": getFile, // Example: "getFile/okh/bread.yml"
     "listFiles/{containerName}": listFilesByContainerName, // Example: http://localhost:7071/api/listFiles/okw OR http://localhost:7071/api/listFiles/okh
     listOKHsummaries, // This is specifically meant to provide thumbnails for the frontend
     getRelatedOKH,
@@ -290,9 +292,10 @@ export async function getFile(
   context: any
 ): Promise<HttpResponseInit> {
   context.log("getFile");
-  const { containerName, fileName, fileType } = request.params;
+  // const { containerName, fileName, fileType } = request.params;
+const { containerName, fullFileName } = request.params;
+  const{fileName, fileType} = getFileNameAndFileType(fullFileName);
   context.log(containerName, fileName, fileType);
-
   if (!containerName || !fileName || !fileType) {
     return { jsonBody: "error, no containerName or fileName" };
   }
diff --git a/packages/back-end/src/utils/utils.ts b/packages/back-end/src/utils/utils.ts
new file mode 100644
index 0000000..3e4aa6c
--- /dev/null
+++ b/packages/back-end/src/utils/utils.ts
@@ -0,0 +1,12 @@
+export function getFileNameAndFileType(filename: string): { fileName: string; fileType: string } {
+    const lastDotIndex = filename.lastIndexOf(".");
+
+    if (lastDotIndex === -1 || lastDotIndex === filename.length - 1) {
+        throw new Error("Invalid filename: no valid file extension found.");
+    }
+
+    const fileName = filename.substring(0, lastDotIndex); // Extract name before last dot
+    const fileType = filename.substring(lastDotIndex + 1); // Extract extension after last dot
+
+    return { fileName, fileType };
+}
\ No newline at end of file
diff --git a/packages/front-end/pages/products/[id].vue b/packages/front-end/pages/products/[id].vue
index 4d330ce..b5d52bf 100644
--- a/packages/front-end/pages/products/[id].vue
+++ b/packages/front-end/pages/products/[id].vue
@@ -9,25 +9,12 @@ const route = useRoute();
 const baseUrl = useRuntimeConfig().public.baseUrl;
 
 const productFilename = route.params.id as string;
+// const [fname, fileExt] = productFilename.split(".");
 
-let purename = "";
-let fileExt = ""
-if (productFilename.endsWith(".yml")) {
-    purename = productFilename.slice(0,-4);
-    fileExt = "yml";
-} else if (productFilename.endsWith(".json")) {
-    purename = productFilename.slice(0,-5);
-    fileExt = "json";
-} else {
-    console.log("BAD FILENAME, MUST END IN yml or json:",productFilename);
-}
-
-console.log("purename", purename);
+// const url = baseUrl + "/getFile/okh/" + fname + "/" + fileExt;
 
-const url = baseUrl + "/getFile/okh/" + purename + "/" + fileExt;
+const url = baseUrl + "/getFile/okh/" + productFilename;
 
-// const url = baseUrl + "/getFile/okh/" + productFilename
-//const url = "http://demo4460398.mockable.io/details";
 
 
 const { data, status, error } = await useFetch(url, {