|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
|
|
|
<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); |
|
|
|
|
|
|
|
|
|
|
|
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.setAttribute("id", "result"); |
|
truepicDisplay.setAttribute("active", ""); |
|
var truepic = document.createElement("img"); |
|
truepic.src = path; |
|
|
|
truepicDisplay.appendChild(truepic); |
|
|
|
resultsContainer.appendChild(truepicDisplay); |
|
|
|
}) |
|
.catch(error => { |
|
console.log(error) |
|
|
|
}); |
|
} |
|
</script> |
|
|
|
</html> |
|
|
