Spaces:

Truepic
/

watermarked-content-credentials

Sleeping

App Files Files Community

watermarked-content-credentials / static /index.html

jclyo1

updates

fd1dd45 about 1 year ago

raw

history blame

2.6 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)

	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>