Spaces:
Sleeping
Sleeping
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Camera Image</title> | |
</head> | |
<body> | |
<h1>Upload Image</h1> | |
<form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload"> | |
<input type="file" name="photo"> | |
<button type="submit">Upload</button> | |
</form> | |
<div id="message"></div> | |
<h1>Latest Image</h1> | |
<img id="cameraImage" src="/image" alt="Image" style="width:100%;"> | |
<script> | |
document.getElementById('uploadForm').addEventListener('submit', function(event) { | |
event.preventDefault(); | |
var formData = new FormData(this); | |
fetch('/upload', { | |
method: 'POST', | |
body: formData | |
}) | |
.then(response => { | |
if (response.ok) { | |
return response.text(); | |
} | |
throw new Error('Network response was not ok.'); | |
}) | |
.then(data => { | |
document.getElementById('message').innerText = data; | |
var image = document.getElementById("cameraImage"); | |
var newFilename = data.split('saved to ')[1].split('\\').pop().split('/').pop(); | |
image.src = "/image/" + newFilename + "?" + new Date().getTime(); | |
}) | |
.catch(error => { | |
document.getElementById('message').innerText = 'Error: ' + error.message; | |
}); | |
}); | |
</script> | |
</body> | |
</html> |