fix Send File

package.json

@@ -12,14 +12,15 @@
   "devDependencies": {
     "@nuxt/devtools": "^1.0.8",
     "@nuxt/ui": "^2.14.2",
-    "nuxt": "^3.10.3",
+    "nuxt": "^3.11.1",
     "sass": "^1.72.0"
   },
   "dependencies": {
     "@iconify-json/line-md": "^1.1.36",
     "@iconify-json/solar": "^1.1.9",
     "@nuxtjs/color-mode": "^3.3.2",
     "@vueuse/nuxt": "^10.9.0",
+    "downloadjs": "^1.4.7",
     "peer": "^1.0.2",
     "peerjs": "^1.5.2",
     "peerjs-server": "^0.2.9",

pages/Receive.vue

@@ -12,7 +12,7 @@
 
 <script setup>
 import { useQRCode } from "@vueuse/integrations/useQRCode";
-
+import { download } from "downloadjs";
 import { ref, onMounted } from "vue";
 import Peer from "peerjs";
 import { uniqueNamesGenerator, starWars, adjectives } from "unique-names-generator";
@@ -23,11 +23,35 @@ const characterName = uniqueNamesGenerator({
 let qrcode = useQRCode(characterName);
 const messageReceived = ref("");
 const myPeer = new Peer(characterName, {});
-
+const receivedFile = ref(null);
+const receivedChunks = ref([]);
 onMounted(() => {
     myPeer.on("connection", (conn) => {
         conn.on("data", (data) => {
             messageReceived.value = data;
+            console.log(typeof data);
+            if (typeof data === "object") {
+                // Check for metadata
+                receivedFile.value = data;
+            } else {
+                receivedChunks.value.push(data);
+            }
+
+            if (
+                receivedChunks.value.length === Math.ceil(receivedFile.value.size / (1024 * 1024))
+            ) {
+                // Download completed, trigger download logic
+                const blob = new Blob(receivedChunks.value, {
+                    type: receivedFile.value.type,
+                });
+                const url = window.URL.createObjectURL(blob);
+                const link = document.createElement("a");
+                link.href = url;
+                link.download = receivedFile.value.name;
+                link.click();
+
+                window.URL.revokeObjectURL(url);
+            }
         });
     });
 });

pages/Send.vue

@@ -111,10 +111,28 @@ const handleSendFile = async () => {
   if (!file.value) {
     return;
   }
-
   const reader = new FileReader();
+  reader.readAsArrayBuffer(file.value);
+  reader.onload = () => {
+    const fileData = {
+      name: file.value.name,
+      type: file.value.type,
+      size: file.value.size,
+      chunks: [],
+    };
+
+    const chunkSize = 15 * 1024 * 1024; // Adjust chunk size as needed
+
+    for (let i = 0; i < reader.result.byteLength; i += chunkSize) {
+      const chunk = reader.result.slice(i, i + chunkSize);
+      fileData.chunks.push(chunk);
+    }
+
+    sendFile(fileData);
+  };
+  /*const reader = new FileReader();
   reader.readAsDataURL(file.value);
-  reader.onload = () => sendFile(reader.result);
+  reader.onload = () => sendFile(reader.result);*/
 };
 async function scan () {
   qrscannerEl.value = true;