Added hooks for calling back-end APIs

edivorce/apps/poc/views.py

@@ -45,10 +45,7 @@ class UploadStorage(CreateView):
 
     @method_decorator(csrf_exempt)
     def dispatch(self, request, *args, **kwargs):
-        response = super(UploadStorage, self).dispatch(request, *args, **kwargs)  
-        if response.status_code == 200:
-            return HttpResponse(status=204)     
-        return response
+        return super(UploadStorage, self).dispatch(request, *args, **kwargs)  
 
     def get_context_data(self, **kwargs):
         kwargs['documents'] = Document.objects.all()

vue/src/components/Uploader/Main.vue

@@ -25,7 +25,7 @@
       :input-id="inputId"
       name="file"
       :class="['drop-zone', dragging ? 'dragging' : '']"
-      :data="data"
+      :data="inputIdentifiers"
       @input-file="inputFile"
       @input-filter="inputFilter">
     <div v-if="files.length === 0" class="placeholder">
@@ -63,6 +63,7 @@ import VueUploadComponent from 'vue-upload-component'
 import { Tooltip, Modal } from 'uiv';
 import ItemTile from './ItemTile'
 import Forms from "../../utils/forms";
+import rotateFix from '../../utils/rotation';
 
 export default {
   props: {
@@ -74,7 +75,8 @@ export default {
       files: [],
       dragging: false,
       showWarning: false,
-      warningText: ""
+      warningText: "",
+      isDirty: false
     }
   },
   components: {
@@ -99,7 +101,7 @@ export default {
     postAction() {
       return this.$parent.proxyRootPath + "poc/storage"
     },
-    data() {
+    inputIdentifiers() {
       return {
         doc_type: this.docType, 
         party_code: this.party
@@ -108,23 +110,25 @@ export default {
   },
   methods: {
     inputFile(newFile, oldFile) {
+
+      // upload is complete
       if (newFile && oldFile && !newFile.active && oldFile.active) {
-        // Get response data
-        console.log('response', newFile.response)
-        if (newFile.xhr) {
-          //  Get the response status code
-          console.log('status', newFile.xhr.status)
-        }
-      }
-        this.$refs.upload.active = true;
 
-      if (newFile) {
-        console.log('inputFile newFile=' + newFile.name);
-      }
+        // todo: send metadata to the server 
+        console.log('Upload Complete; file=' + newFile.name)
+        this.saveMetaData();
 
-      if (oldFile && !newFile) {
-        console.log('inputFile oldFile=' + oldFile.name);
+        if (newFile.xhr) {
+          //  Get the response status code (we can use this for error handling)
+          if (newFile.xhr.status !== 200) {
+            // todo: handler errors
+             this.warningText = 'Error: ' + newFile.xhr.statusText;
+             this.showWarning = true;            
+            console.log('status', newFile.xhr.status)
+          }
+        }
       }
+      this.$refs.upload.active = true;
     },
     inputFilter(newFile, oldFile, prevent) {
       if (newFile && !oldFile) {
@@ -186,30 +190,61 @@ export default {
       }
     },
     remove(file) {
+      // todo: call the API to remove the file
       this.$refs.upload.remove(file)
     },
     moveUp(old_index) {
       if (old_index >= 1 && this.files.length > 1) {
         this.files.splice(old_index - 1, 0, this.files.splice(old_index, 1)[0]);
       }
+      this.isDirty = true;
     },
     moveDown(old_index) {
       if (old_index <= this.files.length && this.files.length > 1) {
         this.files.splice(old_index + 1, 0, this.files.splice(old_index, 1)[0]);
       }
+      this.isDirty = true;
     },
     rotateLeft(index) {
       this.files[index].rotation -= 90;
+      this.isDirty = true;
     },
     rotateRight(index) {
       this.files[index].rotation += 90;
+      this.isDirty = true;
     },    
     draggingOn() {
       this.dragging = true;
     },
     draggingOff() {
       this.dragging = false;
-    }    
+    },
+    saveMetaData() {
+      let allFiles = [];
+      this.files.forEach((file) => {
+        allFiles.push({
+          filename: file.name, 
+          size: file.size, 
+          rotation: rotateFix(file.rotation)
+        });
+      });
+      const data = {
+        docType: this.docType,
+        partyCode: this.party,
+        files: allFiles
+      };
+      console.log('Call API', data);
+    }
+  },
+  created() {
+    // call the API to update the metadata every second, but only if the data has changed
+    // (throttling requests because rotating and re-ordering images can cause a lot of traffic)
+    setInterval(() => {
+      if (this.isDirty) {
+        this.saveMetaData();
+        this.isDirty = false;
+      }
+    }, 1000);
   }
 }
 </script>

vue/src/components/Uploader/UploadedImage.vue

@@ -16,7 +16,8 @@
 </template>
 
 <script>
-import ModalPreview from './ModalPreview'
+import ModalPreview from './ModalPreview';
+import rotateFix from '../../utils/rotation';
 
 export default {
   props: {
@@ -47,23 +48,7 @@ export default {
       return this.file.objectURL  && !this.file.error && this.file.type !== 'application/pdf';
     },
     rotateVal() {
-      let rotation = this.file.rotation;
-      while (rotation < 0) {
-        rotation += 360;
-      }
-      while (rotation > 360) {
-        rotation -= 360;
-      }
-      if (rotation === 90) {
-        return 90;
-      }
-      if (rotation === 180) {
-        return 180;
-      }
-      if (rotation === 270) {
-        return 270;
-      }      
-      return 0;
+      return rotateFix(this.file.rotation);
     },
     imageStyle() {
       if (this.rotateVal === 90) {
@@ -110,7 +95,7 @@ export default {
       content: "\f06e";
       position: absolute;
       left: 58px;
-      top: calc(50% - 30px);
+      top: calc(50% - 11px);
       font-size: 43px;
       color: transparent;        
     }

vue/src/utils/rotation.js

@@ -0,0 +1,16 @@
+export default function(rotation) {
+  while (rotation < 0) {
+    rotation += 360;
+  }
+  while (rotation > 360) {
+    rotation -= 360;
+  }
+  switch (rotation) {
+    case 90:
+    case 180:
+    case 270:
+      return rotation;
+    default:
+      return 0;
+  }
+};