fix: Fix file type judgement problems

client/components/Download.js

@@ -42,20 +42,20 @@ export default {
   watch: {
     isConnectSuccess(newValue) {
       if (newValue) {
-        this.receiveFileUtil.receiveFiles(this.connectCore, this.addDownloadFileItem, this.updateFileProgress, this.updateFileUrl, this.updateFileSuccess)
+        this.receiveUtil.receiveFiles(this.connectCore, this.addDownloadFileItem, this.updateFileProgress, this.updateFileUrl, this.updateFileSuccess)
       }
     }
   },
 
   setup() {
     const dataStore = useDataStore()
 
-    const { connectCore, receiveFileUtil, isConnectSuccess } = storeToRefs(dataStore)
+    const { connectCore, receiveUtil, isConnectSuccess } = storeToRefs(dataStore)
 
     return {
       dataStore,
       connectCore,
-      receiveFileUtil,
+      receiveUtil,
       isConnectSuccess,
     }
   },

client/components/DownloadItem.js

@@ -18,7 +18,7 @@ export default {
     },
     type: {
       type: String,
-      default: "file"
+      default: "TRANSFER_TYPE_FILE"
     },
     success: {
       type: Boolean,
@@ -43,19 +43,18 @@ export default {
   },
 
   template: /*html*/`
-    <a v-if="type==='file' || type==='photo'" ref="downloadLink" :href="url" class="downloadFileItem file" :download="name" :class="{ success: success, loading: !success }">
+    <a v-if="type==='TRANSFER_TYPE_FILE' || type==='TRANSFER_TYPE_PHOTO'" ref="downloadLink" :href="url" class="downloadFileItem file" :download="name" :class="{ success: success, loading: !success }">
       <div id="downloadDisplay">
         <p id="downloadName">{{ name }}</p>
         <progress id="downloadProgress" :value="progress" :max="size"></progress>
-        <img v-if="type==='photo'"
+        <img v-if="type==='TRANSFER_TYPE_PHOTO' && success"
           id="downloadContent"
           :src="url"
           alt="Photo"
-          v-if="success"
         />
       </div>
     </a>
-    <div v-if="type==='text'" class="downloadFileItem text" :class="{ success: success, loading: !success }" @click="onTextClick">
+    <div v-if="type==='TRANSFER_TYPE_TEXT'" class="downloadFileItem text" :class="{ success: success, loading: !success }" @click="onTextClick">
       <div id="downloadDisplay">
         <p id="downloadContent">{{ name }}</p>
         <div class="cover">

client/components/Upload.js

@@ -14,7 +14,7 @@ export default {
 
   methods: {
     async sendFiles() { // Send the file meta and content
-      this.sendFileUtil.sendFiles(this.$refs.fileInput.files, 'file', this.sendCore)
+      this.sendFileUtil.sendFiles(this.$refs.fileInput.files, 'TRANSFER_TYPE_FILE', this.sendCore)
     },
 
     onFileDrop(event) { // Handle file drop event
@@ -77,7 +77,7 @@ export default {
         );
         console.log(file);
 
-        await this.sendFileUtil.sendFiles([file], 'photo', this.sendCore);
+        await this.sendFileUtil.sendFiles([file], 'TRANSFER_TYPE_PHOTO', this.sendCore);
       }.bind(this), 'image/png');
     },
 

client/dataStore.js

@@ -5,15 +5,15 @@ import ConnectCore from './e2e/connectCore.js'
 import SendCore from './e2e/sendCore.js'
 import SendFileUtil from './e2e/sendFileUtil.js'
 import SendTextUtil from './e2e/sendTextUtil.js'
-import ReceiveFileUtil from './e2e/receiveFileUtil.js'
+import ReceiveUtil from './e2e/receiveUtil.js'
 
 export const useDataStore = defineStore('data', {
   state: () => ({
     connectCore: ref(null),
     sendCore: ref(null),
     sendFileUtil: ref(null),
     sendTextUtil: ref(null),
-    receiveFileUtil: ref(null),
+    receiveUtil: ref(null),
 
     clientId: ref('LOADING'),
 
@@ -32,7 +32,7 @@ export const useDataStore = defineStore('data', {
       )
       this.sendFileUtil = new SendFileUtil()
       this.sendTextUtil = new SendTextUtil()
-      this.receiveFileUtil = new ReceiveFileUtil()
+      this.receiveUtil = new ReceiveUtil()
     },
 
     setClientId(id) { // Set the client ID

client/e2e/receiveFileUtil.js → client/e2e/receiveUtil.js

@@ -1,4 +1,4 @@
-class ReceiveFileUtil {
+class ReceiveUtil {
   constructor() {
     this.addDownloadFileItem = null;
     this.updateFileProgress = null;
@@ -67,9 +67,9 @@ class ReceiveFileUtil {
       console.log(`[INFO] Received size: ${data}`)
       this.fileSizeQueue.push(parseInt(data))
     } else {
-      if (data === 'file'
-        || data === 'text'
-        || data === 'photo'
+      if (data === 'TRANSFER_TYPE_FILE'
+        || data === 'TRANSFER_TYPE_TEXT'
+        || data === 'TRANSFER_TYPE_PHOTO'
       ) {
         console.log(`[INFO] Received type: ${data}`)
         this.fileTypeQueue.push(data)
@@ -92,7 +92,7 @@ class ReceiveFileUtil {
         this.fileTypeQueue[this.fileTypeQueue.length - 1]
       )
 
-      if (this.fileTypeQueue[this.fileTypeQueue.length - 1] === 'text') {
+      if (this.fileTypeQueue[this.fileTypeQueue.length - 1] === 'TRANSFER_TYPE_TEXT') {
         this.fileTypeQueue.shift()
         this.fileNameQueue.shift()
         this.fileSizeQueue.shift()
@@ -141,4 +141,4 @@ class ReceiveFileUtil {
   }
 }
 
-export default ReceiveFileUtil;
+export default ReceiveUtil;

client/e2e/sendTextUtil.js

@@ -14,11 +14,11 @@ class SendTextUtil {
   async sendTextContent(text) { // Send the type, name, and size of the file
     if (!this.checkSendAvailability(text)) return
 
-    await this.sendCore.sendData('text')
+    await this.sendCore.sendData('TRANSFER_TYPE_TEXT')
     await this.sendCore.sendData(text)
     await this.sendCore.sendData(text.length)
 
-    console.log(`[INFO] Sent content: ${'text'} | ${text} | ${text.length}`)
+    console.log(`[INFO] Sent content: ${'TRANSFER_TYPE_FILE'} | ${text} | ${text.length}`)
   }
 
   checkSendAvailability(text) { // Check if the text is empty or the data channel is open

package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-transfer-server",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Server for file transfer",
   "main": "server/server.js",
   "scripts": {