73 lines
1.7 KiB
HTML
73 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Upload Receipts</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
|
|
<style>
|
|
#previews img {
|
|
padding: 0.25em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Upload Receipts</h1>
|
|
<form method="post" enctype="multipart/form-data" action="">
|
|
<div>
|
|
<input
|
|
id="image"
|
|
type="file"
|
|
name="image[]"
|
|
accept="image/*,*.png,*.jpg,*.jpeg,*.jpx"
|
|
capture="environment"
|
|
multiple
|
|
/>
|
|
</div>
|
|
<div class="grid" id="previews">
|
|
</div>
|
|
<div><input type="reset"><input type="submit" /></div>
|
|
</div>
|
|
</form>
|
|
<script>
|
|
(() => {
|
|
const image = document.getElementById("image");
|
|
const previews = document.getElementById("previews");
|
|
|
|
const clearPreviews = () => {
|
|
while (previews.children.length > 0) {
|
|
previews.removeChild(previews.children[0]);
|
|
}
|
|
}
|
|
|
|
const setPreviews = () => {
|
|
for (const i of image.files) {
|
|
const el = document.createElement("div");
|
|
const img = document.createElement("img");
|
|
img.src = URL.createObjectURL(i);
|
|
el.appendChild(img);
|
|
const txt = document.createElement("input");
|
|
txt.name = "notes[]";
|
|
txt.placeholder = "Notes ...";
|
|
el.appendChild(txt);
|
|
previews.appendChild(el);
|
|
}
|
|
}
|
|
|
|
image.addEventListener("change", (e) => {
|
|
clearPreviews();
|
|
setPreviews();
|
|
});
|
|
|
|
document.forms[0].addEventListener("reset", () => {
|
|
clearPreviews();
|
|
});
|
|
|
|
if (image.files.length > 0) {
|
|
setPreviews();
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|