Skip to content

W
web-ui
Commit d3a03321 by Owen
Options

feature: file-upload

parent 4b7edf40
Showing with 239 additions and 31 deletions
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%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment