src/pages/detect.vue

@@ -422,7 +422,7 @@
           }
           resolve()
         })
-        loadImage.then((imageData) => {
+        loadImage.then(() => {
           this.imageLoaded = true
           this.resultData = {}
           this.resetView()
@@ -437,7 +437,7 @@
         box.style.display = 'none'
       },
       submitData () {
-        this.uploadData(this.imageView.split(',')[1])
+        this.uploadData(this.imageView.split(',')[1],this.resultData.detections)
       }
     }
   }

src/pages/submit-mixin.js

@@ -1,3 +1,5 @@
+import { f7 } from 'framework7-vue'
+
 export default {
   methods: {
     newUid (length) {
@@ -9,27 +11,53 @@ export default {
       }
       return uid.join('')
     },
-    uploadData (imagePayload) {
-      /*****
-      * This is the curl statement which works:
-      * curl -k -T file.ext -u "LKBm3H6JdSaywyg:" -H 'X-Requested-With: XMLHttpRequest' https://nextcloud.azgeorgis.net/public.php/webdav/newFile.ext
-      *
-      * Also, curl --header "Content-Type: text/plain" --data-raw "simple_body" --trace-ascii website-data-raw.log "$website" might be an example of how to put in the jpeg data.
-      * 
-      * Just need to work out:
-      * 1) How that translates to a JS XHR
-      * 2) Whether I've got another @#$% CORS issue with it
-      *   Answer: Bleep! Bleeeeeep! Bleep! Bleep! Bleep!....yes.
-      *****/
+    uploadData (imagePayload, classPayload) {
+      let uploadImage =new Promise(resolve => {
+        const dataUid = this.newUid(16)
+        var byteChars = window.atob(imagePayload)
+        var byteArrays = []
+        var len = byteChars.length
     
-      var xhr = new XMLHttpRequest()
-      var uploadUrl = `https://nextcloud.azgeorgis.net/public.php/webdav/${this.newUid(16)}.jpeg`
-      xhr.open("POST", uploadUrl)
-      xhr.setRequestHeader('Content-Type', 'image/jpeg')
-      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
-      xhr.setRequestHeader("Authorization", "Basic " + btoa("LKBm3H6JdSaywyg:"))
+        for (var offset = 0; offset < len; offset += 1024) {
+          var slice = byteChars.slice(offset, offset + 1024)
+          var byteNumbers = new Array(slice.length)
+          for (var i = 0; i < slice.length; i++) {
+            byteNumbers[i] = slice.charCodeAt(i)
+          }
 
-      xhr.send(imagePayload)
+          var byteArray = new Uint8Array(byteNumbers)
+          byteArrays.push(byteArray)
+        }  
+        var imageBlob = new Blob(byteArrays, {type: 'image/jpeg'})   
+
+        var xhrJpg = new XMLHttpRequest()
+        var uploadUrl = `https://nextcloud.azgeorgis.net/public.php/webdav/${dataUid}.jpeg`
+        xhrJpg.open("PUT", uploadUrl)
+        xhrJpg.setRequestHeader('Content-Type', 'image/jpeg')
+        xhrJpg.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
+        xhrJpg.setRequestHeader("Authorization", "Basic " + btoa("LKBm3H6JdSaywyg:"))
+        xhrJpg.send(imageBlob)
+
+        var xhrTxt = new XMLHttpRequest()
+        var uploadUrl = `https://nextcloud.azgeorgis.net/public.php/webdav/${dataUid}.txt`
+        xhrTxt.open("PUT", uploadUrl)
+        xhrTxt.setRequestHeader('Content-Type', 'text/plain')
+        xhrTxt.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
+        xhrTxt.setRequestHeader("Authorization", "Basic " + btoa("LKBm3H6JdSaywyg:"))
+        xhrTxt.send(JSON.stringify(classPayload))
+
+        resolve()
+      })
+      uploadImage.then(() => {
+        var toast = f7.toast.create({
+          text: 'Detections Uploaded: thank you.',
+          closeTimeout: 2000
+        })
+        toast.open()
+      }).catch((e) => {
+        console.log(e.message)
+        f7.dialog.alert(`Error uploading image: ${e.message}`)
+      })
     }
   }
 }