EDMS/pages/test.vue

<script setup>
import { ref } from 'vue';

definePageMeta({
  title: "API Test Page"
});

const message = ref('');
const formData = ref({
  name: '',
  animal: ''
});
const selectedFile = ref(null);

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;
  }
}

async function handleSubmit() {
  try {
    const multipartFormData = new FormData();
    multipartFormData.append('name', formData.value.name);
    multipartFormData.append('animal', formData.value.animal);
    
    // Only send file metadata if a file is selected
    if (selectedFile.value) {
      multipartFormData.append('fileName', selectedFile.value.name);
      multipartFormData.append('fileType', selectedFile.value.type);
    }

    const response = await fetch('/api/test/test-response', {
      method: 'POST',
      body: multipartFormData
    });

    const data = await response.json();
    message.value = data.message;

    // If we have a file and received a signed URL, upload to S3
    if (selectedFile.value && data.signedUrl) {
      try {
        const s3Response = await fetch(data.signedUrl, {
          method: 'PUT',
          body: selectedFile.value,
          headers: {
            'Content-Type': selectedFile.value.type
          }
        });

        if (!s3Response.ok) {
          throw new Error('Failed to upload file to S3');
        }

        message.value += '\nFile successfully uploaded to S3!';
      } catch (s3Error) {
        message.value += '\nError uploading file to S3: ' + s3Error.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">
    <!-- Form Section -->
    <div class="w-full max-w-md space-y-4">
      <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>

        <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>
  </div>
</template>