diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 295b421..f065a38 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -39,13 +39,18 @@ function canBeFormatted() {
            props.stylizedName.toLowerCase() == 'xslt';
 }
 
+function readFile(file : any) {
+    console.log(file.target.files[0]);
+}
+
 </script>
 
 <template>
     <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">{{ stylizedName }}</span>
+            <span class="dark:text-white mr-2">{{ stylizedName }}</span>
             <div class="flex space-x-2 pb-2">
+                <input id="fileLoader" ref="inputFile" class="file-selector w-4" type="file" @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>
                 <button class="tool-button" @click="clear">Clear</button>