diff --git a/app/components/messages/MessageInput.vue b/app/components/messages/MessageInput.vue
index 6570461..2c6df91 100644
--- a/app/components/messages/MessageInput.vue
+++ b/app/components/messages/MessageInput.vue
@@ -227,13 +227,25 @@ const attachmentMenuItems = [
 
 // Methods
 const handleFileSelect = (event: Event, type: string) => {
+  console.log('handleFileSelect called', type, event)
   const input = event.target as HTMLInputElement
+  console.log('input.files:', input.files)
   if (input.files) {
     addFiles(Array.from(input.files))
     input.value = '' // Reset input
   }
 }
 
+const addFiles = (files: File[]) => {
+  console.log('addFiles called with:', files)
+  // Limit to 10 files
+  const remaining = 10 - selectedFiles.value.length
+  const toAdd = files.slice(0, remaining)
+  // Use spread operator to trigger reactivity
+  selectedFiles.value = [...selectedFiles.value, ...toAdd]
+  console.log('selectedFiles after adding:', selectedFiles.value)
+}
+
 const handleDrop = (event: DragEvent) => {
   isDragging.value = false
   if (event.dataTransfer?.files) {
@@ -241,13 +253,6 @@ const handleDrop = (event: DragEvent) => {
   }
 }
 
-const addFiles = (files: File[]) => {
-  // Limit to 10 files
-  const remaining = 10 - selectedFiles.value.length
-  const toAdd = files.slice(0, remaining)
-  selectedFiles.value.push(...toAdd)
-}
-
 const removeFile = (index: number) => {
   selectedFiles.value.splice(index, 1)
 }