diff --git a/src/components/UploadImages.svelte b/src/components/UploadImages.svelte index 62780708..1e6af40b 100644 --- a/src/components/UploadImages.svelte +++ b/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")) { - i--; + if (file.type !== "image/jpeg" && file.type !== "image/png") { 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(); + }; {#if images.filter((image) => image.kategorie === kategorie).length === max} - Maximale Anzahl Bilder wurde erreicht. + Maximale Anzahl Bilder wurde erreicht. {:else if max > 1} -