@a-vision-software/vue-input-components 1.4.12 → 1.4.13

package/package.json

@@ -1,12 +1,12 @@
 {
     "name": "@a-vision-software/vue-input-components",
-    "version": "1.4.12",
+    "version": "1.4.13",
     "description": "A collection of reusable Vue 3 input components with TypeScript support",
     "author": "A-Vision Software",
     "license": "MIT",
     "repository": {
         "type": "git",
-        "url": "https://github.com/a-vision/vue-input-components.git"
+        "url": "git+https://github.com/a-vision/vue-input-components.git"
     },
     "homepage": "https://a-vision.github.io/vue-input-components/",
     "keywords": [

package/src/components/FileUpload.vue

@@ -48,7 +48,7 @@
 
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
-import type { FileUploadProps, FileUploadEmits, UploadStatus } from '@/types/fileupload'
+import type { FileUploadProps, FileUploadEmits, UploadStatus, UploadCallbackResponse } from '@/types/fileupload'
 
 const props = defineProps<FileUploadProps>()
 const emit = defineEmits<FileUploadEmits>()
@@ -115,7 +115,7 @@ const handleFileSelect = (e: Event) => {
   input.value = ''
 }
 
-const uploadFiles = async () => {
+const uploadFiles = () => {
   if (!props.uploadUrl) {
     error.value = 'No upload URL provided'
     return
@@ -129,15 +129,34 @@ const uploadFiles = async () => {
   const formData = new FormData()
   files.value.forEach((file) => {
     formData.append('files', file)
-  })
-
-  if (props.uploadData) {
-    const data = props.uploadData;
-    formData.append('data', JSON.stringify(data))
+  });
+
+  if (props.uploadCallback) {
+    props.uploadCallback(formData)
+      .then((response: UploadCallbackResponse) => {
+        const { formData, headers } = response;
+        doUploadFiles(formData, headers)
+      })
+      .catch((err) => {
+        const errorMessage = err instanceof Error ? err.message : 'Upload failed'
+        error.value = errorMessage
+        uploadStatus.value = {
+          type: 'error',
+          message: errorMessage,
+        }
+        emit('upload-complete', files.value)
+        emit('upload-error', uploadStatus.value)
+      });
+  } else {
+    doUploadFiles(formData, {})
   }
+}
 
+const doUploadFiles = (formData: FormData, headers: Record<string, string>) => {
   try {
     const xhr = new XMLHttpRequest()
+    console.log('doUploadFiles:', formData, headers)
+
     xhr.upload.addEventListener('progress', (e) => {
       if (e.lengthComputable) {
         uploadProgress.value = (e.loaded / e.total) * 100
@@ -172,7 +191,12 @@ const uploadFiles = async () => {
       throw new Error('Upload failed')
     })
 
-    xhr.open('POST', props.uploadUrl)
+    xhr.open('POST', props.uploadUrl || '')
+
+    Object.entries(headers).forEach(([key, value]) => {
+      xhr.setRequestHeader(key, value)
+    })
+
     xhr.send(formData)
   } catch (err) {
     const errorMessage = err instanceof Error ? err.message : 'Upload failed'

package/src/types/fileupload.ts

@@ -20,7 +20,12 @@ interface FileUploadProps {
   borderColor?: string // Border color.
   progressColor?: string // Progress color.
   activeColor?: string // Active color.
-  uploadData?: Record<string, any> // Data to send with the upload.
+  uploadCallback?: (formData: FormData) => Promise<UploadCallbackResponse> // Callback function to handle the upload.
+}
+
+interface UploadCallbackResponse {
+  formData: FormData
+  headers: Record<string, string>
 }
 
 interface UploadStatus {
@@ -37,4 +42,4 @@ interface FileUploadEmits {
   (e: 'upload-error', status: UploadStatus): void // Emitted when the upload fails.
 }
 
-export type { FileUploadProps, FileUploadEmits, UploadStatus }
+export type { FileUploadProps, FileUploadEmits, UploadStatus, UploadCallbackResponse }

package/src/views/FileUploadTestView.vue

@@ -24,7 +24,7 @@
             v-text="imageDisabled ? 'disabled' : 'enabled'"></span>)</h2>
         <FileUpload icon="image" accept="image/*" @start-upload="handleStartUpload" :disabled="imageDisabled"
           upload-url="https://httpbin.org/post" :multiple="true" :do-upload="uploadImages"
-          @upload-complete="showImagesUpload = false" :upload-data="imageUploadData"
+          @upload-complete="showImagesUpload = false" :upload-callback="handleUploadCallback"
           @files-selected="showImagesUpload = true" />
         <button @click="uploadImages = true" v-if="showImagesUpload">Upload Images</button>
       </div>
@@ -39,7 +39,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import FileUpload from '@/components/FileUpload.vue'
-import type { UploadStatus } from '@/types/fileupload'
+import type { UploadStatus, UploadCallbackResponse } from '@/types/fileupload'
 
 const imageDisabled = ref(true);
 const uploadImages = ref(false);
@@ -50,6 +50,21 @@ const uploadStatus = ref<Record<string, UploadStatus>>({
   basic: { type: 'success', message: '' },
 })
 
+const handleUploadCallback = (formData: FormData): Promise<UploadCallbackResponse> => {
+  return new Promise((resolve) => {
+    // Add imageUploadData to formData
+    Object.entries(imageUploadData.value).forEach(([key, value]) => {
+      formData.append(key, value)
+    })
+    resolve({
+      formData,
+      headers: {
+        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIqInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvqG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ',
+      },
+    });
+  })
+}
+
 const handleUploadComplete = (files: File[]) => {
   uploadStatus.value.basic = {
     type: 'success',