changes

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>