Updated local file download functionality

natalialuzuriaga · natalialuzuriaga · commit f14f2f470712 · 2025-03-04T13:54:44.000-08:00
Signed-off-by: Natalia Luzuriaga &lt;natalia.luzuriaga@cms.hhs.gov&gt;
diff --git a/index.html b/index.html
@@ -40,7 +40,7 @@
 					}).then(function (form) {
 						form.on("submit", function (submission) {
 							console.log("form submission here:", submission);
-							downloadFile(submission.data);
+							createCodeJson(submission.data);
 						});
 					});
 				})
@@ -52,5 +52,9 @@
 	<body>
 		<div id="form-header"></div>
 		<div id="formio"></div>
+		<div id="output">
+			<label for="json-result">Your JSON Metadata ( <a href="#" onclick="copyToClipboard(event)"> Copy</a> | <a href="#" onclick="downloadFile(event)">Download</a> ) </label>
+        	<textarea class="form-control" rows="20" id="json-result" readonly></textarea>
+		</div>
 	</body>
 </html>
diff --git a/js/formDataToJson.js b/js/formDataToJson.js
@@ -73,30 +73,43 @@ async function populateCodeJson(data) {
 	return codeJson;
 }
 
+// Creates code.json object
+async function createCodeJson(data) {
+	delete data.submit;
+	const codeJson = await populateCodeJson(data);
+
+	const jsonString = JSON.stringify(codeJson, null, 2);
+	// const blob = new Blob([jsonString], { type: "application/json" });
+	document.getElementById("json-result").value = jsonString;
+}
+
+// Copies code.json to clipboard
 async function copyToClipboard(event){
 	event.preventDefault();
+
 	var textArea = document.getElementById("json-result");
     textArea.select();
 	document.execCommand("copy")
 }
 
-// Creates code.json and triggers file download
-async function downloadFile(data) {
-	delete data.submit;
-	const codeJson = await populateCodeJson(data);
+// Triggers local file download
+async function downloadFile(event) {
+	event.preventDefault();
 
-	const jsonString = JSON.stringify(codeJson, null, 2);
-	// const blob = new Blob([jsonString], { type: "application/json" });
-	document.getElementById("json-result").value = jsonString;
+	const codeJson = document.getElementById("json-result").value
+	const jsonObject = JSON.parse(codeJson);
+	const jsonString = JSON.stringify(jsonObject, null, 2);
+	const blob = new Blob([jsonString], { type: "application/json" });
 
-	// // Create anchor element and create download link
-	// const link = document.createElement("a");
-	// link.href = URL.createObjectURL(blob);
-	// link.download = "code.json";
+	// Create anchor element and create download link
+	const link = document.createElement("a");
+	link.href = URL.createObjectURL(blob);
+	link.download = "code.json";
 
-	// // Trigger the download
-	// link.click();
+	// Trigger the download
+	link.click();
 }
 
-window.downloadFile = downloadFile;
+window.createCodeJson = createCodeJson;
 window.copyToClipboard = copyToClipboard;
+window.downloadFile = downloadFile;
