From de72a1abd4f017d30f9d007b768a14a3ea345768 Mon Sep 17 00:00:00 2001
From: NFriedo <69233063+NFriedo@users.noreply.github.com>
Date: Thu, 6 Mar 2025 15:03:39 +0100
Subject: [PATCH] fix file inputs for school policy and school terms forms

---
 .../administration/SchoolPolicyFormDialog.vue | 35 +++++++------------
 .../administration/SchoolTermsFormDialog.vue  | 35 +++++++------------
 2 files changed, 26 insertions(+), 44 deletions(-)

diff --git a/src/components/organisms/administration/SchoolPolicyFormDialog.vue b/src/components/organisms/administration/SchoolPolicyFormDialog.vue
index e0fe1ea419..dc5716f1c1 100644
--- a/src/components/organisms/administration/SchoolPolicyFormDialog.vue
+++ b/src/components/organisms/administration/SchoolPolicyFormDialog.vue
@@ -26,6 +26,7 @@
 					</div>
 				</v-alert>
 				<v-file-input
+					v-model="file"
 					ref="input-file"
 					class="input-file mb-2"
 					data-testid="input-file"
@@ -41,9 +42,8 @@
 						t('pages.administration.school.index.schoolPolicy.hints.uploadFile')
 					"
 					:persistent-hint="true"
-					:rules="[rules.required, rules.mustBePdf, rules.maxSize(4194304)]"
+					:rules="[rules.required, rules.mustBePdf, rules.maxSize]"
 					@blur="onBlur"
-					@update:modelValue="onFileChange"
 				>
 					<template v-slot:append-inner>
 						<v-icon
