Fix file upload in custom photo upload control

Hat tip to https://web.dev/articles/more-capable-form-controls for the
details.

html/static/js/photo-upload.js

@@ -1,8 +1,13 @@
 class PhotoUpload extends HTMLElement {
+	// make element form-associated
+	static formAssociated = true;
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: 'open' });
 		this.render();
+		this.fileInput = this.shadowRoot.getElementById("photos");
+		this.internals = this.attachInternals();
 	}
 
 	connectedCallback() {
@@ -15,7 +20,17 @@ class PhotoUpload extends HTMLElement {
 
 		// Handle photo selection
 		photoInput.addEventListener('change', () => {this._handlePhotoSelection()});
-
+		photoInput.addEventListener("input", (event) => {
+			let value = event.textContent;
+			const n = "photos";
+			let i = 0
+			const entries = new FormData();
+			for (const file of event.target.files) {
+				entries.append(n + i, file);
+				i = i + 1
+			}
+			this.internals.setFormValue(entries);
+		});
 		// Handle drag and drop
 		const photoDropArea = this.shadowRoot.querySelector('#photoDropArea');
 		

rmo/template/nuisance.html

@@ -147,7 +147,7 @@ document.addEventListener('DOMContentLoaded', function() {
 	</div>
 
 	<!-- Report Form -->
-	<form id="mosquitoNuisanceForm" action="{{ .URL.NuisanceSubmit }}" method="POST">
+	<form id="mosquitoNuisanceForm" action="{{ .URL.NuisanceSubmit }}" method="POST" enctype="multipart/form-data">
 		<!-- Location & Contact Section -->
 		<div class="form-section">
 			<div class="section-heading">