Added testing route to check server issues

Added test routes to pinpoint frontend to backend communication issues

pages/test.vue

@@ -1,94 +1,101 @@
 <script setup>
+import { ref } from 'vue';
+
 definePageMeta({
   title: "API Test Page"
 });
 
 const message = ref('');
+const formData = ref({
+  name: '',
+  animal: ''
+});
 const selectedFile = ref(null);
-const isUploading = ref(false);
-
-async function testApi() {
-  try {
-    const response = await $fetch('/api/test/test-response', {
-      method: 'POST'
-    });
-    message.value = JSON.stringify(response, null, 2);
-  } catch (error) {
-    message.value = 'Error: ' + error.message;
-  }
-}
-
-async function handleFileUpload() {
-  if (!selectedFile.value) {
-    message.value = 'Please select a file first';
-    return;
-  }
-
-  try {
-    isUploading.value = true;
-    message.value = 'Uploading file...';
-
-    const formData = new FormData();
-    formData.append('fileName', selectedFile.value.name);
-    formData.append('file', selectedFile.value);
-
-    const response = await $fetch('/api/test/test-response', {
-      method: 'POST',
-      body: formData
-    });
-
-    message.value = JSON.stringify(response, null, 2);
-  } catch (error) {
-    message.value = 'Error: ' + error.message;
-  } finally {
-    isUploading.value = false;
-  }
-}
 
 function handleFileSelect(event) {
   const file = event.target.files[0];
   if (file) {
+    // Check file size (10MB limit)
+    if (file.size > 10 * 1024 * 1024) {
+      alert('File size must be less than 10MB');
+      event.target.value = ''; // Clear the input
+      selectedFile.value = null;
+      return;
+    }
     selectedFile.value = file;
-    message.value = `Selected file: ${file.name} (${formatFileSize(file.size)})`;
   }
 }
 
-function formatFileSize(bytes) {
+async function handleSubmit() {
-  if (bytes === 0) return '0 B';
+  try {
-  const k = 1024;
+    const multipartFormData = new FormData();
-  const sizes = ['B', 'KB', 'MB', 'GB'];
+    multipartFormData.append('name', formData.value.name);
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
+    multipartFormData.append('animal', formData.value.animal);
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    
+    if (selectedFile.value) {
+      multipartFormData.append('file', selectedFile.value);
+    }
+
+    const response = await fetch('/api/test/test-response', {
+      method: 'POST',
+      body: multipartFormData
+    });
+
+    const data = await response.json();
+    message.value = data.message;
+  } catch (error) {
+    message.value = 'Error: ' + error.message;
+  }
 }
 </script>
 
 <template>
   <div class="flex flex-col items-center justify-center min-h-screen p-4 space-y-6">
-    <!-- File Upload Section -->
+    <!-- Form Section -->
     <div class="w-full max-w-md space-y-4">
-      <div class="flex flex-col items-center space-y-4">
+      <form @submit.prevent="handleSubmit" class="space-y-4">
-        <input
+        <div>
-          type="file"
+          <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
-          @change="handleFileSelect"
+          <input
-          class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
+            id="name"
-        />
+            v-model="formData.name"
-        <button
+            type="text"
-          @click="handleFileUpload"
+            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-          :disabled="!selectedFile || isUploading"
+            placeholder="Enter your name"
-          class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors disabled:bg-blue-300 disabled:cursor-not-allowed w-full"
+            required
-        >
+          />
-          {{ isUploading ? 'Uploading...' : 'Upload File' }}
+        </div>
-        </button>
+        
-      </div>
+        <div>
-    </div>
+          <label for="animal" class="block text-sm font-medium text-gray-700 mb-1">Favorite Animal</label>
+          <input
+            id="animal"
+            v-model="formData.animal"
+            type="text"
+            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+            placeholder="Enter your favorite animal"
+            required
+          />
+        </div>
 
-    <!-- Test API Button -->
+        <div>
-    <button
+          <label for="file" class="block text-sm font-medium text-gray-700 mb-1">Upload File (Max 10MB)</label>
-      @click="testApi"
+          <input
-      class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+            id="file"
-    >
+            type="file"
-      Test API
+            @change="handleFileSelect"
-    </button>
+            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
+          />
+        </div>
+
+        <button
+          type="submit"
+          class="w-full px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+        >
+          Submit
+        </button>
+      </form>
+    </div>
     
     <!-- Response Message -->
     <pre v-if="message" class="mt-4 p-4 bg-gray-100 rounded w-full max-w-md overflow-x-auto">{{ message }}</pre>

server/api/test/test-response.post.js

@@ -2,7 +2,7 @@ import { readMultipartFormData } from 'h3';
 
 export default defineEventHandler(async (event) => {
     try {
-        const parts = await readMultipartFormData(event);
+        const parts = await readMultipartFormData(event, { maxSize: 10 * 1024 * 1024 }); // 10MB limit
         
         if (!parts) {
             return {
@@ -11,29 +11,33 @@ export default defineEventHandler(async (event) => {
             };
         }
 
-        const fileNamePart = parts.find(p => p.name === "fileName");
+        // Extract form data
-        const filePart = parts.find(p => p.name === "file");
+        const name = parts.find(p => p.name === 'name')?.data.toString() || '';
+        const animal = parts.find(p => p.name === 'animal')?.data.toString() || '';
+        const file = parts.find(p => p.name === 'file');
 
-        if (!fileNamePart || !filePart) {
+        // Log the received data
-            return {
+        console.log('Received name:', name);
-                status: 400,
+        console.log('Received favorite animal:', animal);
-                message: "Missing required fields (fileName or file)"
+        if (file) {
-            };
+            console.log('Received file:', file.filename);
         }
 
-        const fileName = fileNamePart.data.toString();
+        // Prepare response message
-        console.log("Received file:", fileName);
+        let message = `You are ${name} and your favorite animal is ${animal}`;
+        if (file) {
+            message += `. You uploaded the file: ${file.filename}`;
+        }
 
         return {
             status: 200,
-            message: "File received successfully",
+            message
-            fileName: fileName
         };
     } catch (error) {
-        console.error("Error processing file upload:", error);
+        console.error("Error processing request:", error);
         return {
             status: 500,
-            message: "Error processing file upload",
+            message: "Error processing request",
             error: error.message
         };
     }