Fix import

package-lock.json

@@ -26,7 +26,8 @@
         "react-router": "^6.21.0",
         "react-router-dom": "^6.21.0",
         "socket.io-client": "^4.7.2",
-        "unique-names-generator": "^4.7.1"
+        "unique-names-generator": "^4.7.1",
+        "url": "^0.11.1"
       },
       "devDependencies": {
         "@types/react": "^18.2.43",
@@ -2022,7 +2023,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
       "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.1",
@@ -2324,7 +2324,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
       "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.1",
         "gopd": "^1.0.1",
@@ -3107,7 +3106,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -3152,7 +3150,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
       "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
@@ -3238,7 +3235,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -3274,7 +3270,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
       "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.2"
       },
@@ -3286,7 +3281,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
       "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -3298,7 +3292,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -3325,7 +3318,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
       "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -4110,7 +4102,6 @@
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
       "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -4548,6 +4539,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/qs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
+      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -4974,7 +4979,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
       "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
-      "dev": true,
       "dependencies": {
         "define-data-property": "^1.1.1",
         "get-intrinsic": "^1.2.1",
@@ -5024,7 +5028,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -5520,6 +5523,20 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.1.tgz",
+      "integrity": "sha512-rWS3H04/+mzzJkv0eZ7vEDGiQbgquI1fGfOad6zKvgYQi1SzMmhl7c/DdRGxhaWrVH6z0qWITo8rpnxK/RfEhA==",
+      "dependencies": {
+        "punycode": "^1.4.1",
+        "qs": "^6.11.0"
+      }
+    },
+    "node_modules/url/node_modules/punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -28,7 +28,8 @@
     "react-router": "^6.21.0",
     "react-router-dom": "^6.21.0",
     "socket.io-client": "^4.7.2",
-    "unique-names-generator": "^4.7.1"
+    "unique-names-generator": "^4.7.1",
+    "url": "^0.11.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

src/components/ControlPanel.jsx

@@ -1245,10 +1245,10 @@ export default function ControlPanel({
               return;
             }
             const reader = new FileReader();
-            reader.onload = function (event) {
+            reader.onload = async (e) => {
               let jsonObject = null;
               try {
-                jsonObject = JSON.parse(event.target.result);
+                jsonObject = JSON.parse(e.target.result);
               } catch (error) {
                 setError({
                   type: STATUS.ERROR,

src/data/schemas.js

@@ -19,7 +19,7 @@ const tableSchema = {
           notNull: { type: "boolean" },
           increment: { type: "boolean" },
           comment: { type: "string" },
-          length: { type: ["string", "number"] },
+          size: { type: ["string", "number"] },
           values: { type: "array", items: { type: "string" } },
         },
         required: [