Bildupload - UI - Globaler Ausweis

src/components/UploadImages.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	export let max: number = 2;
+
+	// Array of base64 encoded images read into the input.
+	export let images: (File & { data: string })[] = [];
+
+	function getAllImages(this: HTMLInputElement) {
+		const files = this.files || [];
+
+		if (images.length == max) {
+			this.value = "";
+			return;
+		}
+		
+		for (let i = 0; i < files.length; i++) {
+			const file = files[i];
+
+			console.log(file.type);
+			
+
+			if ((file.type !== "image/jpeg") && (file.type !== "image/png")) {
+				i--;
+				continue;
+			}
+
+			if (i == max) {
+				break;
+			}
+
+			const reader = new FileReader();
+
+			reader.onload = (ev) => {
+				if (reader.readyState != reader.DONE) {
+					return;
+				}
+
+				if (!reader.result) {
+					return;
+				}
+				
+				images.push({ ...file, data: reader.result as string } as (File & { data: string }));
+				images = images;
+
+				if (i == (Math.min(files.length, max) - 1)) {
+					this.value = "";
+				}
+			}
+
+			reader.readAsDataURL(file);
+		}
+	}
+</script>
+
+{#if max > 1}
+	<input type="file" multiple on:change={getAllImages} />
+{:else}
+	<input type="file" on:change={getAllImages} />
+{/if}