feature: file-upload

WebGde/WebContent/WebGde-Widgets/DataInputWidget/generateFields.js

@@ -54,7 +54,7 @@ export async function generateFields(inputSchema, containerId) {
 	let doctype = sessionStorage.getItem('doctype');
 	let section = sessionStorage.getItem('section');
 	if ((doctype === null || doctype === "undefined") && (section === null || section === "undefined")) {
-		Object.keys(schema).every(function (key) {
+		Object.keys(schema).every(function(key) {
 			let doctypes = schema[key];
 			let underscoredKey = key.replaceAll(" ", "_");
 			sessionStorage.setItem("currentDoctype", underscoredKey);
@@ -123,7 +123,7 @@ export async function generateFields(inputSchema, containerId) {
 		}
 	}
 
-	$(document.body).on("change", "#DocType", async function () {
+	$(document.body).on("change", "#DocType", async function() {
 		const elements = document.getElementsByClassName(sessionStorage.getItem("currentSection"));
 		while (elements.length > 0) {
 			elements[0].parentNode.removeChild(elements[0]);
@@ -157,7 +157,7 @@ export async function generateFields(inputSchema, containerId) {
 		}
 	});
 
-	$(document.body).on("change", "#Section", async function () {
+	$(document.body).on("change", "#Section", async function() {
 		const elements = document.getElementsByClassName(sessionStorage.getItem("currentSection"));
 		while (elements.length > 0) {
 			elements[0].parentNode.removeChild(elements[0]);
@@ -178,7 +178,7 @@ export async function generateFields(inputSchema, containerId) {
 
 	// add handler event handler for dropdown
 	// separate handler is used to fit with the library used 'select2'
-	$(document.body).ready(function () {
+	$(document.body).ready(function() {
 		const dropdowns = $('.dropdown-input').select2();
 		dropdowns.splice(0, 2);
 		$('.dropdown-input').select2().on('select2:open', () => {
@@ -194,7 +194,7 @@ export async function generateFields(inputSchema, containerId) {
 		dropdowns.on('select2:close', handleDropdown)
 	});
 
-	$(document).ready(function () {
+	$(document).ready(function() {
 		$('form:first *:input[type!=hidden]:first').focus(); // Run code
 	});
 }
@@ -516,7 +516,7 @@ const inputImageCapture = (key, validation) => {
 				if (file.type.startsWith('image/')) {
 					// If it's an image file, display it directly
 					const reader = new FileReader();
-					reader.onload = function (e) {
+					reader.onload = function(e) {
 						img.src = e.target.result;
 						img.style.display = 'inline';
 						thumb.style.display = 'none';
@@ -591,7 +591,7 @@ const inputImageCapture = (key, validation) => {
 
 
 		const x = document.createElement('span')
-		x.setAttribute('id',`${key}_x`)
+		x.setAttribute('id', `${key}_x`)
 		x.setAttribute('class', 'x');
 		x.setAttribute('style', 'display: none')
 		x.textContent = 'x';
@@ -714,7 +714,7 @@ const inputVideoCapture = (key, validation) => {
 				if (file.type.startsWith('image/')) {
 					// If it's an image file, display it directly
 					const reader = new FileReader();
-					reader.onload = function (e) {
+					reader.onload = function(e) {
 						img.src = e.target.result;
 						img.style.display = 'inline';
 						thumb.style.display = 'none';
@@ -789,7 +789,7 @@ const inputVideoCapture = (key, validation) => {
 
 
 		const x = document.createElement('span')
-		x.setAttribute('id',`${key}_x`)
+		x.setAttribute('id', `${key}_x`)
 		x.setAttribute('class', 'x');
 		x.setAttribute('style', 'display: none')
 		x.textContent = 'x';
@@ -908,11 +908,11 @@ const inputFingerprintCapture = (key, validation) => {
 
 				const img = document.getElementById(`${key}_zz`);
 				const thumb = document.getElementById(`${key}_thumbnail`);
-				const x = document.getElementsByClassName('x')[0];
+				const x = document.getElementById(`${key}_x`);
 				if (file.type.startsWith('image/')) {
 					// If it's an image file, display it directly
 					const reader = new FileReader();
-					reader.onload = function (e) {
+					reader.onload = function(e) {
 						img.src = e.target.result;
 						img.style.display = 'inline';
 						thumb.style.display = 'none';
@@ -987,7 +987,7 @@ const inputFingerprintCapture = (key, validation) => {
 
 
 		const x = document.createElement('span')
-		x.setAttribute('id',`${key}_x`)
+		x.setAttribute('id', `${key}_x`)
 		x.setAttribute('class', 'x');
 		x.setAttribute('style', 'display: none')
 		x.textContent = 'x';
@@ -1126,6 +1126,214 @@ const inputAudioUpload = (key, validation) => {
 
 }
 
+/**
+ * 
+ * @param {*} key
+ *      will serve as id of input field  
+ * @param {*} validation
+ *      validation of field from schema 
+ * @returns
+ *      created input field element 
+ */
+const inputFileUpload = (key, validation) => {
+	try {
+		const {
+			mandatory,
+			fieldLength
+		} = validation
+
+		const container = document.createElement('div');
+		const container2 = document.createElement('div');
+		container.appendChild(container2);
+		container2.classList.add('file-upload');
+
+		const input = document.createElement('input');
+		input.setAttribute('id', `${key}_attachedMedia`);
+		input.setAttribute('name', `${key}`);
+		input.setAttribute('type', 'file');
+		input.setAttribute('style', 'display: none');
+		input.setAttribute('accept', '*/*'); // Accept any files
+
+		const capturedImage = document.createElement('input');
+		capturedImage.setAttribute('id', `${key}_capturedImageData`);
+		capturedImage.setAttribute('name', `${key}`);
+		capturedImage.setAttribute('type', 'hidden');
+		capturedImage.setAttribute('style', 'display: none');
+
+		// Add an event listener to handle when a file is selected
+		input.addEventListener('change', (event) => {
+			const file = event.target.files[0];
+			if (file) {
+
+				// Create hidden inputs for fname and file content
+				const hiddenFnameInput = document.createElement('input');
+				hiddenFnameInput.setAttribute('id', `${key}`);
+				hiddenFnameInput.setAttribute('type', 'hidden');
+				hiddenFnameInput.setAttribute('name', 'hidden_fname');
+				container2.appendChild(hiddenFnameInput);
+
+				const hiddenFileContentInput = document.createElement('input');
+				hiddenFileContentInput.setAttribute('id', `${key}`);
+				hiddenFileContentInput.setAttribute('type', 'hidden');
+				hiddenFileContentInput.setAttribute('name', 'hidden_file_content');
+				container2.appendChild(hiddenFileContentInput);
+
+				const img = document.getElementById(`${key}_zz`);
+				const thumb = document.getElementById(`${key}_thumbnail`);
+				const x = document.getElementById(`${key}_x`);
+				if (file.type.startsWith('image/')) {
+					// If it's an image file, display it directly
+					const reader = new FileReader();
+					reader.onload = function(e) {
+						img.src = e.target.result;
+						img.style.display = 'inline';
+						img.style.width = '100%'; // Set maximum width to 100% of the container
+						img.style.height = '100%'; // Set maximum height to a specific value (adjust as needed)
+						thumb.style.display = 'none';
+						filename.textContent = file.name;
+						filename.style.display = 'inline';
+
+						// Set the hidden inputs when a file is selected
+						hiddenFnameInput.value = file.name;
+						hiddenFnameInput.display = '';
+						hiddenFileContentInput.value = e.target.result; // This will store the base64-encoded content of the file
+						hiddenFileContentInput.display = '';
+
+						document.getElementById(`${key}_buttonsContainer-video`).style.display = 'none';
+						x.style.display = 'block';
+						x.style.position = 'absolute';
+						document.getElementById(`${key}_x`).addEventListener('click', () => {
+							img.style.display = 'none';
+							img.src = '';
+							thumb.style.display = 'none';
+							x.style.display = 'none';
+							input.value = ''
+							filename.style.display = 'none';
+							document.getElementById(`${key}_buttonsContainer-video`).style.display = 'flex';
+
+							// Clear the hidden fields
+							container2.removeChild(hiddenFnameInput);
+							container2.removeChild(hiddenFileContentInput);
+						});
+					};
+					reader.readAsDataURL(file);
+				} else if (file.type.startsWith('video/')) {
+					const reader = new FileReader();
+					reader.readAsDataURL(file);
+					reader.onload = (e) => {
+						thumbnail.src = e.target.result;
+						thumbnail.style.display = 'inline';
+						thumbnail.style.width = '100%';
+						thumbnail.style.height = '100%';
+						filename.textContent = file.name;
+						filename.style.display = 'inline';
+
+						// Set the hidden inputs when a file is selected
+						hiddenFnameInput.value = file.name;
+						hiddenFnameInput.display = '';
+						hiddenFileContentInput.value = e.target.result; // This will store the base64-encoded content of the file
+						hiddenFileContentInput.display = '';
+
+						// Hide the img tag since we're showing the video thumbnail
+						document.getElementById(`${key}_zz`).style.display = 'none';
+						document.getElementById(`${key}_buttonsContainer-video`).style.display = 'none';
+						x.style.display = 'block';
+						x.style.position = 'absolute';
+						document.getElementById(`${key}_x`).addEventListener('click', () => {
+							img.style.display = 'none';
+							img.src = '';
+							thumb.style.display = 'none';
+							x.style.display = 'none';
+
+							filename.style.display = 'none';
+							document.getElementById(`${key}_buttonsContainer-video`).style.display = 'flex';
+							input.value = ''
+
+							// Clear the hidden fields
+							container2.removeChild(hiddenFnameInput);
+							container2.removeChild(hiddenFileContentInput);
+						});
+					}
+				}
+				else {
+					// Display the filename only for unsupported file types
+					filename.textContent = file.name;
+					filename.style.display = 'inline';
+					document.getElementById(`${key}_buttonsContainer-video`).style.display = 'none';
+					x.style.display = 'block';
+					x.style.position = 'absolute';
+
+					// Set the hidden inputs for filename and empty file content
+					hiddenFnameInput.value = file.name;
+					hiddenFnameInput.display = '';
+					hiddenFileContentInput.value = ''; // Empty content for unsupported file types
+					hiddenFileContentInput.display = '';
+
+					// Remove the file on 'x' click
+					document.getElementById(`${key}_x`).addEventListener('click', () => {
+						filename.style.display = 'none';
+						document.getElementById(`${key}_buttonsContainer-video`).style.display = 'flex';
+						input.value = '';
+						x.style.display = 'none';
+
+						// Clear the hidden fields
+						container2.removeChild(hiddenFnameInput);
+						container2.removeChild(hiddenFileContentInput);
+					});
+				}
+			}
+		});
+
+
+		const x = document.createElement('span')
+		x.setAttribute('id', `${key}_x`)
+		x.setAttribute('class', 'x');
+		x.setAttribute('style', 'display: none')
+		x.textContent = 'x';
+
+		const input1 = document.createElement('input');
+		input1.setAttribute('id', `${key}`);
+		input1.setAttribute('name', `${key}`);
+		input1.setAttribute('type', 'button');
+		input1.addEventListener('click', () => {
+			document.getElementById(`${key}_attachedMedia`).click(); // Trigger click on hidden input
+		});
+		input1.setAttribute('value', 'Upload File');
+
+		const img = document.createElement('img');
+		const thumbnail = document.createElement('video');
+		thumbnail.setAttribute('style', 'display: none');
+		thumbnail.setAttribute('id', `${key}_thumbnail`);
+
+		img.setAttribute('id', `${key}_zz`);
+		img.setAttribute('style', 'display: none');
+
+		const filename = document.createElement('span');
+		filename.setAttribute('id', `${key}_fname`);
+		filename.setAttribute('name', `${key}`);
+		filename.setAttribute('type', 'text');
+		filename.setAttribute('style', 'display: none; font-size: inherit;');
+
+		// Append all elements to the container
+		const container3 = document.createElement('div');
+		container2.appendChild(x);
+		container3.setAttribute('id', `${key}_buttonsContainer-video`)
+		container3.setAttribute('class', 'buttonsContainer');
+		container3.appendChild(input);
+		container3.appendChild(input1);
+		container2.appendChild(container3)
+		container2.appendChild(img);
+		container2.appendChild(thumbnail);
+		container2.appendChild(filename);
+
+		mandatory ? input.setAttribute('required', 'true') : null
+
+		return container
+	} catch (err) {
+		throw err
+	}
+}
+
 
 /**
  * 
@@ -1148,10 +1356,10 @@ const inputChecklist = (key, validation) => {
 		var isOther = false;
 
 		// Create the checkboxes for each item
-		items.forEach(function (item, index) {
-			if (item.toLowerCase() === "other" || item.toLowerCase() === "others"){
+		items.forEach(function(item, index) {
+			if (item.toLowerCase() === "other" || item.toLowerCase() === "others") {
 				isOther = true;
-			}else{
+			} else {
 				var div = document.createElement('div');
 				div.classList.add('checkbox');
 
@@ -1168,8 +1376,8 @@ const inputChecklist = (key, validation) => {
 				dropdownContent.appendChild(div)
 			}
 		})
-		
-		if(isOther){
+
+		if (isOther) {
 			// Create the checkbox dependent on an input text value
 			var dependentDiv = document.createElement('div');
 			dependentDiv.classList.add('checkbox');
@@ -1184,7 +1392,7 @@ const inputChecklist = (key, validation) => {
 			var dependentLabel = document.createTextNode('other');
 			dependentDiv.appendChild(dependentLabel);
 			dropdownContent.appendChild(dependentDiv);
-			
+
 			// Initially hide the input text box
 			var inputTextBox = document.createElement('input');
 			inputTextBox.type = 'text';
@@ -1195,7 +1403,7 @@ const inputChecklist = (key, validation) => {
 			dropdownContent.appendChild(inputTextBox);
 
 			// Add event listener to the "other" checkbox
-			dependentCheckbox.addEventListener('change', function () {
+			dependentCheckbox.addEventListener('change', function() {
 				if (dependentCheckbox.checked) {
 					inputTextBox.style.display = 'inline-block';
 				} else {
@@ -1239,9 +1447,9 @@ const inputRadiolist = (key, validation) => {
 
 		// Create radio buttons for each item
 		items.forEach((item, index) => {
-			if (item.toLowerCase() === "other" || item.toLowerCase() === "others"){
+			if (item.toLowerCase() === "other" || item.toLowerCase() === "others") {
 				isOther = true;
-			}else{
+			} else {
 				var radioDiv = document.createElement('div');
 				radioDiv.classList.add('radio-like-checkbox');
 
@@ -1258,7 +1466,7 @@ const inputRadiolist = (key, validation) => {
 				dropdownContent.appendChild(radioDiv);
 			}
 		});
-		if (isOther){
+		if (isOther) {
 			// Create the radio button dependent on an input text value
 			var dependentDiv = document.createElement('div');
 			dependentDiv.classList.add('radio-like-checkbox');
@@ -1282,7 +1490,7 @@ const inputRadiolist = (key, validation) => {
 			dropdownContent.appendChild(inputTextBox);
 
 			// Add event listener to the "other" radio button
-			dependentRadio.addEventListener('change', function () {
+			dependentRadio.addEventListener('change', function() {
 				if (dependentRadio.checked) {
 					inputTextBox.style.display = 'inline-block';
 				} else {
@@ -1326,7 +1534,7 @@ const inputGeoTag = (key, validation) => {
 		input1.setAttribute('class', `${collection}`)
 		input1.setAttribute('type', 'text')
 		input1.setAttribute('readonly', 'true')
-		if(collection === 'geotag'){
+		if (collection === 'geotag') {
 			getLocation();
 		}
 
@@ -1362,7 +1570,7 @@ const inputDropdown = (key, validation) => {
 		input.classList.add('dropdown-input')
 		input.addEventListener('focusout', handleInput)
 
-		input.addEventListener('keydown', function (event) {
+		input.addEventListener('keydown', function(event) {
 			if (event.keyCode == 9) {
 				event.preventDefault();
 				var elem = document.getElementsByClassName('select2-search__field');
@@ -1406,7 +1614,7 @@ const inputDbLookup = async (key, validation) => {
 		input.classList.add('dropdown-input');
 		input.addEventListener('focusout', handleInput);
 
-		input.addEventListener('keydown', function (event) {
+		input.addEventListener('keydown', function(event) {
 			if (event.keyCode == 9) {
 				event.preventDefault();
 				var elem = document.getElementsByClassName('select2-search__field');
@@ -1586,8 +1794,8 @@ const deconstruct = async (section, container, classAttribute) => {
 				case 'fingerprint':
 					input = inputFingerprintCapture(key, validation)
 					break
-				case 'selfie-capture':
-					input = inputSelfieCapture(key, validation)
+				case 'file-upload':
+					input = inputFileUpload(key, validation)
 					break
 				case 'audio-upload':
 					input = inputAudioUpload(key, validation)
@@ -1659,7 +1867,7 @@ const deconstruct = async (section, container, classAttribute) => {
 		showHideElements(section);  // Replace "SECTION1" with the desired section key
 		//logic for show hide
 		if (selectElement) {
-			selectElement.addEventListener("change", function () {
+			selectElement.addEventListener("change", function() {
 				showHideElements(section);
 			});
 		}

WebGde/WebContent/style.css

@@ -289,7 +289,7 @@ input[type=radio] {
     display: none;
 }
 
-.image-capture, .fingerprint-capture {
+.image-capture, .fingerprint-capture, .file-upload {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -689,7 +689,7 @@ span#filename {
         background-color: yellow;
     }
 
-    .image-capture, .fingerprint-capture {
+    .image-capture, .fingerprint-capture, .file-upload {
         display: flex;
         flex-direction: column;
         width: 100%;