generated from corrad-software/corrad-af-2024
Added testing route to check server issues
Added test routes to pinpoint frontend to backend communication issues
This commit is contained in:
shb
parent
40cf8ebab5
commit
ffec2a43ee
145
pages/test.vue
145
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) {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
const multipartFormData = new FormData();
|
||||
multipartFormData.append('name', formData.value.name);
|
||||
multipartFormData.append('animal', formData.value.animal);
|
||||
|
||||
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">
|
||||
<input
|
||||
type="file"
|
||||
@change="handleFileSelect"
|
||||
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"
|
||||
/>
|
||||
<button
|
||||
@click="handleFileUpload"
|
||||
:disabled="!selectedFile || isUploading"
|
||||
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"
|
||||
>
|
||||
{{ isUploading ? 'Uploading...' : 'Upload File' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<form @submit.prevent="handleSubmit" class="space-y-4">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
|
||||
<input
|
||||
id="name"
|
||||
v-model="formData.name"
|
||||
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 name"
|
||||
required
|
||||
/>
|
||||
</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 -->
|
||||
<button
|
||||
@click="testApi"
|
||||
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
|
||||
>
|
||||
Test API
|
||||
</button>
|
||||
<div>
|
||||
<label for="file" class="block text-sm font-medium text-gray-700 mb-1">Upload File (Max 10MB)</label>
|
||||
<input
|
||||
id="file"
|
||||
type="file"
|
||||
@change="handleFileSelect"
|
||||
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>
|
||||
|
||||
@ -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");
|
||||
const filePart = parts.find(p => p.name === "file");
|
||||
// Extract form data
|
||||
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) {
|
||||
return {
|
||||
status: 400,
|
||||
message: "Missing required fields (fileName or file)"
|
||||
};
|
||||
// Log the received data
|
||||
console.log('Received name:', name);
|
||||
console.log('Received favorite animal:', animal);
|
||||
if (file) {
|
||||
console.log('Received file:', file.filename);
|
||||
}
|
||||
|
||||
const fileName = fileNamePart.data.toString();
|
||||
console.log("Received file:", fileName);
|
||||
// Prepare response message
|
||||
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",
|
||||
fileName: fileName
|
||||
message
|
||||
};
|
||||
} 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
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user