Bildupload - UI - Globaler Ausweis

src/components/Ausweis/HeizungImage.svelte

@@ -1,3 +1,8 @@
+<script lang="ts">
+	import UploadImages from "../UploadImages.svelte";
+
+	let images: (File & { data: string })[] = [];
+</script>
 <div class="grid grid-cols-2 gap-4">
 	<div class="rounded-lg border-4 p-4 bg-white">
 		<input type="file" class="image_upload" multiple />
@@ -52,6 +57,21 @@
 			Energieausweis!<br />
 			<strong>Bitte laden Sie hier mind. 1 Bild hoch:</strong>
 		</p>
-		<div class="image_container"></div>
+		<div class="flex flex-col gap-4">
+			<UploadImages max={4} bind:images></UploadImages>
+			<div class="grid grid-cols-2 gap-2">
+				{#each images as image, i}
+					<div class="relative group">
+						<img src={image.data} alt={image.name} class="h-full rounded-lg border-2 group-hover:contrast-50 object-cover transition-all">
+						<button type="button" class="invisible group-hover:visible absolute left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] rounded-full w-[30px] h-[30px] p-2 bg-[rgba(0,0,0,0.4)]" on:click={() => {
+							delete images[i]
+							images = images.filter(x => x);
+						}}>
+							R
+						</button>
+					</div>
+				{/each}
+			</div>
+		</div>
 	</div>
 </div>