Fix decoding error on android image load (#108)

Closes: #105

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: Georgi_Lab/ALVINN_f7#108

src/pages/detect.vue

@@ -7,7 +7,7 @@
     <f7-block class="detect-grid">
       <div class="image-container">
         <canvas id="im-draw" ref="image_cvs" @click="structureClick" :style="`display: ${imageLoaded ? 'block' : 'none'}; flex: 1 1 0%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat`" />
-        <SvgIcon v-if="!imageView"  :icon="f7route.params.region" fill-color="var(--avn-theme-color)" @click="selectImage" />
+        <SvgIcon v-if="!imageView" :icon="f7route.params.region" fill-color="var(--avn-theme-color)" @click="selectImage" />
       </div>
       <div v-if="(resultData && resultData.detections) || detecting" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
         <f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })"
@@ -462,9 +462,11 @@
             self.resultData = dets
             self.uploadDirty = true
           }).catch((e) => {
-          console.log(e.message)
+            console.log(e.message)
-          f7.dialog.alert(`ALVINN structure finding error: ${e.message}`)
+            self.detecting = false
-        })
+            self.resultData = {}
+            f7.dialog.alert(`ALVINN structure finding error: ${e.message}`)
+          })
         }
       },
       remoteTimeout () {
@@ -536,13 +538,13 @@
         return [imCanvas, imageCtx]
       },
       getImage (searchImage) {
-        let loadImage =new Promise(resolve => {
+        let loadImage = new Promise(resolve => {
           if (this.isCordova && this.imageLoadMode == "camera") {
             resolve('data:image/jpg;base64,' + searchImage)
           } else {
             const searchImage = this.$refs.image_chooser.files[0]
             var reader = new FileReader()
-            reader.addEventListener("loadend", () => {
+            reader.addEventListener("load", () => {
               this.detecting = true
               resolve(reader.result)
             })
@@ -552,6 +554,7 @@
         loadImage.then((imgData) => {
           this.imageLoaded = true
           this.resultData = {}
+          this.selectedChip = -1
           this.imageView = new Image()
           this.imageView.src = imgData
           return(this.imageView.decode())
@@ -559,10 +562,8 @@
           const [imCanvas, _]  = this.resetView()
           imCanvas.style['background-image'] = `url(${this.imageView.src})`
           /******
-           * setTimeout is not a good solution,
+           * setTimeout is not a good solution, but it's the only way
-           * but it's the only way I can find to
+           * I can find to not cut off drawing of the progress spinner
-           * not cut off drawing of of the progress
-           * spinner
            ******/
           setTimeout(() => {
             this.setData()