Spaces:
Runtime error
Runtime error
<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"> | |
<label class="form-label" for="customFile">Operation</label> | |
<select class="form-select" id="operation"> | |
<option value="/verify">Verify</option> | |
<option value="/sign">Sign</option> | |
</select> | |
<form method="post" id="fileUploadForm" enctype = "multipart/form-data"> | |
<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'); | |
const operation = document.querySelector('#operation'); | |
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) { | |
console.log("operation", operation.value) | |
fetch(operation.value, { | |
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> | |