adding ability to import saved nodes

src/components/NodesArbor.vue

@@ -1,11 +1,27 @@
 <script setup>
 import Card from 'primevue/card';
 import ScrollPanel from 'primevue/scrollpanel';
+import FileUpload from 'primevue/fileupload';
 import { useNodeStore } from '@/stores/NodeStore';
 import { storeToRefs } from 'pinia';
 
 const store = useNodeStore();
-const { nodesList } = storeToRefs(store);
+const { nodesList, nodes, searchQuery } = storeToRefs(store);
+
+const handleFileUpload = (input) => {
+  const reader = new FileReader();
+
+  reader.onload = (e) => {
+    try {
+      const json = JSON.parse(e.target.result);
+      nodes.value = json;
+    } catch (error) {
+      console.error('Error parsing JSON:', error);
+    }
+  };
+
+  reader.readAsText(input.files[0]);
+};
 </script>
 
 <template>
@@ -30,6 +46,16 @@ const { nodesList } = storeToRefs(store);
           </template>
         </Card>
       </router-link>
+      <FileUpload
+        v-show="searchQuery === ''"
+        mode="basic"
+        accept=".json"
+        :max-file-size="1000000"
+        :auto="true"
+        choose-label="Import existing nodes"
+        custom-upload
+        @uploader="handleFileUpload"
+      />
     </div>
   </ScrollPanel>
 </template>