Changeset 76e46d7 in uz

Timestamp:

2022.10.08 18:53:06 (2 years ago)

Author:

js29a <js29a@…>

Branches:

master

Parents:

d45005e

Message:

to axios

Location:

src

Files:

• UploadTest.vue (modified) (1 diff)
• UploadZone.vue (modified) (11 diffs)

src/UploadTest.vue

@@ -98 +98 @@
           <br />
           {{ progress.length }} / {{ current.length }} / {{ queue.length }}
-          <br />
-          <button @click='abort()'>abort</button>
           <b>errors:</b> <span v-for='error in errors'>{{ error.file.name }}</span>
           <b>progress:</b> <div v-for='item in progress'>{{ item }}</div>

src/UploadZone.vue

@@ -3 +3 @@
 import { ref, computed, defineProps, withDefaults, defineEmits, getCurrentInstance, defineExpose, watch, nextTick } from 'vue'
 
-import $ from 'jQuery'
+import axios from 'axios'
 
 interface Props {
@@ -56 +56 @@
 }>()
 
+let abort_controller: any = null
+
 const do_emit = (code: string, ... args: any[]) => {
   // @ts-ignore
@@ -93 +95 @@
       for(const file of evt.dataTransfer.files)
         files.push(file)
-    else
+    else // XXX elem click
       for(const file of evt.target.files)
         files.push(file)
@@ -134 +136 @@
   if(state.value != State.s_wait)
     return
+
+  try {
+    abort_controller = new AbortController()
+  }
+  catch {
+  }
 
   do_emit('upload:start', [files])
@@ -205 +213 @@
   cur_file += 1
 
-  $.ajax({
+  const options = {
+    method: 'post',
     url: props.target,
-    type: 'POST',
     data: fd,
-    contentType: false,
-    processData: false,
-    xhr: (): any => {
-      const xhr = new window.XMLHttpRequest()
-
-      xhr.upload.addEventListener('progress', (evt): void => {
-        current.value.forEach((item) => {
-          if(item.file === cur) {
-            item.current = evt.loaded
-            item.total = evt.total
-          }
-        })
-        do_emit('upload:progress', progress.value, current.value, queue.value)
+    onUploadProgress: (evt: any) => {
+      if(aborted && abort_controller)
+        abort_controller.abort()
+
+      current.value.forEach((item) => {
+        if(item.file === cur) {
+          item.current = evt.loaded
+          item.total = evt.total
+        }
       })
 
-      return xhr
+      do_emit('upload:progress', progress.value, current.value, queue.value)
     }
-  })
-    .then((res: any) => {
+  } as any
+
+  if(abort_controller)
+    options.signal = abort_controller.signal
+
+  axios(options)
+    .then((res) => {
       current.value = current.value.filter((item) => {
         return item.file !== cur
@@ -234 +243 @@
       do_emit('upload:progress', progress.value, current.value, queue.value)
 
-      progress.value.push(res)
-      results.value.push(res)
+      progress.value.push(res.data)
+      results.value.push(res.data)
 
       cur_jobs -= 1
@@ -242 +251 @@
         if(props.autoReset || props.autoReset === '') {
           state.value = State.s_idle
-          files = []
+          files = [] // # XXX can drop w/o reset
           do_emit('files:clear', [])
         }
@@ -255 +264 @@
 
       if(cur_file == files.length && !cur_jobs) {
-        files = []
+        files = [] // XXX can drop w/o reset
         do_emit('files:clear', [])
 
@@ -279 +288 @@
         start_job()
     })
-    .catch((err: any) => {
+    .catch((err) => {
+      if(aborted && err.name == 'CanceledError') {
+        state.value = State.s_aborted
+        return err
+      }
+
       if(props.keepGoing || props.keepGoing === '') {
         current.value = current.value.filter((item) => {
@@ -286 +300 @@
 
         errors.value.push({
-          error: err,
+          error: err.response,
           file: cur
         })
 
-        do_emit('upload:error', err)
+        do_emit('upload:error', err.response)
 
         cur_jobs -= 1
@@ -305 +319 @@
       else {
         state.value = State.s_error
-        error.value = err
-        do_emit('upload:error', err)
+        error.value = err.response
+        do_emit('upload:error', err.response)
       }
     })