Added file uploading to formatters

Frontend/src/views/HtmlFormatterView.vue

@@ -15,6 +15,18 @@ function setTextFieldValue(data: string) {
     html.value = data.toString()
 }
 
+function readFile(file : any) {
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        var result = reader.result?.toString()
+        if (typeof result == "string")
+            setTextFieldValue(result);
+            
+    }
+    reader.readAsText(file.target.files[0])
+}
+
 </script>
 
 <template>
@@ -22,6 +34,9 @@ function setTextFieldValue(data: string) {
         <div id="toolbar" class="flex flex-col gap-4 items-center lg:flex-row place-content-between">
             <span class="dark:text-slate-100">HTML Formatter</span>
             <div class="flex flex-wrap gap-2 justify-center">
+                <div class="flex items-stretch w-64">
+                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.html,.htm,text/xml,text/plain,text/html" @change="readFile" />
+                </div>
                 <InsertTemplateComponent stylized-name="HTML" @update:defaultData="setTextFieldValue"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
                 <HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="Minimize" />

Frontend/src/views/JsonFormatterView.vue

@@ -19,6 +19,18 @@ function clear() {
     json.value = '';
 }
 
+function readFile(file : any) {
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        var result = reader.result?.toString()
+        if (typeof result == "string")
+            setTextFieldValue(result);
+            
+    }
+    reader.readAsText(file.target.files[0])
+}
+
 </script>
 
 <template>
@@ -26,6 +38,9 @@ function clear() {
         <div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
             <span class="dark:text-slate-100">JSON Formatter</span>
             <div class="flex flex-wrap gap-2 justify-center">
+                <div class="flex items-stretch w-64">
+                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".json,text/xml,text/plain,text/json,application/json" @change="readFile" />
+                </div>
                 <InsertTemplateComponent stylized-name="JSON" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
                 <JsonButtonFormatterComponent isMinimizer :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>

Frontend/src/views/XmlFormatterView.vue

@@ -19,6 +19,18 @@ function clear() {
     xml.value = '';
 }
 
+function readFile(file : any) {
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        var result = reader.result?.toString()
+        if (typeof result == "string")
+            setTextFieldValue(result);
+            
+    }
+    reader.readAsText(file.target.files[0])
+}
+
 </script>
 
 <template>
@@ -26,6 +38,9 @@ function clear() {
         <div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
             <span class="dark:text-slate-100">XML Formatter</span>
             <div class="flex flex-wrap gap-2 justify-center">
+                <div class="flex items-stretch w-64">
+                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
+                </div>
                 <InsertTemplateComponent stylized-name="XML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
                 <XMLButtonFormatterComponent is-minimizer :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>