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>

app/components/media/UploadProgress.vue

@@ -41,44 +41,43 @@
     </p>
   </div>
 </template>
-<script>
-export default {
-  props: ["files"],
-  data() {
-    return {
-      vfiles: this.$copy(this.files),
-      data: [],
-    };
-  },
-  created() {
-    let found = this.$find(this.vfiles, { error: true });
-    if (!found) this.upload();
-  },
-  methods: {
-    async doUpload(v, i) {
-      let file = this.files[i];
-      let rs = await this.$insertapi("upload", file.form, undefined, false);
-      v.status = rs === "error" ? "error" : "success";
-      this.vfiles[i] = v;
-      let obj = rs.rows[0];
-      obj.source = file;
-      this.data.push(obj);
-      this.checkDone();
-    },
-    async upload() {
-      for (let i = 0; i < this.vfiles.length; i++) {
-        let v = this.vfiles[i];
-        v.status = "uploading";
-        await this.doUpload(v, i);
-      }
-    },
-    checkDone() {
-      let found = this.vfiles.find((v) => !v.status || v.status === "uploading");
-      if (!found) {
-        this.$emit("files", this.data);
-        this.$emit("modalevent", { name: "files", data: this.data });
-      }
-    },
-  },
-};
+<script setup>
+const props = defineProps({
+  files: Array,
+});
+
+const emit = defineEmits(["files", "modalevent"]);
+const { $copy, $find, $insertapi } = useNuxtApp();
+const vfiles = ref($copy(props.files));
+const data = ref([]);
+
+const found = $find(vfiles.value, { error: true });
+if (!found) upload();
+
+async function doUpload(v, i) {
+  const file = props.files[i];
+  const rs = await $insertapi("upload", file.form, undefined, false);
+  v.status = rs === "error" ? "error" : "success";
+  vfiles.value[i] = v;
+  const obj = rs.rows[0];
+  obj.source = file;
+  data.value.push(obj);
+  checkDone();
+}
+
+async function upload() {
+  for (let i = 0; i < vfiles.value.length; i++) {
+    let v = vfiles.value[i];
+    v.status = "uploading";
+    await doUpload(v, i);
+  }
+}
+
+function checkDone() {
+  let found = vfiles.value.find((v) => !v.status || v.status === "uploading");
+  if (!found) {
+    emit("files", data.value);
+    emit("modalevent", { name: "files", data: data.value });
+  }
+}
 </script>