jclyo1's picture
updates
e7f5396
raw
history blame
2.64 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<script
type="module"
src="https://display.truepic.com/truepic_display.es.js"
></script>
</head>
<body>
<div class="container">
<form method="post" id="fileUploadForm" enctype = "multipart/form-data">
<label class="form-label" for="customFile">Default file input example</label>
<input type="file" class="form-control" name="fileUpload" id="fileUpload" />
<button class="btn btn-primary" type="submit">Submit</button>
</form>
<div id="image-container"></div>
</div>
</body>
<script>
const form = document.querySelector('#fileUploadForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
submitForm();
});
function submitForm() {
const formData = new FormData(form);
// Add additional form data as needed
//formData.append('additionalData', 'additionalValue');
// Call function to submit form data
submitFormData(formData);
}
function submitFormData(formData) {
fetch('/verify', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log(data)
const path = "/" + data.response;
var resultsContainer = document.getElementById("image-container");
var truepicDisplay = document.createElement("truepic-display");
/*
truepicDisplay.addEventListener(
"validate",
setVerificationOutputFromValidation
);
truepicDisplay.addEventListener(
"validate",
setCertificateOutputFromValidation
);
*/
truepicDisplay.setAttribute("id", "result");
truepicDisplay.setAttribute("active", "");
var truepic = document.createElement("img");
truepic.src = path;
truepicDisplay.appendChild(truepic);
resultsContainer.appendChild(truepicDisplay);
// Handle response data
})
.catch(error => {
console.log(error)
// Handle errors
});
}
</script>
</html>