Frontend/src/components/xml/XmlInputFieldComponent.vue

@@ -3,6 +3,7 @@ import InsertTemplateComponent from '@components/common/InsertTemplateComponent.
 import XMLButtonFormatterComponent from '@components/formatter/XMLButtonFormatterComponent.vue'
 import { ref } from 'vue';
 import CodeEditor from '../CodeEditorComponent.vue';
+import { Buffer } from 'buffer';
 
 const data = ref('')
 
@@ -40,7 +41,16 @@ function canBeFormatted() {
 }
 
 function readFile(file : any) {
-    console.log(file.target.files[0]);
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        var result = reader.result?.toString();
+        if (typeof result == "string") {
+            sendNewValue(result);
+        }
+            
+    }
+    reader.readAsText(file.target.files[0])
 }
 
 </script>

Frontend/src/style.css

@@ -15,5 +15,5 @@
 }
 
 .file-selector {
-    @apply file:bg-inherit file:shadow-inherit dark:file:text-white file:border-inherit w-full p-2 px-4 rounded-full text-sm text-gray-900 border border-gray-300 cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
+    @apply file:border-none file:hover:brightness-110 file:py-2 file:px-4 file:h-full file:min-w-fit file:rounded-full file:bg-gradient-to-r file:from-blue-400 file:to-sky-300  file:dark:text-white file:dark:from-sky-600 file:dark:to-sky-800 file:hover:bg-blue-400 w-fit rounded-full text-sm text-gray-900 border border-gray-300 cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
 }