File size: 2,909 Bytes
e158b55 fd1dd45 e158b55 c9a473f fd1dd45 e158b55 3aeb4f0 e158b55 fd1dd45 e158b55 c9a473f e158b55 c9a473f e158b55 fd1dd45 e7f5396 fd1dd45 e158b55 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<!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">
<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>
|