Changeset 35959

Timestamp:

2022-01-11T14:46:55+13:00 (2 years ago)

Author:

cstephen

Message:

Implement file drag and drop

Location:

main/trunk/model-interfaces-dev/atea/ocr/src/components

Files:

• ImageMagnifier.vue (modified) (2 diffs)
• MainPage.vue (modified) (8 diffs)

main/trunk/model-interfaces-dev/atea/ocr/src/components/ImageMagnifier.vue

@@ -3 +3 @@
 
 export default {
-    name: "OcrImageDisplay",
+    name: "ImageMagnifier",
     props: {
         imageUrl: String,
@@ -139 +139 @@
 <div ref="magContainer" class="image-container">
     <div ref="magnifier" class="magnifier" @mousemove="moveMagnifier" :style="{ 'visibility': enableMagnifier ? 'visible' : 'collapse' }" />
-    <img v-if="!showThresholdedImage" ref="imageRef" class="image" :src="imageUrl" />
+    <img ref="imageRef" class="image" :src="imageUrl" />
 </div>
 </template>

main/trunk/model-interfaces-dev/atea/ocr/src/components/MainPage.vue

@@ -2 +2 @@
 import { mapState } from "vuex";
 import EditPage from "./editor/EditPage.vue";
-import OcrImageDisplay from "./ImageMagnifier.vue"
+import ImageMagnifier from "./ImageMagnifier.vue"
 import { ModalController } from "./ModalDialog.vue"
 import { SnackController } from "./Snackbar.vue"
@@ -14 +14 @@
     components: {
         EditPage,
-        OcrImageDisplay
+        ImageMagnifier
     },
     data() {
@@ -71 +71 @@
     },
     methods: {
-        uploadFile() {
+        openFilePicker() {
             this.$refs.fileInput.click();
         },
@@ -83 +83 @@
             this.imageBuffer = await files[0].arrayBuffer();
             this.imageType = files[0].type;
+        },
+        /**
+         * Invoked when a drop event occurs on the file upload panel.
+         * @param {DragEvent} ev The drop event.
+         */
+        async onFilesDropped(ev) {
+            ev.preventDefault();
+
+            if (ev.dataTransfer.items && ev.dataTransfer.items.length > 0) {
+                let index = 0;
+                while (ev.dataTransfer.items[index].kind !== "file") {
+                    index++;
+                }
+
+                const file = ev.dataTransfer.items[0].getAsFile();
+                this.imageBuffer = await file.arrayBuffer();
+                this.imageType = file.type;
+            }
+            else if (ev.dataTransfer.files.length > 0) {
+                const file = ev.dataTransfer.files[0];
+                this.imageBuffer = await file.arrayBuffer();
+                this.imageType = file.type;
+            }
         },
 
@@ -228 +251 @@
 
     <div class="paper root-container" :class="{ 'root-container-image-state': imageUrl !== null }">
-        <div v-if="imageUrl === null" class="upload-area" @click="uploadFile">
+        <div v-if="imageUrl === null" class="upload-area"
+            @click="openFilePicker" @drop="onFilesDropped" @dragover="$event.preventDefault()">
             <span class="heading1">{{ translations.get("Title") }}</span>
             <span class="material-icons mdi-xl">upload_file</span>
@@ -293 +317 @@
 
             <div class="main-content-columns">
-                <ocr-image-display
+                <image-magnifier
                     v-if="!showThresholdedImage"
                     :imageUrl="imageUrl"
@@ -299 +323 @@
                     :magnifierZoom="magnifierZoom" />
 
-                <ocr-image-display
+                <image-magnifier
                     v-else
                     :imageUrl="thresholdedImageUrl"
@@ -312 +336 @@
                     :disabled="!isValidOcrResult || ocrInProgress"
                     autocomplete="off"
-                    :spellcheck="enableSpellcheck"/>
+                    :spellcheck="enableSpellcheck" />
             </div>
         </div>