file uploader for json

Signed-off-by: MeastroZI [email protected]

www/app.js

@@ -3,6 +3,7 @@ import 'codemirror/mode/javascript/javascript'
 import { Chart } from 'chart.js/dist/chart'
 import analyze from '../js/analyze'
 import taxonomy from '..'
+/* global FileReader */
 
 // From https://arxiv.org/abs/2201.02089
 const EXAMPLE_JSON = {
@@ -178,8 +179,44 @@ function onAnalyze (value) {
   }
 }
 
-document.getElementById('analyze').addEventListener('click', () => {
-  return onAnalyze(code.getValue())
+const LoderElement = document.createElement('div')
+LoderElement.classList.add('loader')
+
+function showLoader (bool) {
+  if (bool) {
+    document.querySelector('main').appendChild(LoderElement)
+  } else {
+    document.querySelector('main').removeChild(LoderElement)
+  }
+}
+
+const __fileInput__ = document.getElementById('fileInput')
+function uploadFile () {
+  const file = __fileInput__.files[0]
+  showLoader(true)
+  if (file) {
+    code.setValue('')
+    if (file.type === 'application/json') {
+      const reader = new FileReader() // Add FileReader global comment
+      reader.onload = function (event) {
+        const contents = event.target.result
+        onAnalyze(contents)
+        showLoader(false)
+      }
+      reader.readAsText(file)
+    } else {
+      console.error('Please select a JSON file.')
+    }
+  } else {
+    onAnalyze(code.getValue())
+    showLoader(false)
+  }
+}
+
+document.getElementById('remove').addEventListener('click', () => {
+  __fileInput__.value = ''
 })
 
+document.getElementById('analyze').addEventListener('click', uploadFile)
+
 onAnalyze(code.getValue())

www/index.html

@@ -16,6 +16,9 @@
   <main class="uk-child-width-expand uk-grid-collapse uk-grid uk-grid-match" uk-grid>
     <div id="editor" class="uk-width-1-2@m"></div>
     <div id="results" class="uk-padding-small uk-width-1-2@m">
+
+      <input type="file" id="fileInput" accept="application/json"  class="uk-input uk-form-file">
+      <button id="remove" class="uk-button uk-button-danger uk-margin-small uk-width-1-1">Remove File</button>
       <button id="analyze" class="uk-button uk-button-primary uk-width-1-1">Analyze JSON</button>
 
       <div id="json-error" class="uk-alert-danger uk-margin uk-padding-small">

www/style.css

@@ -9,3 +9,32 @@
 .CodeMirror {
   height: 100% !important;
 }
+
+/* CSS styles for the loader */
+.loader {
+  /* Increase the size of the loader */
+  width: 50px; /* New width */
+  height: 50px; /* New height */
+
+  /* Center the loader on the page */
+  position: fixed;
+  top: 50%; /* Vertically center */
+  left: 50%; /* Horizontally center */
+  transform: translate(-50%, -50%);
+
+  /* Styling */
+  border: 6px solid #666; /* Dark gray border */
+  border-top: 6px solid #2c3e50; /* Darker blue top border */
+  border-radius: 50%; /* Make it round */
+  animation: spin 1s linear infinite; /* Animation properties */
+}
+
+/* Keyframes for the spinning animation */
+@keyframes spin {
+  from {
+      transform: rotate(0deg);
+  }
+  to {
+      transform: rotate(360deg);
+  }
+}