Merge pull request #92 from takanotume24/bug/90__file_list_has_not_be…

…en_reset feat: Update ChatInputForm and FileSelector components for v-model bi…
takanotume24 · Dec 4, 2024 · 43229a7 · 43229a7
2 parents 566ccc2 + 5d00c01
commit 43229a7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/src/components/ChatInputForm.vue b/src/components/ChatInputForm.vue
@@ -5,7 +5,7 @@
         @keydown="checkCtrlEnter"></textarea>
     </div>
     <div class="d-flex justify-content-between align-items-center">
-      <FileSelector @files-selected="handleFilesSelected" />
+      <FileSelector v-model="selectedFiles"/>
       <button type="submit" class="btn btn-primary">Send</button>
     </div>
   </form>
@@ -51,9 +51,6 @@ export default defineComponent({
         this.handleSubmit();
       }
     },
-    handleFilesSelected(files: File[]) {
-      this.selectedFiles = files;
-    },
   },
   mounted() {
 

diff --git a/src/components/FileSelector.vue b/src/components/FileSelector.vue
@@ -17,21 +17,30 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 
 export default defineComponent({
-    emits: ['files-selected'],
-    setup(_, { emit }) {
-        const selectedFiles = ref<File[]>([]);
+    props: {
+        modelValue: {
+            type: Array as () => File[],
+            default: () => []
+        }
+    },
+    emits: ['update:modelValue'],
+    setup(props, { emit }) {
         const fileNames = ref<string[]>([]);
         const fileInput = ref<HTMLInputElement | null>(null);
 
+        // Watch for changes in modelValue and update fileNames
+        watch(() => props.modelValue, (newFiles) => {
+            fileNames.value = newFiles.map(file => file.name);
+        }, { immediate: true });
+
         const handleFileChange = (event: Event) => {
             const target = event.target as HTMLInputElement;
             if (target.files) {
-                selectedFiles.value = Array.from(target.files);
-                fileNames.value = selectedFiles.value.map(file => file.name);
-                emit('files-selected', selectedFiles.value);
+                const files = Array.from(target.files);
+                emit('update:modelValue', files);
             }
         };
 
@@ -49,4 +58,5 @@ export default defineComponent({
 });
 </script>
 
+
 <style scoped></style>