Got uploading working and implemented status bars & tooltips

edivorce/apps/poc/views.py

@@ -1,4 +1,6 @@
 from django.shortcuts import render
+from django.utils.decorators import method_decorator
+from django.views.decorators.csrf import csrf_exempt
 from django.views.generic.edit import FormView, CreateView, DeleteView
 from django import forms
 from django.http import HttpResponse
@@ -31,6 +33,10 @@ class UploadStorage(CreateView):
     template_name = "storage.html"
     success_url = '/poc/storage'
 
+    @method_decorator(csrf_exempt)
+    def dispatch(self, request, *args, **kwargs):
+        return super(UploadStorage, self).dispatch(request, *args, **kwargs)    
+
     def get_context_data(self, **kwargs):
         kwargs['documents'] = Document.objects.all()
         return super(UploadStorage, self).get_context_data(**kwargs)

vue/package-lock.json

@@ -7961,6 +7961,11 @@
         "ts-pnp": "^1.1.6"
       }
     },
+    "portal-vue": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+      "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g=="
+    },
     "portfinder": {
       "version": "1.0.28",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -10553,6 +10558,15 @@
         }
       }
     },
+    "uiv": {
+      "version": "0.36.1",
+      "resolved": "https://registry.npmjs.org/uiv/-/uiv-0.36.1.tgz",
+      "integrity": "sha512-kJjqShQa8+9DEQl7GXkR0rLaoUbHAvHLjkEpZzhdcA4O95UevZm2Dsal3xgyPSf634oUc2/XyksiOnDAwRDuGQ==",
+      "requires": {
+        "portal-vue": "^2.1.7",
+        "vue-functional-data-merge": "^2.0.3"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -10850,6 +10864,11 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
     },
+    "vue-functional-data-merge": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-2.0.7.tgz",
+      "integrity": "sha512-pvLc+H+x2prwBj/uSEIITyxjz/7ZUVVK8uYbrYMmhDvMXnzh9OvQvVEwcOSBQjsubd4Eq41/CSJaWzy4hemMNQ=="
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",

vue/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "uiv": "^0.36.1",
     "vue": "^2.6.11",
     "vue-upload-component": "^2.8.20"
   },

vue/src/components/ItemTile.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="item-tile">
+  <div class="item-tile" v-if="file.progress === '100.00'">
     <div class="image-wrap">
-      <img v-if="file.blob" :src="file.blob" height="auto" />
-      <button type="button"class="btn-remove" @click.prevent="$emit('remove')" aria-label="Delete">
+      <img v-if="file.objectURL" :src="file.objectURL" height="auto" />
+      <button type="button" class="btn-remove" @click.prevent="$emit('remove')" aria-label="Delete">
         <i class="fa fa-times-circle"></i>
       </button>
     </div>
@@ -26,6 +26,25 @@
       </div>
     </div>
   </div>
