Bild Upload

src/components/UploadImages.svelte

@@ -4,29 +4,37 @@
 
 	export let max: number = 2;
 	export let min: number = 1;
-	export let name: string = ""
+	export let name: string = "";
 
 	// Array of base64 encoded images read into the input.
-	import { BedarfsausweisWohnenClient, ObjektClient, UploadedGebaeudeBild, VerbrauchsausweisGewerbeClient, VerbrauchsausweisWohnenClient } from "./Ausweis/types.js";
+	import {
+		BedarfsausweisWohnenClient,
+		ObjektClient,
+		UploadedGebaeudeBild,
+		VerbrauchsausweisGewerbeClient,
+		VerbrauchsausweisWohnenClient,
+	} from "./Ausweis/types.js";
 
 	export let images: UploadedGebaeudeBild[] = [];
-	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbeClient | BedarfsausweisWohnenClient;
+	export let ausweis:
+		| VerbrauchsausweisWohnenClient
+		| VerbrauchsausweisGewerbeClient
+		| BedarfsausweisWohnenClient;
 	export let objekt: ObjektClient;
 	export let kategorie: Enums.BilderKategorie;
 
 	function getAllImages(this: HTMLInputElement) {
 		const files = this.files || [];
 
-		if (images.length == max) {
+		if (images.filter((img) => img.kategorie === kategorie).length == max) {
 			this.value = "";
 			return;
 		}
-		
+
 		for (let i = 0; i < files.length; i++) {
 			const file = files[i];
 
-			if ((file.type !== "image/jpeg") && (file.type !== "image/png")) {
+			if (file.type !== "image/jpeg" && file.type !== "image/png") {
-				i--;
 				continue;
 			}
 
@@ -59,22 +67,27 @@
 					if (!ctx) {
 						return;
 					}
-					ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);
+					ctx.drawImage(
+						image,
+						0,
+						0,
+						image.naturalWidth,
+						image.naturalHeight
+					);
 
 					// Get the scaled-down data from the canvas in the desired output format and quality
 					const dataURL = canvas.toDataURL("image/jpeg", 0.8);
 
 					images.push({ data: dataURL as string, kategorie });
 					images = images;
-					
 
-					if (i == (Math.min(files.length, max) - 1)) {
+					if (i == Math.min(files.length, max) - 1) {
 						this.value = "";
 					}
-				}
+				};
-				
+
 				image.src = url;
-			}
+			};
 
 			reader.readAsArrayBuffer(file);
 		}
@@ -83,31 +96,44 @@
 	let fileUpload: HTMLInputElement;
 
 	export const upload = () => {
-		fileUpload.click()
+		fileUpload.click();
-	}
+	};
 </script>
 
 <!-- Falls die maximale Anzahl Bilder erreicht wurde grauen wir den input aus und zeigen einen Hilfstext -->
 {#if images.filter((image) => image.kategorie === kategorie).length === max}
-	<span class="bg-base-200 border px-4 py-2">Maximale Anzahl Bilder wurde erreicht.</span>
+	<span class="bg-base-200 border px-4 py-2"
+		>Maximale Anzahl Bilder wurde erreicht.</span
+	>
 {:else if max > 1}
-<div class="input-standard">
+	<div class="input-standard">
-	<input type="file" class="file-input file-input-ghost h-[38px]" bind:this={fileUpload} {name} multiple on:change={getAllImages} />
+		<input
-	<div class="help-label">
+			type="file"
-		<HelpLabel>
+			class="file-input file-input-ghost h-[38px]"
-			<slot />
+			bind:this={fileUpload}
-		</HelpLabel>
+			{name}
+			multiple
+			on:change={getAllImages}
+		/>
+		<div class="help-label">
+			<HelpLabel>
+				<slot />
+			</HelpLabel>
+		</div>
 	</div>
-
-</div>
 {:else}
-<div class="input-standard">
+	<div class="input-standard">
-	<input type="file" class="file-input file-input-ghost h-[38px]" bind:this={fileUpload} {name} on:change={getAllImages} />
+		<input
-	<div class="help-label">
+			type="file"
-		<HelpLabel>
+			class="file-input file-input-ghost h-[38px]"
-			<slot />
+			bind:this={fileUpload}
-		</HelpLabel>
+			{name}
+			on:change={getAllImages}
+		/>
+		<div class="help-label">
+			<HelpLabel>
+				<slot />
+			</HelpLabel>
+		</div>
 	</div>
-
+{/if}
-</div>
-{/if}