@@ -96,33 +96,24 @@ export default defineComponent({
 		const policyForm: Ref<File[]> = ref([]);
 		const isValid: Ref<boolean> = ref(false);
 		const isTouched: Ref<boolean> = ref(false);
-		const files: Ref<File[]> = ref([]);
+		const file: Ref<File | null> = ref(null);
 
 		const school: ComputedRef<School> = computed(() => schoolsModule.getSchool);
 
+		const maxFileUploadSizeInKb = 4194304;
 		const rules = {
-			required: (value: File[]) =>
-				!(value.length === 0) || t("common.validation.required"),
-			mustBePdf: (value: File[]) =>
-				!(value.length === 0) ||
-				value[0].type === "application/pdf" ||
+			required: (value: File | null) =>
+				!!value || t("common.validation.required"),
+			mustBePdf: (value: File | null) =>
+				value?.type === "application/pdf" ||
 				t("pages.administration.school.index.schoolPolicy.validation.notPdf"),
-			maxSize: (bytes: number) => (value: File[]) =>
-				!(value.length === 0) ||
-				value[0].size <= bytes ||
+			maxSize: (value: File | null) =>
+				(!!value && value.size <= maxFileUploadSizeInKb) ||
 				t(
 					"pages.administration.school.index.schoolPolicy.validation.fileTooBig"
 				),
 		};
 
-		const onFileChange = (_files: File[] | File) => {
-			if (Array.isArray(_files)) {
-				files.value = _files;
-			} else {
-				files.value = [_files];
-			}
-		};
-
 		const onBlur = () => {
 			isTouched.value = true;
 		};
@@ -139,14 +130,14 @@ export default defineComponent({
 		};
 
 		const submit = async () => {
-			if (isValid.value) {
+			if (isValid.value && file.value) {
 				const newConsentVersion: CreateConsentVersionPayload = {
 					schoolId: school.value.id,
 					title: t("pages.administration.school.index.schoolPolicy.fileName"),
 					consentText: "",
 					consentTypes: ["privacy"],
 					publishedAt: currentDate().toString(),
-					consentData: (await toBase64(files.value[0])) as string,
+					consentData: (await toBase64(file.value)) as string,
 				};
 
 				emit("close");
@@ -168,13 +159,13 @@ export default defineComponent({
 			cancel,
 			submit,
 			onBlur,
-			onFileChange,
 			isValid,
 			isTouched,
 			policyForm,
 			school,
 			mdiAlert,
 			mdiFileReplaceOutline,
+			file,
 		};
 	},
 });
diff --git a/src/components/organisms/administration/SchoolTermsFormDialog.vue b/src/components/organisms/administration/SchoolTermsFormDialog.vue
index 4d3c82d171..58ca2198d3 100644
--- a/src/components/organisms/administration/SchoolTermsFormDialog.vue
+++ b/src/components/organisms/administration/SchoolTermsFormDialog.vue
@@ -26,6 +26,7 @@
 					</div>
 				</v-alert>
 				<v-file-input
+					v-model="file"
 					ref="input-file"
 					class="input-file mb-2"
 					data-testid="input-file"
@@ -40,9 +41,8 @@
 						t('pages.administration.school.index.termsOfUse.hints.uploadFile')
 					"
 					:persistent-hint="true"
-					:rules="[rules.required, rules.mustBePdf, rules.maxSize(4194304)]"
+					:rules="[rules.required, rules.mustBePdf, rules.maxSize]"
 					@blur="onBlur"
-					@update:modelValue="onFileChange"
 				>
 					<template v-slot:append-inner>
 						<v-icon
@@ -95,20 +95,19 @@ export default defineComponent({
 		const termsForm: Ref<File[]> = ref([]);
 		const isFormValid: Ref<boolean> = ref(false);
 		const isFormTouched: Ref<boolean> = ref(false);
-		const files: Ref<File[]> = ref([]);
+		const file: Ref<File | null> = ref(null);
 
 		const school: ComputedRef<School> = computed(() => schoolsModule.getSchool);
 
+		const maxFileUploadSizeInKb = 4194304;
 		const validationRules = {
-			required: (value: File[]) =>
-				!(value.length === 0) || t("common.validation.required"),
-			mustBePdf: (value: File[]) =>
-				!(value.length === 0) ||
-				value[0].type === "application/pdf" ||
+			required: (value: File | null) =>
+				!!value || t("common.validation.required"),
+			mustBePdf: (value: File | null) =>
+				value?.type === "application/pdf" ||
 				t("pages.administration.school.index.termsOfUse.validation.notPdf"),
-			maxSize: (bytes: number) => (value: File[]) =>
-				!(value.length === 0) ||
-				value[0].size <= bytes ||
+			maxSize: (value: File | null) =>
+				(!!value && value.size <= maxFileUploadSizeInKb) ||
 				t("pages.administration.school.index.termsOfUse.validation.fileTooBig"),
 		};
 
@@ -116,14 +115,6 @@ export default defineComponent({
 			isFormTouched.value = true;
 		};
 
-		const onFileChange = (_files: File[] | File) => {
-			if (Array.isArray(_files)) {
-				files.value = _files;
-			} else {
-				files.value = [_files];
-			}
-		};
-
 		const resetForm = () => {
 			termsForm.value = [];
 			isFormValid.value = false;
@@ -136,14 +127,14 @@ export default defineComponent({
 		};
 
 		const submit = async () => {
-			if (isFormValid.value) {
+			if (isFormValid.value && file.value) {
 				const newConsentVersion: CreateConsentVersionPayload = {
 					schoolId: school.value.id,
 					title: t("pages.administration.school.index.termsOfUse.fileName"),
 					consentText: "",
 					consentTypes: ["termsOfUse"],
 					publishedAt: currentDate().toString(),
-					consentData: (await toBase64(files.value[0])) as string,
+					consentData: (await toBase64(file.value)) as string,
 				};
 
 				emit("close");
@@ -165,13 +156,13 @@ export default defineComponent({
 			cancel,
 			submit,
 			onBlur,
-			onFileChange,
 			isValid: isFormValid,
 			isTouched: isFormTouched,
 			termsForm,
 			school,
 			mdiAlert,
 			mdiFileReplaceOutline,
+			file,
 		};
 	},
 });