add fileupload component, eventhandling

frontend/src/lib/components/ChildrenRegistration.svelte

@@ -155,14 +155,19 @@
 		{/if}
 
 		<form class="m-1 mx-auto w-full flex-col space-y-6">
-			{#each data as element, i}
+			{#each data as element}
 				<DataInput
 					component={element.component}
 					bind:value={element.value}
 					bind:additionalInput={element.additionalValue}
 					label={element.props.label}
 					properties={element.props}
 					textTrigger={element.props.textTrigger}
+					eventHandlers={{
+						'on:change': element.onchange,
+						'on:blur': element.onblur,
+						'on:click': element.onclick
+					}}
 				/>
 			{/each}
 		</form>

frontend/src/lib/components/DataInput/DataInput.svelte

@@ -12,7 +12,7 @@
 	export let componentClass: string = '';
 	export let textTrigger: string = 'noAdditionalText';
 	export let showTextField: boolean = false;
-	export let additionalInput: any;
+	export let additionalInput: any = null;
 
 	// data to display and event handlers for dynamcis.
 	export let properties: any = {};
@@ -49,13 +49,25 @@
 	<svelte:component
 		this={component}
 		class={highlight
-			? 'rounded border-2 border-primary-600 dark:border-primary-600 ' + componentClass
+			? 'border-primary-600 dark:border-primary-600 rounded border-2 ' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}
-		on:blur={eventHandlers['on:blur']}
-		on:change={eventHandlers['on:change']}
-		on:click={eventHandlers['on:click']}
+		on:blur={(event) => {
+			if (eventHandlers['on:blur']) {
+				eventHandlers['on:blur'](event);
+			}
+		}}
+		on:change={(event) => {
+			if (eventHandlers['on:change']) {
+				eventHandlers['on:change'](event);
+			}
+		}}
+		on:click={(event) => {
+			if (eventHandlers['on:click']) {
+				eventHandlers['on:click'](event);
+			}
+		}}
 	/>
 
 	{#if showTextField === true}

frontend/src/lib/components/DataInput/Fileupload.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Fileupload } from 'flowbite-svelte';
+
+	export let value;
+	console.log('props: ', $$props);
+</script>
+
+<Fileupload
+	class={$$props.class}
+	accept={$$props.accept}
+	on:change={(event) => {
+		if (!(event.target === null)) {
+			const image = event.target.files[0];
+			// use https://svelte.dev/repl/b17c13d4f1bb40799ccf09e0841ddd90?version=4.2.19
+			let reader = new FileReader();
+			reader.readAsDataURL(image);
+			reader.onload = (e) => {
+				value = e.target.result;
+			};
+		}
+	}}
+/>

frontend/src/lib/components/UserDataInput.svelte

@@ -128,6 +128,11 @@
 					label={element.props.label}
 					properties={element.props}
 					textTrigger={element.props.textTrigger}
+					eventHandlers={{
+						'on:change': element.onchange,
+						'on:blur': element.onblur,
+						'on:click': element.onclick
+					}}
 				/>
 			{/each}
 		</form>

frontend/src/lib/components/UserLogin.svelte

@@ -123,6 +123,11 @@
 						bind:value={credentials[i]}
 						properties={element}
 						label={element.label}
+						eventHandlers={{
+							'on:change': element.onchange,
+							'on:blur': element.onblur,
+							'on:click': element.onclick
+						}}
 					/>
 				{/each}
 			</form>
@@ -135,7 +140,7 @@
 		<span class="container mx-auto w-full text-gray-700 dark:text-gray-400">Not registered?</span>
 		<a
 			href={`${base}/userLand/userRegistration`}
-			class="text-primary-700 hover:underline dark:text-primary-500"
+			class="text-primary-700 dark:text-primary-500 hover:underline"
 		>
 			Create account
 		</a>

frontend/src/lib/components/UserRegistration.svelte

@@ -154,7 +154,11 @@
 					component={Input}
 					properties={element}
 					bind:value={inputValues[i]}
-					eventHandlers={{ 'on:blur': element.onBlur }}
+					eventHandlers={{
+						'on:change': element.onChange,
+						'on:blur': element.onBlur,
+						'on:click': element.onClick
+					}}
 					checkValid={element.checkValid}
 				/>
 			{/each}

frontend/src/routes/childLand/childDataInput/+page.svelte

@@ -1,7 +1,9 @@
 <script>
 	import ChildrenRegistration from '$lib/components/ChildrenRegistration.svelte';
 	import CheckboxList from '$lib/components/DataInput/CheckboxList.svelte';
-	import { Fileupload, Input, MultiSelect, Select, Textarea } from 'flowbite-svelte';
+	import Fileupload from '$lib/components/DataInput/Fileupload.svelte';
+
+	import { Input, MultiSelect, Select, Textarea } from 'flowbite-svelte';
 
 	const data = [
 		{