From df1fe01abea69de85a3555134a9783144f788926 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Wed, 31 Jan 2024 09:05:23 +0100
Subject: [PATCH] makes watcher eager and aligns files vertically

---
 public/js/components/Form/Upload/Dms.js | 38 ++++++++++++++-----------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/public/js/components/Form/Upload/Dms.js b/public/js/components/Form/Upload/Dms.js
index 6d55cfb09..fd6af9858 100755
--- a/public/js/components/Form/Upload/Dms.js
+++ b/public/js/components/Form/Upload/Dms.js
@@ -55,30 +55,34 @@ export default {
 		}
 	},
 	watch: {
-		modelValue(n) {
-			if (n instanceof FileList)
-				return this.$refs.upload.files = n;
-
-			const dt = new DataTransfer();
-			const dms = [];
-			for (var file of n) {
-				if (file instanceof File) {
-					dt.items.add(file);
-				} else {
-					const dmsFile = new File([JSON.stringify(file)], file.name, {
-						type: 'application/x.fhc-dms+json'
-					});
-					dt.items.add(dmsFile);
+		modelValue:{
+			handler(n) {
+				if (n instanceof FileList)
+					return this.$refs.upload.files = n;
+	
+				const dt = new DataTransfer();
+				const dms = [];
+				for (var file of n) {
+					if (file instanceof File) {
+						dt.items.add(file);
+					} else {
+						const dmsFile = new File([JSON.stringify(file)], file.name, {
+							type: 'application/x.fhc-dms+json'
+						});
+						dt.items.add(dmsFile);
+					}
 				}
-			}
-			this.$emit('update:modelValue', dt.files);
+				this.$emit('update:modelValue', dt.files);
+			},
+			immediate:true
 		}
 	},
 	template: `
 	<div class="form-upload-dms">
+	
 		<input ref="upload" class="form-control" :class="inputClass" :id="id" :name="name" :multiple="multiple" type="file" @change="addFiles">
 		<ul v-if="modelValue.length && multiple && !noList" class="list-unstyled m-0">
-			<li v-for="(file, index) in modelValue" :key="index" class="d-flex mx-1 mt-1">
+			<li v-for="(file, index) in modelValue" :key="index" class="d-flex mx-1 mt-1 align-items-center">
 				<span class="col-auto"><i class="fa fa-file me-1"></i></span>
 				<span class="col">{{ file.name }}</span>
 				<button class="col-auto btn btn-outline-secondary btn-p-0" @click="removeFile(index)">