changes

app/components/media/FileUpload.vue

@@ -1,3 +1,4 @@
+<!-- extract logic to a composable -->
 <template>
   <div>
     <div
@@ -10,6 +11,7 @@
       >
         <input
           class="file-input"
+          ref="file-input"
           type="file"
           :id="docid"
           multiple
@@ -50,9 +52,10 @@ const props = defineProps({
 const emit = defineEmits(["files"]);
 const { $id, $snackbar, $upload } = useNuxtApp();
 
+const fileInput = useTemplateRef("file-input");
 const vtype = props.type || ["image"];
-const files = ref();
-const dataFiles = ref();
+const files = ref(); // files selected in <input>
+const dataFiles = ref(); // files returned by $upload
 const showmodal = ref();
 const docid = $id();
 
@@ -74,10 +77,9 @@ function getType(ext) {
 }
 
 function doChange() {
+  if (fileInput.value.files.length === 0) return;
   dataFiles.value = [];
-  const fileList = document.getElementById(docid).files;
-  files.value = Array.from(fileList);
-  if (files.value.length === 0) return;
+  files.value = Array.from(fileInput.value.files);
 
   // Xác định giá trị convert: "1" nếu convert được bật, "0" nếu không
   const convertValue = props.convert ? "1" : "0";
@@ -96,6 +98,7 @@ function doChange() {
     dataFiles.value.push(file);
   });
 
+  console.log("dataFiles.value", dataFiles.value);
   showmodal.value = {
     component: "media/UploadProgress",
     title: "Upload files",
@@ -103,19 +106,14 @@ function doChange() {
     height: "200px",
     vbind: { files: dataFiles.value },
   };
-  clearFileList();
-}
 
-function clearFileList() {
-  const fileInput = document.getElementById(docid);
-  const dt = new DataTransfer();
-  fileInput.files = dt.files;
+  fileInput.value.value = ""; // clear input
 }
 
 function getFiles(files) {
   emit("files", files);
-  setTimeout(() => {
-    showmodal.value = undefined;
-  }, 3000);
+  // setTimeout(() => {
+  //   showmodal.value = undefined;
+  // }, 3000);
 }
 </script>