File selector is now cleared when needed

Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue';
+import InsertTemplateComponent from '@components/common/InsertTemplateComponent.vue'
 import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
-import { ref } from 'vue';
-import CodeEditor from '../CodeEditorComponent.vue';
+import { ref } from 'vue'
+import CodeEditor from '../CodeEditorComponent.vue'
 
 const data = ref('')
+const inputFile = ref()
 
 const props = defineProps(
     {
@@ -15,7 +16,6 @@ const props = defineProps(
 const emit = defineEmits(['update'])
 
 function sendValue() {
-    console.log("input works")
     emit('update', data.value)
 }
 
@@ -25,27 +25,28 @@ function sendNewValue(newValue : string) {
 }
 
 function updateData(newData: string) {
-    data.value = newData;
-    sendValue();
+    data.value = newData
+    inputFile.value.value = ''
+    sendValue()
 }
 
 function clear() {
-    updateData('');
+    updateData('')
 }
 
 function canBeFormatted() {
     return props.stylizedName.toLowerCase() == 'xml' || 
            props.stylizedName.toLowerCase() == 'xsd' || 
-           props.stylizedName.toLowerCase() == 'xslt';
+           props.stylizedName.toLowerCase() == 'xslt'
 }
 
 function readFile(file : any) {
     
     const reader = new FileReader()
     reader.onloadend = () => {
-        var result = reader.result?.toString();
+        var result = reader.result?.toString()
         if (typeof result == "string")
-            sendNewValue(result);
+            sendNewValue(result)
             
     }
     reader.readAsText(file.target.files[0])
@@ -57,7 +58,7 @@ function readFile(file : any) {
     <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pr-4 pb-2">
         <div class="flex place-content-between w-full items-center">
             <span class="dark:text-white mr-2">{{ stylizedName }}</span>
-            <div class="flex space-x-2 pb-2">
+            <div class="flex space-x-2 pb-2 overflow-x-scroll">
                 <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
                 <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
                 <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>