+  <div class="item-tile" v-else-if="file.progress !== '0.00'"> 
+    <div class="status-wrap">
+      <div>
+      Uploading... {{ file.progress}}%
+      </div>
+      <div class="progress">
+        <div :style="'width:' + file.progress + '%'">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="item-tile" v-else> 
+    <div class="status-wrap">
+      <div>
+      Waiting...
+      </div>
+      <div class="progress"></div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -43,15 +62,43 @@ export default {
       margin-bottom: 5px;
       position: relative;
 
-      .image-wrap {
+      .image-wrap, .status-wrap {
         height: 160px;
-        overflow-y: hidden;
         border: 1px solid black;
         border-top-left-radius: 6px;
         border-top-right-radius: 6px;
         background-color: white;
       }
 
+      .image-wrap {
+        overflow-y: hidden;
+      }
+
+      .status-wrap {
+        border-bottom-left-radius: 6px;
+        border-bottom-right-radius: 6px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+      }
+
+      .progress {
+        width: 100%;
+        background-color: #F2F2F3;
+        height: 22px;
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+
+        > div {
+          background-color: #365EBE;
+          height: 22px;
+          border-bottom-left-radius: 6px;
+          border-bottom-right-radius: 6px;
+        }
+      }
+      
       .item-text {
         text-align: center;
         min-height: 75px;
@@ -88,6 +135,10 @@ export default {
         padding: 0;
         margin-right: 16px;
 
+        &:hover {
+          cursor: pointer !important;
+        }
+
         i.fa {
           color: #003366;
         }
@@ -105,9 +156,9 @@ export default {
           top: 125px;
           left: 130px;
 
-         i.fa {
-          color: #365EBE;
-         }
+          i.fa {
+            color: #365EBE;
+          }
         }
       }
     }

vue/src/components/Uploader.vue

@@ -1,10 +1,14 @@
 <template>
 <div>
   <h5 class="uploader-label">
-    {{ formInfo.preText }} <a href="#">{{ formInfo.name }} <i class="fa fa-question-circle"></i></a>
+    {{ formInfo.preText }} 
+    <a href="javascript:void(0)" :id="'Tooltip-' + uniqueId">
+      {{ formInfo.name }} <i class="fa fa-question-circle"></i>
+    </a>
     <strong v-if="party === 1"> - For You</strong>
     <strong v-if="party === 2"> - For Your Spouse</strong>
   </h5>  
+  <tooltip :text="formInfo.help" :target="'#Tooltip-' + uniqueId"></tooltip>
   <label :for="inputId" class="sr-only">
     {{ formInfo.preText }} {{ formInfo.name }} 
     <span v-if="party === 1"> - For You</span>
@@ -17,18 +21,18 @@
       :multiple="true"
       :drop="true"
       :drop-directory="false"
-      post-action="/post.method"
-      put-action="/put.method"
+      post-action="/poc/storage"
       @input-file="inputFile"
       @input-filter="inputFilter"
       :input-id="inputId"
+      name="file"
       :class="['drop-zone', dragging ? 'dragging' : '']">
     <div v-if="files.length === 0" class="placeholder">
       <i class="fa fa-plus-circle"></i><br>
       <em>Drag and Drop the PDF document or JPG pages here,<br>or click here to Browse for files.</em>
     </div>
-    <div v-else class="items">
-      <div v-for="(file, index) in files" v-bind:key="index" class="item">
+    <div v-else class="cards">
+      <div v-for="(file, index) in files" v-bind:key="index" class="card">
         <item-tile
           :file="file"
           :index="index"
@@ -37,7 +41,7 @@
           @moveup="moveUp(index)"
           @movedown="moveDown(index)"/>
       </div>
-      <div class="item upload-button">
+      <div class="card upload-button">
         <div class="upload-button-wrapper">
         <i class="fa fa-plus-circle"></i>
         </div>
@@ -50,6 +54,7 @@
 
 <script>
 import VueUploadComponent from 'vue-upload-component'
+import { Tooltip } from 'uiv';
 import ItemTile from './ItemTile'
 import Forms from "../utils/forms";
 
@@ -66,17 +71,20 @@ export default {
   },
   components: {
     FileUpload: VueUploadComponent,
-    ItemTile
+    ItemTile,
+    Tooltip
   },
   computed: {
-    inputId() {
+    uniqueId() {
       if (this.party === 0) {
-        return "Uploader-" + this.docType;
+        return this.docType;
       }
-      return "Uploader-" +  this.docType + this.party;
+      return this.docType + this.party;
+    },    
+    inputId() {
+      return "Uploader-" + this.uniqueId;
     },
     formInfo() {
-      debugger;
       return Forms[this.docType];
     }
   },
@@ -96,6 +104,7 @@ export default {
           console.log('status', newFile.xhr.status)
         }
       }
+        this.$refs.upload.active = true;
     },
     /**
      * Pretreatment
@@ -112,12 +121,12 @@ export default {
         }
       }
 
-      // Create a blob field
+      // Create an objectURL field
       if (newFile) {
-        newFile.blob = ''
+        newFile.objectURL = ''
         let URL = window.URL || window.webkitURL
         if (URL && URL.createObjectURL) {
-          newFile.blob = URL.createObjectURL(newFile.file)
+          newFile.objectURL = URL.createObjectURL(newFile.file)
         }
       }
     },
@@ -158,19 +167,22 @@ export default {
       background-color: #F2E3F2;
     }
 
-    .item {
+    .cards {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: left;
+    }
+
+    .card {
+      flex: 0 1 160px;
       margin-bottom: 10px;
       width: 160px;
-      display: inline-block;
       margin-right: 18px;
 
       &.upload-button {
-        width: 15px;
-
-        .upload-button-wrapper {
-          position: relative;
-          top: -110px;
-        }
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
       }
     }
 
@@ -178,6 +190,10 @@ export default {
       font-size: 3rem;
       margin-bottom: 8px;
       color: #365EBE;
+
+      &:hover {
+        cursor: pointer;
+      }
     }
 
     .placeholder {
@@ -188,13 +204,14 @@ export default {
   
  h5.uploader-label {
    display: block;   
-   margin-top: 12px;
-   margin-bottom: 8px;
+   margin-top: 30px;
+   margin-bottom: 10px;
    font-weight: normal;
    font-size: 1em;
 
    a {
-     font-weight: bold;;
+     font-weight: bold;
+     text-decoration: underline;
    }
  }
 </style>