From 8bcd4a014c2c3dc1cd80223db523ffebd7eee9a0 Mon Sep 17 00:00:00 2001
From: Ayobami <lynxdev32@gmail.com>
Date: Wed, 2 Jul 2025 18:44:52 +0100
Subject: [PATCH] ISSUE 10: add upload file functionality

---
 src/components/DockBuilder/DockBuilder.jsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/DockBuilder/DockBuilder.jsx b/src/components/DockBuilder/DockBuilder.jsx
index bafc351..41b08e7 100644
--- a/src/components/DockBuilder/DockBuilder.jsx
+++ b/src/components/DockBuilder/DockBuilder.jsx
@@ -117,10 +117,23 @@ export const DockBuilder = () => {
   };
 
   const uploadFile = (e) => {
-    // TODO: Our own upload the file we must have downloaded previously
-    // TODO: extract the json from the file
-    // TODO: load the json to the editor
-    // TODO: render all
+    const file = e.target.files[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = function (event) {
+      try {
+        const json = JSON.parse(event.target.result);
+        console.log(json);
+        editorMemo.loadFromJSON(json, () => {
+          editorMemo.renderAll();
+        });
+      } catch (err) {
+        alert("Invalid file format. Please select a valid .dock file.");
+      }
+    };
+    reader.readAsText(file);
+    // Reset file input to allow reupload of the same file
+    e.target.value = "";
   };
 
   const downloadImage = useCallback(() => {