diff --git a/vue/src/components/Uploader/Image.vue b/vue/src/components/Uploader/Image.vue
index e0b8a448..7cacdb5d 100644
--- a/vue/src/components/Uploader/Image.vue
+++ b/vue/src/components/Uploader/Image.vue
@@ -1,74 +1,98 @@
 <template>
-<div>
-  <div :class="['image-wrap', isValidImage ? 'valid' : '']" @click.prevent="showPreview($event)">
-    <img v-if="isValidImage" :src="file.objectURL" :style="imageStyle"/>
-    <i class="fa fa-file-pdf-o" v-if="!this.file.error && file.type === 'application/pdf'"></i>
-    <i class="fa fa-frown-o" v-if="this.file.error"></i>    
-    <button type="button" class="btn-remove" @click.prevent="$emit('removeclick')" aria-label="Delete">
-      <i class="fa fa-times-circle"></i>
-    </button>
+  <div>
+    <div
+      :class="['image-wrap', isValidImage ? 'valid' : '']"
+      @click.prevent="showPreview($event)"
+    >
+      <img v-if="isValidImage" :src="file.objectURL" :style="imageStyle" />
+      <i
+        class="fa fa-file-pdf-o"
+        v-if="!this.file.error && file.type === 'application/pdf'"
+      ></i>
+      <i class="fa fa-frown-o" v-if="this.file.error"></i>
+      <button
+        type="button"
+        class="btn-remove"
+        @click.prevent="$emit('removeclick')"
+        aria-label="Delete"
+      >
+        <i class="fa fa-times-circle"></i>
+      </button>
+    </div>
+    <modal-preview
+      :file="file"
+      :imageStyle="imageStyle"
+      :scale="scale"
+      :rotate-val="rotateVal"
+      :show-modal="showModal"
+      @close="closePreview()"
+    />
   </div>
-    <modal-preview :file="file" 
-      :imageStyle="imageStyle" 
-      :rotate-val="rotateVal" 
-      :show-modal="showModal" 
-      @close="closePreview()" />  
-</div>
 </template>
 
 <script>
-import ModalPreview from './ModalPreview';
-import rotateFix from '../../utils/rotation';
-
-export default {
-  props: {
-    file: Object
-  },
-  components: {
-    ModalPreview
-  },
-  data: function () {
-    return {
-      showModal: false,
-    }
-  },
-  methods: {
-    showPreview($event) {
-      if (this.isValidImage) {
-        if ($event.target.tagName !== 'I' && $event.target.tagName !== 'BUTTON') {
-          this.showModal = true;
-        } 
-      }
+  import ModalPreview from "./ModalPreview";
+  import rotateFix from "../../utils/rotation";
+
+  export default {
+    props: {
+      file: Object,
     },
-    closePreview() {
-      this.showModal = false;
-    }
-  },
-  computed: {
-    isValidImage() {
-      return this.file.objectURL  && !this.file.error && this.file.type !== 'application/pdf';
+    components: {
+      ModalPreview,
     },
-    rotateVal() {
-      return rotateFix(this.file.rotation);
+    data: function() {
+      return {
+        showModal: false,
+      };
     },
-    imageStyle() {
-      if (this.rotateVal === 90) {
-        let scale = this.file.width / this.file.height;
-        let yshift = -100 * scale;
-        return "transform:rotate(90deg) translateY("+yshift+"%) scale("+scale+"); transform-origin: top left;";
-      }
-      if (this.rotateVal === 270) {
-        let scale = this.file.width / this.file.height;
-        let xshift = -100 * scale;
-        return "transform:rotate(270deg) translateX("+xshift+"%) scale("+scale+"); transform-origin: top left;";
-      }
-      if (this.rotateVal === 180) {
-        return "transform:rotate(180deg);";
-      }      
-      return '';
-    }
-  }
-}
+    methods: {
+      showPreview($event) {
+        if (this.isValidImage) {
+          if (
+            $event.target.tagName !== "I" &&
+            $event.target.tagName !== "BUTTON"
+          ) {
+            this.showModal = true;
+          }
+        }
+      },
+      closePreview() {
+        this.showModal = false;
+      },
+    },
+    computed: {
+      isValidImage() {
+        return (
+          this.file.objectURL &&
+          !this.file.error &&
+          this.file.type !== "application/pdf"
+        );
+      },
+      rotateVal() {
+        return rotateFix(this.file.rotation);
+      },
+      scale() {
+        if (!this.file.height || this.file.height <= 0) {
+          return 1;
+        }
+        return this.file.width / this.file.height;
+      },
+      imageStyle() {
+        const shift = -100 * this.scale;
+        if (this.rotateVal === 90) {
+          return `transform:rotate(90deg) translateY(${shift}%) scale(${this.scale}); transform-origin: top left;`;
+        }
+        if (this.rotateVal === 270) {
+          return `transform:rotate(270deg) translateX(${shift}%) scale(${this.scale}); transform-origin: top left;`;
+        }
+        if (this.rotateVal === 180) {
+          return "transform:rotate(180deg);";
+        }
+        return "";
+      },
+    },
+  };
 </script>
 
 <style scoped lang="scss">
@@ -90,18 +114,19 @@ export default {
       left: 0;
     }
 
-    i.fa-file-pdf-o, i.fa-frown-o {
+    i.fa-file-pdf-o,
+    i.fa-frown-o {
       display: block;
       font-size: 48px;
       margin-left: 60px;
     }
 
     i.fa-file-pdf-o {
-      color: #D5D5D5;
+      color: #d5d5d5;
     }
 
     i.fa-frown-o {
-      color: #EEE;
+      color: #eee;
     }
 
     &::after {
@@ -109,11 +134,11 @@ export default {
       content: "\f06e";
       margin: auto;
       font-size: 43px;
-      color: transparent;        
+      color: transparent;
     }
 
     &.valid:hover {
-      background-color: #365EBE;
+      background-color: #365ebe;
       cursor: pointer;
 
       button.btn-remove {
@@ -129,9 +154,9 @@ export default {
       color: white;
     }
 
-    &:hover img { 
+    &:hover img {
       opacity: 0.12;
-    } 
+    }
   }
 
   button {
@@ -146,7 +171,7 @@ export default {
       z-index: 4;
 
       i.fa {
-        color: #365EBE;
+        color: #365ebe;
         font-size: 23px;
 
         &::before {
@@ -157,4 +182,4 @@ export default {
       }
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/vue/src/components/Uploader/ItemTile.vue b/vue/src/components/Uploader/ItemTile.vue
index d9736e52..4059913f 100644
--- a/vue/src/components/Uploader/ItemTile.vue
+++ b/vue/src/components/Uploader/ItemTile.vue
@@ -1,72 +1,103 @@
 <template>
-  <div :class="['item-tile', file.error ? 'error': '']" v-if="file.progress === '100.00' || file.error">
-    <uploaded-image :file="file" :image-style="imageStyle" @imageclick="showPreview" @removeclick="$emit('remove')" />
+  <div
+    :class="['item-tile', file.error ? 'error' : '']"
+    v-if="file.progress === '100.00' || file.error"
+  >
+    <uploaded-image
+      :file="file"
+      :image-style="imageStyle"
+      @imageclick="showPreview"
+      @removeclick="$emit('remove')"
+    />
     <div class="bottom-wrapper">
       <div class="item-text">
         <div class="filename-text">
-          {{file.name}}
+          {{ file.name }}
         </div>
         <div class="size-text">
-          ({{ Math.round(file.size/1024/1024 * 100) / 100 }} MB)
-        </div>  
+          ({{ Math.round((file.size / 1024 / 1024) * 100) / 100 }} MB)
+        </div>
       </div>
-      <div class="button-wrapper" v-if="file.error || file.type !== 'application/pdf'">
+      <div
+        class="button-wrapper"
+        v-if="file.error || file.type !== 'application/pdf'"
+      >
         <div v-if="!file.active && file.success && !isPdf">
-          <button type="button" @click.prevent="$emit('moveup')" :disabled="index === 0" aria-label="Move down one position">
+          <button
+            type="button"
+            @click.prevent="$emit('moveup')"
+            :disabled="index === 0"
+            aria-label="Move down one position"
+          >
             <i class="fa fa-chevron-circle-left"></i>
           </button>
-          <button type="button" @click.prevent="$emit('movedown')" :disabled="index >= (fileCount - 1)" aria-label="Move up one position">
+          <button
+            type="button"
+            @click.prevent="$emit('movedown')"
+            :disabled="index >= fileCount - 1"
+            aria-label="Move up one position"
+          >
             <i class="fa fa-chevron-circle-right"></i>
           </button>
-          <button type="button" aria-label="Rotate counter-clockwise" @click.prevent="$emit('rotateleft')">
+          <button
+            type="button"
+            aria-label="Rotate counter-clockwise"
+            @click.prevent="$emit('rotateleft')"
+          >
             <i class="fa fa-undo"></i>
           </button>
-          <button type="button" aria-label="Rotate clockwise" @click.prevent="$emit('rotateright')">
+          <button
+            type="button"
+            aria-label="Rotate clockwise"
+            @click.prevent="$emit('rotateright')"
+          >
             <i class="fa fa-undo fa-flip-horizontal"></i>
           </button>
         </div>
-        <div class="alert alert-danger" v-if="file.error">File Upload Error</div>
+        <div class="alert alert-danger" v-if="file.error">
+          File Upload Error
+        </div>
       </div>
     </div>
   </div>
   <div v-else>
-    <progress-bar :file="file"/>
+    <progress-bar :file="file" />
   </div>
 </template>
 
 <script>
-import UploadedImage from './Image'
-import ProgressBar from './ProgressBar'
-
-export default {
-  props: {
-    file: Object,
-    index: Number,
-    fileCount: Number
-  },
-  data: function () {
-    return {
-      showModal: false,
-    }
-  },
-  components: {
-    ProgressBar,
-    UploadedImage
-  },
-  methods: {
-    showPreview() {
-       this.showModal = true;
+  import UploadedImage from "./Image";
+  import ProgressBar from "./ProgressBar";
+
+  export default {
+    props: {
+      file: Object,
+      index: Number,
+      fileCount: Number,
     },
-    closePreview() {
-      this.showModal = false;
-    }
-  },
-  computed: {
-    isPdf() {
-      return this.file.type === 'application/pdf';
-    }
-  }
-}
+    data: function() {
+      return {
+        showModal: false,
+      };
+    },
+    components: {
+      ProgressBar,
+      UploadedImage,
+    },
+    methods: {
+      showPreview() {
+        this.showModal = true;
+      },
+      closePreview() {
+        this.showModal = false;
+      },
+    },
+    computed: {
+      isPdf() {
+        return this.file.type === "application/pdf";
+      },
+    },
+  };
 </script>
 
 <style lang="scss">
@@ -78,20 +109,19 @@ export default {
     .item-text {
       text-align: center;
       padding: 7px 10px;
-      font-size: 16px; 
+      font-size: 16px;
       line-height: 24px;
       min-height: 87px;
 
-
       .filename-text {
         min-height: 25px;
         max-height: 50px;
         overflow: hidden;
-        overflow-wrap: anywhere;;
+        overflow-wrap: anywhere;
         display: -webkit-box;
         -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;  
-      }    
+        -webkit-box-orient: vertical;
+      }
 
       .size-text {
         min-height: 25px;
@@ -110,9 +140,9 @@ export default {
       border-bottom-right-radius: 6px;
       border: 1px solid silver;
       border-top: none;
-      background-color: #F2F2F2;
+      background-color: #f2f2f2;
       margin-bottom: 10px;
-      
+
       .alert-danger {
         background-color: inherit;
         border: none;
@@ -126,9 +156,9 @@ export default {
 
     &.error {
       .bottom-wrapper {
-        background-color: #F7D4D5;
-        border: 1px solid #D8292F;
-        border-top: none;        
+        background-color: #f7d4d5;
+        border: 1px solid #d8292f;
+        border-top: none;
       }
     }
   }
@@ -137,7 +167,7 @@ export default {
 <style lang="scss">
   .item-tile {
     button {
-      position: relative; 
+      position: relative;
       z-index: 2;
       background-color: transparent;
       border: none;
@@ -172,8 +202,8 @@ export default {
 
     &.error {
       button.btn-remove i.fa {
-        color: #D8292F;
+        color: #d8292f;
       }
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/vue/src/components/Uploader/ModalPreview.vue b/vue/src/components/Uploader/ModalPreview.vue
index a4d24423..2840b144 100644
--- a/vue/src/components/Uploader/ModalPreview.vue
+++ b/vue/src/components/Uploader/ModalPreview.vue
@@ -1,39 +1,56 @@
 <template>
-  <modal v-model="showModal" class="image-preview-modal" ref="modal" :footer="false" @hide="$emit('close')">
-    <img v-if="file.objectURL  && !file.error && file.type !== 'application/pdf'" :src="file.objectURL" :style="modalImageStyle">
+  <modal
+    v-model="showModal"
+    class="image-preview-modal"
+    ref="modal"
+    :footer="false"
+    @hide="$emit('close')"
+  >
+    <img
+      v-if="file.objectURL && !file.error && file.type !== 'application/pdf'"
+      :src="file.objectURL"
+      :style="modalImageStyle"
+    />
   </modal>
 </template>
 
 <script>
-import { Modal } from 'uiv';
+  import { Modal } from "uiv";
 
-export default {
-  props: {
-    file: Object,
-    imageStyle: String,
-    rotateVal: Number,
-    showModal: Boolean
-  },
-  components: {
-    Modal
-  },
-  computed: {
-    modalImageStyle() {
-      let extraCss = '';
-      if (this.rotateVal === 90 || this.rotateVal === 270) {
-        extraCss = ' width: 100%; height: inherit !important;';
-      }
-      return this.imageStyle + extraCss;
-    }
-  },
-}
+  export default {
+    props: {
+      file: Object,
+      imageStyle: String,
+      rotateVal: Number,
+      showModal: Boolean,
+      scale: Number,
+    },
+    components: {
+      Modal,
+    },
+    computed: {
+      modalImageStyle() {
+        let extraCss = "";
+        if (this.rotateVal === 90 || this.rotateVal === 270) {
+          if (this.scale < 1) {
+            extraCss = " width: 100%; height: inherit !important;";
+          } else {
+            extraCss = ` width: calc(${85 /
+              this.scale}vh); height: inherit !important;`;
+          }
+        } else {
+          extraCss = " max-height: 85vh;";
+        }
+        return this.imageStyle + extraCss;
+      },
+    },
+  };
 </script>
 
 <style lang="scss">
   .image-preview-modal {
     .modal-dialog {
-      max-width: 780px;
-      width: inherit;
+      width: fit-content;
       text-align: center;
     }
 
@@ -43,13 +60,14 @@ export default {
       -webket-box-shadow: none;
       border: none;
 
-      .modal-body, .modal-header {
+      .modal-body,
+      .modal-header {
         padding: 0 !important;
       }
 
       .modal-body {
         img {
-          max-width: 100%;
+          max-width: 780px;
         }
       }
 
@@ -58,6 +76,6 @@ export default {
         color: white;
         opacity: 1;
       }
-    } 
+    }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/vue/src/components/Uploader/ProgressBar.vue b/vue/src/components/Uploader/ProgressBar.vue
index 68b352ea..4009a9ce 100644
--- a/vue/src/components/Uploader/ProgressBar.vue
+++ b/vue/src/components/Uploader/ProgressBar.vue
@@ -1,21 +1,16 @@
 <template>
   <div>
-    <div class="item-tile" v-if="file.progress !== '0.00'"> 
+    <div class="item-tile" v-if="file.progress !== '0.00'">
       <div class="status-wrap">
-        <div>
-        Uploading...<br>{{ file.progress}}%
-        </div>
+        <div>Uploading...<br />{{ file.progress }}%</div>
         <div class="progress">
-          <div :style="'width:' + file.progress + '%'">
-          </div>
+          <div :style="'width:' + file.progress + '%'"></div>
         </div>
       </div>
     </div>
-    <div class="item-tile" v-else> 
+    <div class="item-tile" v-else>
       <div class="status-wrap">
-        <div>
-        Waiting...<br><br>
-        </div>
+        <div>Waiting...<br /><br /></div>
         <div class="progress"></div>
       </div>
     </div>
@@ -23,11 +18,11 @@
 </template>
 
 <script>
-export default {
-  props: {
-    file: Object
-  }
-}
+  export default {
+    props: {
+      file: Object,
+    },
+  };
 </script>
 
 <style scoped lang="scss">
@@ -44,7 +39,7 @@ export default {
 
     .progress {
       width: calc(100% - 1.5px);
-      background-color: #F2F2F3;
+      background-color: #f2f2f3;
       height: 22px;
       position: relative;
       bottom: -54px;
@@ -53,11 +48,11 @@ export default {
       border-top-right-radius: 0;
 
       > div {
-        background-color: #365EBE;
+        background-color: #365ebe;
         height: 22px;
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
       }
     }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/vue/src/components/Uploader/Uploader.vue b/vue/src/components/Uploader/Uploader.vue
index 05cd583a..15ed3967 100644
--- a/vue/src/components/Uploader/Uploader.vue
+++ b/vue/src/components/Uploader/Uploader.vue
@@ -1,416 +1,486 @@
 <template>
-<div>
-  <h5 class="uploader-label">
-    {{ formDef.preText }} 
-    <a href="javascript:void(0)" :id="'Tooltip-' + uniqueId">
-      {{ formDef.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="formDef.help" :target="'#Tooltip-' + uniqueId"></tooltip>
-  <label :for="inputId" class="sr-only">
-    {{ formDef.preText }} {{ formDef.name }} 
-    <span v-if="party === 1"> - For You</span>
-    <span v-if="party === 2"> - For Your Spouse</span>
-  </label>
-  <div @dragover="dragOn" @dragenter="dragOn" @dragleave="dragOff" @dragend="dragOff" @drop="dragOff">
-    <file-upload
-      ref="upload"
-      v-model="files"
-      :multiple="true"
-      :maximum="maxFiles"
-      :size="maxMegabytes * 1024 * 1024"      
-      :drop="true"
-      :drop-directory="false"
-      :post-action="postAction"
-      :input-id="inputId"
-      name="file"
-      :class="['drop-zone', dragging ? 'dragging' : '']"
-      :data="inputKeys"
-      @input-file="inputFile"
-      @input-filter="inputFilter">
-    <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>
-    <template v-else>
-      <div class="text-danger error-top" v-if="fileErrors === 1">
-        <strong>One file has failed to upload to the server. Please remove the file marked 'File Upload Error' and try uploading it again.</strong>
-      </div>
-      <div class="text-danger error-top" v-if="fileErrors > 1">
-        <strong>Some files have failed to upload to the server. Please remove the files marked 'File Upload Error' and try uploading them again.</strong>
-      </div>      
-      <div class="text-danger error-top" v-if="tooBig">
-        <strong>The total of all uploaded files for this form cannot exceed {{ maxMegabytes }} MB.
-        Please reduce the size of your files so the total is below this limit.</strong>
-      </div>
-      <div class="cards">
-        <div v-for="(file, index) in files" v-bind:key="index" class="card">
-          <item-tile
-            :file="file"
-            :index="index"
-            :file-count="files.length"
-            @remove="remove(file)"
-            @moveup="moveUp(index)"
-            @movedown="moveDown(index)"
-            @rotateleft="rotateLeft(index)"
-            @rotateright="rotateRight(index)"/>
+  <div>
+    <h5 class="uploader-label">
+      {{ formDef.preText }}
+      <a href="javascript:void(0)" :id="'Tooltip-' + uniqueId">
+        {{ formDef.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="formDef.help" :target="'#Tooltip-' + uniqueId"></tooltip>
+    <label :for="inputId" class="sr-only">
+      {{ formDef.preText }} {{ formDef.name }}
+      <span v-if="party === 1"> - For You</span>
+      <span v-if="party === 2"> - For Your Spouse</span>
+    </label>
+    <div
+      @dragover="dragOn"
+      @dragenter="dragOn"
+      @dragleave="dragOff"
+      @dragend="dragOff"
+      @drop="dragOff"
+    >
+      <file-upload
+        ref="upload"
+        v-model="files"
+        :multiple="true"
+        :maximum="maxFiles"
+        :size="maxMegabytes * 1024 * 1024"
+        :drop="true"
+        :drop-directory="false"
+        :post-action="postAction"
+        :input-id="inputId"
+        name="file"
+        :class="['drop-zone', dragging ? 'dragging' : '']"
+        :data="inputKeys"
+        @input-file="inputFile"
+        @input-filter="inputFilter"
+      >
+        <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 class="upload-button" v-if="!tooBig">
-          <div class="upload-button-wrapper">
-          <i class="fa fa-plus-circle"></i>
+        <template v-else>
+          <div class="text-danger error-top" v-if="fileErrors === 1">
+            <strong>
+              One file has failed to upload to the server. Please remove the
+              file marked 'File Upload Error' and try uploading it again.
+            </strong>
           </div>
-        </div>
-      </div>
-      <div class="text-danger pull-right error-bottom" v-if="tooBig">
-        <em>
-          <strong>
-            (Total {{ Math.round(totalSize/1024/1024 * 100) / 100 }} 
-            MB of {{ maxMegabytes }} MB)
-          </strong>
-        </em>
-      </div>      
-    </template>
-    </file-upload>
-  </div>
-  <div class="pull-right" v-if="!tooBig">
-    <em>(Maximum {{ maxMegabytes }} MB)</em>
+          <div class="text-danger error-top" v-if="fileErrors > 1">
+            <strong>
+              Some files have failed to upload to the server. Please remove the
+              files marked 'File Upload Error' and try uploading them again.
+            </strong>
+          </div>
+          <div class="text-danger error-top" v-if="tooBig">
+            <strong>
+              The total of all uploaded files for this form cannot exceed
+              {{ maxMegabytes }} MB. Please reduce the size of your files so the
+              total is below this limit.
+            </strong>
+          </div>
+          <div class="cards">
+            <div v-for="(file, index) in files" v-bind:key="index" class="card">
+              <item-tile
+                :file="file"
+                :index="index"
+                :file-count="files.length"
+                @remove="remove(file)"
+                @moveup="moveUp(index)"
+                @movedown="moveDown(index)"
+                @rotateleft="rotateLeft(index)"
+                @rotateright="rotateRight(index)"
+              />
+            </div>
+            <div class="upload-button" v-if="!tooBig">
+              <div class="upload-button-wrapper">
+                <i class="fa fa-plus-circle"></i>
+              </div>
+            </div>
+          </div>
+          <div class="text-danger pull-right error-bottom" v-if="tooBig">
+            <em>
+              <strong>
+                (Total
+                {{ Math.round((totalSize / 1024 / 1024) * 100) / 100 }} MB of
+                {{ maxMegabytes }} MB)
+              </strong>
+            </em>
+          </div>
+        </template>
+      </file-upload>
+    </div>
+    <div class="pull-right" v-if="!tooBig">
+      <em>(Maximum {{ maxMegabytes }} MB)</em>
+    </div>
+    <modal ref="warningModal" class="warning-modal" v-model="showWarning">
+      {{ warningText }}
+    </modal>
   </div>
-  <modal ref="warningModal" class="warning-modal" v-model="showWarning">
-    {{ warningText }}
-  </modal>
-</div>
 </template>
 
 <script>
-import VueUploadComponent from 'vue-upload-component'
-import { Tooltip, Modal } from 'uiv';
-import ItemTile from './ItemTile'
-import FormDefinitions from "../../utils/forms";
-import rotateFix from '../../utils/rotation';
-import axios from 'axios';
-import graphQLStringify from 'stringify-object';
+  import VueUploadComponent from "vue-upload-component";
+  import { Tooltip, Modal } from "uiv";
+  import ItemTile from "./ItemTile";
+  import FormDefinitions from "../../utils/forms";
+  import rotateFix from "../../utils/rotation";
+  import axios from "axios";
+  import graphQLStringify from "stringify-object";
 
-export default {
-  props: {
-    docType: String,
-    party: { type: Number, default: 0 }
-  },
-  data: function () {
-    return {
-      maxFiles: 30,
-      maxMegabytes: 10,
-      files: [],
-      dragging: false,
-      showWarning: false,
-      warningText: "",
-      isDirty: false
-    }
-  },
-  components: {
-    FileUpload: VueUploadComponent,
-    ItemTile,
-    Tooltip,
-    Modal
-  },
-  computed: {
-    inputId() {
-      return "Uploader-" + this.uniqueId;
+  export default {
+    props: {
+      docType: String,
+      party: { type: Number, default: 0 },
     },
-    inputKeys() {
+    data: function() {
       return {
-        doc_type: this.docType,
-        party_code: this.party
+        maxFiles: 30,
+        maxMegabytes: 10,
+        files: [],
+        dragging: false,
+        showWarning: false,
+        warningText: "",
+        isDirty: false,
       };
-    },    
-    formDef() {
-      return FormDefinitions[this.docType];
     },
-    postAction() {
-      return this.$parent.proxyRootPath + "api/documents/"
+    components: {
+      FileUpload: VueUploadComponent,
+      ItemTile,
+      Tooltip,
+      Modal,
     },
-    uniqueId() {
-      if (this.party === 0) {
-        return this.docType;
-      }
-      return this.docType + this.party;
-    },
-    totalSize() {
-      let size = 0;
-      this.files.forEach((file) => {
-        if (!file.error) {
-          size += file.size;
+    computed: {
+      inputId() {
+        return "Uploader-" + this.uniqueId;
+      },
+      inputKeys() {
+        return {
+          doc_type: this.docType,
+          party_code: this.party,
+        };
+      },
+      formDef() {
+        return FormDefinitions[this.docType];
+      },
+      postAction() {
+        return this.$parent.proxyRootPath + "api/documents/";
+      },
+      uniqueId() {
+        if (this.party === 0) {
+          return this.docType;
         }
-      });
-      return size;
-    },
-    fileErrors() {
-      let count = 0;
-      this.files.forEach((file) => {
-        if (file.error) {
-          count++;
-        }
-      });
-      return count;
-    },    
-    tooBig() {
-      return this.totalSize > this.maxMegabytes * 1024 * 1024;
-    }
-  },
-  methods: {
-    inputFile(newFile, oldFile) {
-
-      // upload is complete
-      if (newFile && oldFile && !newFile.active && oldFile.active) {
-        if (newFile.xhr) {
-          //  Error Handling 
-          const statusCode = newFile.xhr.status;
-          if (statusCode === 400) {
-            // 400 validation error: show the message returned by the server
-            const message = JSON.parse(newFile.xhr.responseText)[0];
-            this.showError(message);
-            this.$refs.upload.remove(newFile);
-          } else if (statusCode === 403) {
-            this.showError('Error: Your user session has expired. Please log in again.');
-          } else if (statusCode !== 200 && statusCode !== 201 ) {
-            // 500 server error: show the status text and a generic message
-            this.showError('Error: ' + newFile.xhr.statusText + '. Please try the upload again. If this doesn\'t work, try again later.');
-            console.log('status', statusCode)
+        return this.docType + this.party;
+      },
+      totalSize() {
+        let size = 0;
+        this.files.forEach((file) => {
+          if (!file.error) {
+            size += file.size;
           }
-        }
-      }
-      this.$refs.upload.active = true;
+        });
+        return size;
+      },
+      fileErrors() {
+        let count = 0;
+        this.files.forEach((file) => {
+          if (file.error) {
+            count++;
+          }
+        });
+        return count;
+      },
+      tooBig() {
+        return this.totalSize > this.maxMegabytes * 1024 * 1024;
+      },
+      pdfURL() {
+        return `${this.$parent.proxyRootPath}pdf-images/${this.docType}/${this.party}/`;
+      },
     },
-    inputFilter(newFile, oldFile, prevent) {
-      if (newFile && !oldFile) {
-        // Filter non-image file
-        if (!/\.(jpeg|jpg|gif|png|pdf)$/i.test(newFile.name)) {
-          this.showError('Unsupported file type.  Allowed file types are .jpeg, .jpg, .gif, .png and .pdf.');
-          return prevent()
+    methods: {
+      inputFile(newFile, oldFile) {
+        // upload is complete
+        if (newFile && oldFile && !newFile.active && oldFile.active) {
+          if (newFile.xhr) {
+            //  Error Handling
+            const statusCode = newFile.xhr.status;
+            if (statusCode === 400) {
+              // 400 validation error: show the message returned by the server
+              const message = JSON.parse(newFile.xhr.responseText)[0];
+              this.showError(message);
+              this.$refs.upload.remove(newFile);
+            } else if (statusCode === 403) {
+              this.showError(
+                "Error: Your user session has expired. Please log in again."
+              );
+            } else if (statusCode !== 200 && statusCode !== 201) {
+              // 500 server error: show the status text and a generic message
+              this.showError(
+                `Error: ${newFile.xhr.statusText}. Please try the upload again. If this doesn't work, try again later.`
+              );
+              console.log("status", statusCode);
+            }
+          }
         }
-
-        this.files.forEach((file) => {
-          // prevent duplicates (based on filename and length)
-          if (file.name === newFile.name && file.length === newFile.length) {
-            this.showError('This file appears to have already been uploaded for this document. Duplicate filename: ' + newFile.name);
+        this.$refs.upload.active = true;
+      },
+      inputFilter(newFile, oldFile, prevent) {
+        if (newFile && !oldFile) {
+          // Filter non-image file
+          if (!/\.(jpeg|jpg|gif|png|pdf)$/i.test(newFile.name)) {
+            this.showError(
+              "Unsupported file type.  Allowed file types are .jpeg, .jpg, .gif, .png and .pdf."
+            );
             return prevent();
           }
-        });
-      }
 
-      if (newFile) {
-        // make sure the user isn't uploading more MB of files than allowed
-        if (this.totalSize > this.maxMegabytes * 1024 * 1024) {
-          this.showError('The total of all uploaded files for this form cannot exceed ' + this.maxMegabytes + ' MB. Please reduce the size of your files so the total is below this limit.');
-
-          // only allow one file over the limit (so we can show the red messaging on the screen)
-          let previousTotalSize = 0;
           this.files.forEach((file) => {
-            if ((file.name !== newFile.name || file.size !== newFile.size) && !file.error) {
-              previousTotalSize += file.size;
+            // prevent duplicates (based on filename and length)
+            if (file.name === newFile.name && file.length === newFile.length) {
+              this.showError(
+                `This file appears to have already been uploaded for this document. Duplicate filename: ${newFile.name}`
+              );
+              return prevent();
             }
           });
-
-          // if the user is more than one file over the limit, then block the upload
-          if (previousTotalSize > this.maxMegabytes * 1024 * 1024) {
-            this.$refs.upload.remove(newFile);
-            return prevent();
-          }
         }
 
-        // if it's a PDF, make sure it's the only item being uploaded
-        if (newFile.type === 'application/pdf') {
-          if (this.files.length > 0) {
-            if (this.files[0].name != newFile.name || this.files[0].length != newFile.length) {
-              this.showError('Only one PDF is allowed per form, and PDF documents cannot be combined with images.');
+        if (newFile) {
+          // make sure the user isn't uploading more MB of files than allowed
+          if (this.totalSize > this.maxMegabytes * 1024 * 1024) {
+            this.showError(
+              `The total of all uploaded files for this form cannot exceed ${this.maxMegabytes} MB. Please reduce the size of your files so the total is below this limit.`
+            );
+
+            // only allow one file over the limit (so we can show the red messaging on the screen)
+            let previousTotalSize = 0;
+            this.files.forEach((file) => {
+              if (
+                (file.name !== newFile.name || file.size !== newFile.size) &&
+                !file.error
+              ) {
+                previousTotalSize += file.size;
+              }
+            });
+
+            // if the user is more than one file over the limit, then block the upload
+            if (previousTotalSize > this.maxMegabytes * 1024 * 1024) {
               this.$refs.upload.remove(newFile);
               return prevent();
             }
           }
 
-        } else {
-          // if it's not a PDF, make sure there are no PDFs already uplaoded
-          this.files.forEach((file) => {
-            if (file.type === 'application/pdf') {
-              this.showError('PDF documents cannot be combined with images. Only a single PDF or multiple images can be uploaded into one form. ');
-              this.$refs.upload.remove(newFile);
-              return prevent();
+          // if it's a PDF, make sure it's the only item being uploaded
+          if (newFile.type === "application/pdf") {
+            if (this.files.length > 0) {
+              if (
+                this.files[0].name != newFile.name ||
+                this.files[0].length != newFile.length
+              ) {
+                this.showError(
+                  "Only one PDF is allowed per form, and PDF documents cannot be combined with images."
+                );
+                this.$refs.upload.remove(newFile);
+                return prevent();
+              }
             }
-          });
-        }
+          } else {
+            // if it's not a PDF, make sure there are no PDFs already uplaoded
+            this.files.forEach((file) => {
+              if (file.type === "application/pdf") {
+                this.showError(
+                  "PDF documents cannot be combined with images. Only a single PDF or multiple images can be uploaded into one form. "
+                );
+                this.$refs.upload.remove(newFile);
+                return prevent();
+              }
+            });
+          }
 
-        // Add extra data to to the file object
-        newFile.objectURL = '';
-        newFile.width = 0;
-        newFile.height = 0;
-        newFile.rotation = 0;
-        let URL = window.URL || window.webkitURL
-        if (URL && URL.createObjectURL) {
-          newFile.objectURL = URL.createObjectURL(newFile.file)
-          const img = new Image();
-          const self = this;
-          img.onload = function() {
-            newFile.width = this.width || 0;
-            newFile.height = this.height || 0;
-            self.isDirty = true;
+          // Add extra data to to the file object
+          newFile.objectURL = "";
+          newFile.width = 0;
+          newFile.height = 0;
+          newFile.rotation = 0;
+          let URL = window.URL || window.webkitURL;
+          if (URL && URL.createObjectURL) {
+            newFile.objectURL = URL.createObjectURL(newFile.file);
+            const img = new Image();
+            const self = this;
+            img.onload = function() {
+              newFile.width = this.width || 0;
+              newFile.height = this.height || 0;
+              self.isDirty = true;
+            };
+            img.src = newFile.objectURL;
           }
-          img.src = newFile.objectURL;
         }
-      }
-    },
-    remove(file) {
-      const urlbase =  `${this.$parent.proxyRootPath}api/documents`;
-      const encFilename = encodeURIComponent(file.name);
-      if (!file.error) {
-        // we add an extra 'x' to the file extension so the siteminder proxy doesn't treat it as an image
-        const url = `${urlbase}/${this.docType}/${this.party}/${encFilename}x/${file.size}/`;        
-        axios.delete(url)
-            .then(response => {
-              const pos = this.files.findIndex(f => f.docType === file.docType && f.size === file.size);
+      },
+      remove(file) {
+        const urlbase = `${this.$parent.proxyRootPath}api/documents`;
+        const encFilename = encodeURIComponent(file.name);
+        if (!file.error) {
+          // we add an extra 'x' to the file extension so the siteminder proxy doesn't treat it as an image
+          const url = `${urlbase}/${this.docType}/${this.party}/${encFilename}x/${file.size}/`;
+          axios
+            .delete(url)
+            .then((response) => {
+              const pos = this.files.findIndex(
+                (f) => f.docType === file.docType && f.size === file.size
+              );
               if (pos > -1) {
                 this.files.splice(pos, 1);
               }
             })
             .catch((error) => {
-              this.showError('Error deleting document from the server: ' + file.name);
+              this.showError(
+                "Error deleting document from the server: " + file.name
+              );
               this.$refs.upload.remove(file);
             });
-      } else {
-        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;
-    },    
-    dragOn() {
-      this.dragging = true;
-    },
-    dragOff() {
-      this.dragging = false;
-    },
-    showError(message) {
-      this.warningText = message;
-      this.showWarning = true;
-    },   
-    saveMetaData() {
-      let allFiles = [];
-      this.files.forEach((file) => {
-        allFiles.push({
-          filename: file.name, 
-          size: file.size,
-          width: file.width,
-          height: file.height,
-          rotation: rotateFix(file.rotation)
+        } else {
+          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;
+      },
+      dragOn() {
+        this.dragging = true;
+      },
+      dragOff() {
+        this.dragging = false;
+      },
+      showError(message) {
+        this.warningText = message;
+        this.showWarning = true;
+      },
+      saveMetaData() {
+        let allFiles = [];
+        this.files.forEach((file) => {
+          allFiles.push({
+            filename: file.name,
+            size: file.size,
+            width: file.width,
+            height: file.height,
+            rotation: rotateFix(file.rotation),
+          });
         });
-      });
-      const data = {
-        docType: this.docType,
-        partyCode: this.party,
-        files: allFiles
-      };
-      const graphQLData = graphQLStringify(data,{singleQuotes: false, inlineCharacterLimit: 99999});
-      const url =  `${this.$parent.proxyRootPath}api/graphql/`;
-      axios.post(url, {
-        query: `
+        const data = {
+          docType: this.docType,
+          partyCode: this.party,
+          files: allFiles,
+        };
+        const graphQLData = graphQLStringify(data, {
+          singleQuotes: false,
+          inlineCharacterLimit: 99999,
+        });
+        const url = `${this.$parent.proxyRootPath}api/graphql/`;
+        axios
+          .post(url, {
+            query: `
           mutation updateMetadata {
             updateMetadata(input:${graphQLData}){
               documents{filename size width height rotation contentType}
             }
           }
-        `})
-          .then(response => {
-              // check for errors in the graphQL response
-              if (response.data.errors && response.data.errors.length) {
-                response.data.errors.forEach((error) => {
-                  console.log('error', error.message || error);
-                  // if there was an error it's probably because the upload isn't finished yet
-                  // mark the metadata as dirty so it will save metadata again
-                  this.isDirty = true;
-                })
-              }
+        `,
+          })
+          .then((response) => {
+            // check for errors in the graphQL response
+            if (response.data.errors && response.data.errors.length) {
+              response.data.errors.forEach((error) => {
+                console.log("error", error.message || error);
+                // if there was an error it's probably because the upload isn't finished yet
+                // mark the metadata as dirty so it will save metadata again
+                this.isDirty = true;
+              });
+            }
           })
           .catch((error) => {
-            this.showError('Error saving metadata');
-            console.log('error', error);
+            this.showError("Error saving metadata");
+            console.log("error", error);
           });
-    }
-  },
-  created() {
-    // get saved state from the server
-    const url =  `${this.$parent.proxyRootPath}api/graphql/`;
-    axios.post(url, {
-      query: `
+      },
+    },
+    created() {
+      // get saved state from the server
+      const url = `${this.$parent.proxyRootPath}api/graphql/`;
+      axios
+        .post(url, {
+          query: `
         query getMetadata {
           documents(docType:"${this.docType}",partyCode:${this.party}) {
             filename size width height rotation contentType
           }
         }
       `,
-      variables: null})
-        .then(response => {
-            response.data.data.documents.forEach((doc) => {
-              this.files.push({
-                name: doc.filename,
-                size: doc.size,
-                width: doc.width,
-                height: doc.height,
-                rotation: doc.rotation,
-                type: doc.contentType,
-                error: false,
-                success: true,
-                progress: '100.00',
-                // we add an extra 'x' to the file extension so the siteminder proxy doesn't treat it as an image
-                objectURL: `${this.$parent.proxyRootPath}api/documents/${this.docType}/${this.party}/${doc.filename}x/${doc.size}/`
-              });
+          variables: null,
+        })
+        .then((response) => {
+          response.data.data.documents.forEach((doc) => {
+            this.files.push({
+              name: doc.filename,
+              size: doc.size,
+              width: doc.width,
+              height: doc.height,
+              rotation: doc.rotation,
+              type: doc.contentType,
+              error: false,
+              success: true,
+              progress: "100.00",
+              // we add an extra 'x' to the file extension so the siteminder proxy doesn't treat it as an image
+              objectURL: `${this.$parent.proxyRootPath}api/documents/${this.docType}/${this.party}/${doc.filename}x/${doc.size}/`,
             });
+          });
         })
         .catch((error) => {
-          this.showError('Error getting metadata');
-          console.log('error', error);
+          this.showError("Error getting metadata");
+          console.log("error", error);
         });
 
-    // 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 and possibly 
-    // result in out-of-order requests)
-    setInterval(() => {
-      if (this.isDirty) {
-        this.saveMetaData();
-        this.isDirty = false;
-      }
-    }, 1000);
+      // 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 and possibly
+      // result in out-of-order requests)
+      setInterval(() => {
+        if (this.isDirty) {
+          this.saveMetaData();
+          this.isDirty = false;
+        }
+      }, 1000);
 
-    // Prevent browser from loading a drag-and-dropped file if it's
-    // not dropped in the correct area
-    window.addEventListener("dragover",function(e){
-    e = e || event;
-    e.preventDefault();
-    },false);
+      // Prevent browser from loading a drag-and-dropped file if it's
+      // not dropped in the correct area
+      window.addEventListener(
+        "dragover",
+        function(e) {
+          e = e || event;
+          e.preventDefault();
+        },
+        false
+      );
 
-    window.addEventListener("drop",function(e){
-    e = e || event;
-    e.preventDefault();
-    },false);    
-  }
-}
+      window.addEventListener(
+        "drop",
+        function(e) {
+          e = e || event;
+          e.preventDefault();
+        },
+        false
+      );
+    },
+  };
 </script>
 
 <style scoped lang="scss">
@@ -419,13 +489,13 @@ export default {
     width: 100%;
     display: block;
     text-align: left;
-    border: 2px #365EBE dashed;
+    border: 2px #365ebe dashed;
     border-radius: 6px;
     padding: 18px 32px 0 18px;
     margin-bottom: 5px;
 
     &.dragging {
-      background-color: #D7DFF2;
+      background-color: #d7dff2;
     }
 
     .cards {
@@ -444,13 +514,13 @@ export default {
     .upload-button {
       position: absolute;
       right: 16px;
-      top: 17px;        
-    }    
+      top: 17px;
+    }
 
     .fa-plus-circle {
       font-size: 3rem;
       margin-bottom: 8px;
-      color: #365EBE;
+      color: #365ebe;
     }
 
     .placeholder {
@@ -468,7 +538,7 @@ export default {
   }
 
   h5.uploader-label {
-    display: block;   
+    display: block;
     margin-top: 30px;
     margin-bottom: 10px;
     font-weight: normal;
@@ -492,7 +562,7 @@ export default {
   }
 
   /* override vue-upload-component styles for IE11 issues */
-  .file-uploads-html5 input[type=file] {
+  .file-uploads-html5 input[type="file"] {
     height: 0 !important;
     padding: 0 !important;
     border: none !important;
diff --git a/vue/src/pages/final-filing/FinalFiling.vue b/vue/src/pages/final-filing/FinalFiling.vue
index 4ccebddd..dc20f00e 100644
--- a/vue/src/pages/final-filing/FinalFiling.vue
+++ b/vue/src/pages/final-filing/FinalFiling.vue
@@ -2,35 +2,49 @@
   <div id="app">
     <div class="question-well-border-less" v-if="signingLocation === 'Virtual'">
       <div>
-        <!-- CSA - Child Support Affidavit -->            
-        <Uploader doc-type="CSA"/>
+        <!-- CSA - Child Support Affidavit -->
+        <Uploader doc-type="CSA" />
       </div>
       <div>
-        <!-- AFDO - Affidavit - Desk Order Divorce -->            
-        <Uploader doc-type="AFDO"/>
+        <!-- AFDO - Affidavit - Desk Order Divorce -->
+        <Uploader doc-type="AFDO" />
       </div>
     </div>
-    <div class="question-well-border-less" v-else-if="signingLocationYou === 'Virtual' && signingLocationSpouse === 'Virtual'">
+    <div
+      class="question-well-border-less"
+      v-else-if="
+        signingLocationYou === 'Virtual' && signingLocationSpouse === 'Virtual'
+      "
+    >
       <div>
         <!-- CSA - Child Support Affidavit -->
-        <Uploader doc-type="CSA" :party="1"/>
+        <Uploader doc-type="CSA" :party="1" />
       </div>
       <div>
         <!-- AFDO - Affidavit - Desk Order Divorce -->
-        <Uploader doc-type="AFDO" :party="1"/>
+        <Uploader doc-type="AFDO" :party="1" />
       </div>
       <div>
         <!-- CSA - Child Support Affidavit -->
-        <Uploader doc-type="CSA" :party="2"/>        
+        <Uploader doc-type="CSA" :party="2" />
       </div>
       <div>
-        <!-- AFDO - Affidavit - Desk Order Divorce -->            
-        <Uploader doc-type="AFDO" :party="2"/>
+        <!-- AFDO - Affidavit - Desk Order Divorce -->
+        <Uploader doc-type="AFDO" :party="2" />
       </div>
     </div>
     <template v-else-if="howToFile === 'Online'">
-      <div class="question-well-border-less" v-if="signingLocation.length || (signingLocationYou.length && signingLocationSpouse.length)">
-        <p>Missing a form required on this page? Check the <a :href="printFormUrl">Review Forms</a> step.</p>
+      <div
+        class="question-well-border-less"
+        v-if="
+          signingLocation.length ||
+            (signingLocationYou.length && signingLocationSpouse.length)
+        "
+      >
+        <p>
+          Missing a form required on this page? Check the
+          <a :href="printFormUrl">Review Forms</a> step.
+        </p>
         <p>The following forms will be automatically filed for you:</p>
         <ul>
           <li>Requisition Form (F35)</li>
@@ -38,47 +52,50 @@
         </ul>
         <div>
           <!-- CSA - Child Support Affidavit -->
-          <Uploader doc-type="CSA"/>
+          <Uploader doc-type="CSA" />
         </div>
         <div>
           <!-- AFDO - Affidavit - Desk Order Divorce -->
-          <Uploader doc-type="AFDO"/>
+          <Uploader doc-type="AFDO" />
         </div>
         <div>
           <!-- OFI - Final Order -->
-          <Uploader doc-type="OFI"/>
+          <Uploader doc-type="OFI" />
         </div>
         <div>
-          <!-- EFSS - Electronic Filing Statement - Supreme -->          
-          <Uploader doc-type="EFSS"
-            :party="1"
-            post-text=" - For You"/>
+          <!-- EFSS - Electronic Filing Statement - Supreme -->
+          <Uploader doc-type="EFSS" :party="1" post-text=" - For You" />
         </div>
         <div>
           <!-- EFSS - Electronic Filing Statement - Supreme -->
-          <Uploader doc-type="EFSS" :party="2"/>
+          <Uploader doc-type="EFSS" :party="2" />
         </div>
         <div>
           <!-- AAI - Agreement as to Annual Income -->
-          <Uploader doc-type="AAI"/>
+          <Uploader doc-type="AAI" />
         </div>
         <div>
           <!-- NCV – Name Change Form – Vital Statistics -->
-          <Uploader doc-type="NCV" :party="1"/>
+          <Uploader doc-type="NCV" :party="1" />
         </div>
         <div>
           <!-- NCV – Name Change Form – Vital Statistics -->
-          <Uploader doc-type="NCV" :party="2"/>
+          <Uploader doc-type="NCV" :party="2" />
         </div>
       </div>
       <div class="question-well-border-less" v-else>
-        <h2>You need to select a signing method in the <a :href="signFileOptionsUrl">Signing & Filing Options</a>
-          step.</h2>
+        <h2>
+          You need to select a signing method in the
+          <a :href="signFileOptionsUrl">Signing & Filing Options</a> step.
+        </h2>
       </div>
     </template>
     <template v-else-if="howToSign === 'Together'">
       <div>
-        <p>Staple each form together and then fasten all forms with a paper clip, in the following order:</p>
+        <p>
+          Staple each form together and then fasten all forms with a paper clip,
+          in the following order:
+        </p>
         <ul>
           <li>Notice of Joint Family Claim Form (F1)</li>
           <li>Requisition Form (F35)</li>
@@ -96,56 +113,89 @@
           <li>Identification of Applicant (VSA 512) for Claimant 2 ([Name])</li>
           <li>Agreement as to Annual Income (F9)</li>
         </ul>
-        <p>If you have other court orders or a written separation agreement, they should also be attached to your Affidavit — Desk Order Divorce
-          Form</p>
-        <p>(F38). Note that these agreements or orders must not contradict what's in your divorce application.</p>
-        <p>You have indicated that you will file at the following court registry:</p>
+        <p>
+          If you have other court orders or a written separation agreement, they
+          should also be attached to your Affidavit — Desk Order Divorce Form
+        </p>
+        <p>
+          (F38). Note that these agreements or orders must not contradict what's
+          in your divorce application.
+        </p>
+        <p>
+          You have indicated that you will file at the following court registry:
+        </p>
         <p>[City]</p>
         <p>[Address]</p>
         <p>[Postal Code]</p>
-        <p>Once sign / sworn and filed, you will receive a Court Filing Number <i class="fa fa-question-circle"></i>. This number will be used if you need to file any
-          additional documentation.</p>
+        <p>
+          Once sign / sworn and filed, you will receive a Court Filing Number
+          <i class="fa fa-question-circle"></i>. This number will be used if you
+          need to file any additional documentation.
+        </p>
       </div>
     </template>
     <template v-else-if="howToSign === 'Separately'">
       <div class="question-well-border-less">
-        <p>Staple each form together and then fasten all forms with a paper clip, in the following order:</p>
+        <p>
+          Staple each form together and then fasten all forms with a paper clip,
+          in the following order:
+        </p>
         <ul>
-          <li> Notice of Joint Family Claim Form (F1)</li>
-          <li> Requisition Form (F35)</li>
-          <li> Draft Final Order Form (F52)</li>
-          <li> Certificate of Pleadings Form (F36)</li>
-          <li> Child Support Affidavit (F37) signed by you</li>
-          <li> Affidavit Desk Order Divorce (F38) signed by you</li>
-          <li> Agreement as to Annual Income (F9)</li>
+          <li>Notice of Joint Family Claim Form (F1)</li>
+          <li>Requisition Form (F35)</li>
+          <li>Draft Final Order Form (F52)</li>
+          <li>Certificate of Pleadings Form (F36)</li>
+          <li>Child Support Affidavit (F37) signed by you</li>
+          <li>Affidavit Desk Order Divorce (F38) signed by you</li>
+          <li>Agreement as to Annual Income (F9)</li>
         </ul>
-        <br>
+        <br />
         <p>Also ensure you bring the following additional documentation:</p>
         <ul>
-          <li> Proof of marriage</li>
-          <li> Registration of Joint Divorce Proceedings (JUS280)</li>
-          <li> Identification of Applicant (VSA 512) for Claimant 1 ([Name])</li>
-          <li> Agreement as to Annual Income (F9)</li>
+          <li>Proof of marriage</li>
+          <li>Registration of Joint Divorce Proceedings (JUS280)</li>
+          <li>Identification of Applicant (VSA 512) for Claimant 1 ([Name])</li>
+          <li>Agreement as to Annual Income (F9)</li>
         </ul>
-        <p>If you have other court orders or a written separation agreement, they should also be attached to your Affidavit — Desk Order Divorce
-          Form</p>
-        <p>(F38). Note that these agreements or orders must not contradict what's in your divorce application.</p>
-        <p>You have indicated that you will file at the following court registry:</p>
+        <p>
+          If you have other court orders or a written separation agreement, they
+          should also be attached to your Affidavit — Desk Order Divorce Form
+        </p>
+        <p>
+          (F38). Note that these agreements or orders must not contradict what's
+          in your divorce application.
+        </p>
+        <p>
+          You have indicated that you will file at the following court registry:
+        </p>
         <p>[City]</p>
         <p>[Address]</p>
         <p>[Postal Code]</p>
-        <p>Once sign / sworn and filed, you will receive a Court Filing Number <i class="fa fa-question-circle"></i>. This number will be used if you need to file any
-          additional documentation.</p>
+        <p>
+          Once sign / sworn and filed, you will receive a Court Filing Number
+          <i class="fa fa-question-circle"></i>. This number will be used if you
+          need to file any additional documentation.
+        </p>
         <h2>Spousal Documentation Requirements</h2>
-        <p>The following sworn / affirmed affidavits still remains to be filed:</p>
+        <p>
+          The following sworn / affirmed affidavits still remains to be filed:
+        </p>
         <ul>
-          <li> Child Support Affidavit (F37) - signed by your spouse</li>
-          <li> Affidavit - Desk Order Divorce Form (F38) - signed by your spouse</li>
-          <li> Identification of Applicant (VSA 512) - for your Spouse</li>
+          <li>Child Support Affidavit (F37) - signed by your spouse</li>
+          <li>
+            Affidavit - Desk Order Divorce Form (F38) - signed by your spouse
+          </li>
+          <li>Identification of Applicant (VSA 512) - for your Spouse</li>
         </ul>
-        <p>Either you or your spouse must file this documentation using the Court Filing Number <i class="fa fa-question-circle"></i> that you received via e-mail. If you have
-          not received a Court Filing Number then please check to the Wait for Court Filing Number step.</p>
-        <p>You have indicated that you will file at the following court registry:</p>
+        <p>
+          Either you or your spouse must file this documentation using the Court
+          Filing Number <i class="fa fa-question-circle"></i> that you received
+          via e-mail. If you have not received a Court Filing Number then please
+          check to the Wait for Court Filing Number step.
+        </p>
+        <p>
+          You have indicated that you will file at the following court registry:
+        </p>
         <p>[City]</p>
         <p>[Address]</p>
         <p>[Postal Code]</p>
@@ -155,31 +205,31 @@
 </template>
 
 <script>
-import Uploader from '../../components/Uploader/Uploader.vue';
+  import Uploader from "../../components/Uploader/Uploader.vue";
 
-export default {
-  name: 'App',
-  components: {
-    Uploader
-  },
-  props: {
-    signingLocation: String, 
-    signingLocationYou: String, 
-    signingLocationSpouse: String, 
-    howToSign: String, 
-    howToFile: String, 
-    signFileOptionsUrl: String, 
-    printFormUrl: String,
-    proxyRootPath: String
-  }
-}
+  export default {
+    name: "App",
+    components: {
+      Uploader,
+    },
+    props: {
+      signingLocation: String,
+      signingLocationYou: String,
+      signingLocationSpouse: String,
+      howToSign: String,
+      howToFile: String,
+      signFileOptionsUrl: String,
+      printFormUrl: String,
+      proxyRootPath: String,
+    },
+  };
 </script>
 
 <style scoped lang="scss">
   .question-well-border-less {
     padding: 10px 20px 30px 20px;
-    background-color: #F2F2F2;
-    border: 1px solid #DDD;
+    background-color: #f2f2f2;
+    border: 1px solid #ddd;
     border-radius: 6px;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/vue/src/pages/final-filing/main.js b/vue/src/pages/final-filing/main.js
index bc0dc1f0..965d79b6 100644
--- a/vue/src/pages/final-filing/main.js
+++ b/vue/src/pages/final-filing/main.js
@@ -1,9 +1,9 @@
-import Vue from 'vue';
-import App from './FinalFiling.vue';
+import Vue from "vue";
+import App from "./FinalFiling.vue";
 
 Vue.config.productionTip = false;
 Vue.component("final-filing-uploader", App);
 
-new Vue({ 
-  el: '#vue-app' 
+new Vue({
+  el: "#vue-app",
 });
diff --git a/vue/src/pages/initial-filing/InitialFiling.vue b/vue/src/pages/initial-filing/InitialFiling.vue
index b1ede86f..1e8328d3 100644
--- a/vue/src/pages/initial-filing/InitialFiling.vue
+++ b/vue/src/pages/initial-filing/InitialFiling.vue
@@ -1,143 +1,163 @@
 <template>
   <div class="question-well-border-less" id="app">
-    <template v-if="signingLocation === 'In-person' || signingLocationYou === 'In-person'">
+    <template
+      v-if="
+        signingLocation === 'In-person' || signingLocationYou === 'In-person'
+      "
+    >
       <div>
         <div>
-          <p>The Notice of Joint Family Claim Form (F1) will be automatically filed for you.</p>
+          <p>
+            The Notice of Joint Family Claim Form (F1) will be automatically
+            filed for you.
+          </p>
         </div>
         <div>
           <!-- MC - Marriage Certificate -->
-          <Uploader doc-type="MC"/>
+          <Uploader doc-type="MC" />
         </div>
         <div>
           <!-- AFTL - Affidavit of Translator -->
-          <Uploader doc-type="AFTL"/>
+          <Uploader doc-type="AFTL" />
         </div>
         <div>
-          <!-- RDP - Registration of Divorce Proceeding -->              
-          <Uploader doc-type="RDP"/>
+          <!-- RDP - Registration of Divorce Proceeding -->
+          <Uploader doc-type="RDP" />
         </div>
       </div>
     </template>
-    <template v-else-if="signingLocationYou === 'Virtual' && signingLocationSpouse === 'In-person'">
+    <template
+      v-else-if="
+        signingLocationYou === 'Virtual' &&
+          signingLocationSpouse === 'In-person'
+      "
+    >
       <div>
-          <p>The following forms will be automatically filed for you:</p>
-          <ul>
-            <li>Notice of Joint Family Claim Form (F1)</li>
-            <li>Requisition Form (F35)</li>
-            <li>Certificate of Pleadings Form (F36)</li>
-          </ul>
-          <p>The following forms will be submitted for you but require swearing / affirming <i class="fa fa-question-circle"></i> before filing (see next step for details)</p>
-          <ul>
-            <li>Child Support Affidavit (F37)</li>
-            <li>Affidavit - Desk Order Divorce Form (F38)</li>
-          </ul>
-          <div>
-            <!-- MC - Marriage Certificate -->              
-            <Uploader doc-type="MC"/>
-          </div>
-          <div>
-            <!-- AFTL - Affidavit of Translator -->              
-            <Uploader doc-type="AFTL"/>
-          </div>
-          <div>
-            <!-- OFI - Final Order -->
-            <Uploader doc-type="OFI"/>
-          </div>
-          <div>
-            <!-- EFSS - Electronic Filing Statement - Supreme -->          
-            <Uploader doc-type="EFSS" :party="1"/>
-          </div>
-          <div>
-            <!-- RDP - Registration of Divorce Proceeding -->              
-            <Uploader doc-type="RDP"/>
-          </div>
-          <div>
-            <!-- AAI - Agreement as to Annual Income -->
-            <Uploader doc-type="AAI"/>
-          </div>
-          <div>
-            <!-- NCV – Name Change Form – Vital Statistics -->
-            <Uploader doc-type="NCV" :party="1"/>
-          </div>
-        </div>
-      </template>
-      <template v-else>
-        <div>
-          <p>The following forms will be automatically filed for you:</p>
-          <ul>
-            <li>Notice of Joint Family Claim Form (F1)</li>
-            <li>Requisition Form (F35)</li>
-            <li>Certificate of Pleadings Form (F36)</li>
-          </ul>
-          <p>The following forms will be submitted for you but require swearing / affirming <i class="fa fa-question-circle"></i> before filing (see next step for details)</p>
-          <ul>
-            <li>Child Support Affidavit (F37)</li>
-            <li>Affidavit - Desk Order Divorce Form (F38)</li>
-          </ul>
-          <div>
-            <!-- MC - Marriage Certificate -->              
-            <Uploader doc-type="MC"/>
-          </div>
-          <div>
-            <!-- AFTL - Affidavit of Translator -->              
-            <Uploader doc-type="AFTL"/>
-          </div>
-          <div>
-            <!-- OFI - Final Order -->
-            <Uploader doc-type="OFI"/>
-          </div>
-          <div>
-            <!-- EFSS - Electronic Filing Statement - Supreme -->          
-            <Uploader doc-type="EFSS" :party="1"/>
-          </div>
-          <div>
-            <!-- EFSS - Electronic Filing Statement - Supreme -->
-            <Uploader doc-type="EFSS" :party="2"/>
-          </div>
-          <div>
-            <!-- RDP - Registration of Divorce Proceeding -->              
-            <Uploader doc-type="RDP"/>
-          </div>
-          <div>
-            <!-- AAI - Agreement as to Annual Income -->
-            <Uploader doc-type="AAI"/>
-          </div>
-          <div>
-            <!-- NCV – Name Change Form – Vital Statistics -->
-            <Uploader doc-type="NCV" :party="1"/>
-          </div>
-          <div>
-            <!-- NCV – Name Change Form – Vital Statistics -->
-            <Uploader doc-type="NCV" :party="2"/>
-          </div>
-        </div>
-      </template>
+        <p>The following forms will be automatically filed for you:</p>
+        <ul>
+          <li>Notice of Joint Family Claim Form (F1)</li>
+          <li>Requisition Form (F35)</li>
+          <li>Certificate of Pleadings Form (F36)</li>
+        </ul>
+        <p>
+          The following forms will be submitted for you but require swearing /
+          affirming <i class="fa fa-question-circle"></i> before filing (see
+          next step for details)
+        </p>
+        <ul>
+          <li>Child Support Affidavit (F37)</li>
+          <li>Affidavit - Desk Order Divorce Form (F38)</li>
+        </ul>
+        <div>
+          <!-- MC - Marriage Certificate -->
+          <Uploader doc-type="MC" />
+        </div>
+        <div>
+          <!-- AFTL - Affidavit of Translator -->
+          <Uploader doc-type="AFTL" />
+        </div>
+        <div>
+          <!-- OFI - Final Order -->
+          <Uploader doc-type="OFI" />
+        </div>
+        <div>
+          <!-- EFSS - Electronic Filing Statement - Supreme -->
+          <Uploader doc-type="EFSS" :party="1" />
+        </div>
+        <div>
+          <!-- RDP - Registration of Divorce Proceeding -->
+          <Uploader doc-type="RDP" />
+        </div>
+        <div>
+          <!-- AAI - Agreement as to Annual Income -->
+          <Uploader doc-type="AAI" />
+        </div>
+        <div>
+          <!-- NCV – Name Change Form – Vital Statistics -->
+          <Uploader doc-type="NCV" :party="1" />
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div>
+        <p>The following forms will be automatically filed for you:</p>
+        <ul>
+          <li>Notice of Joint Family Claim Form (F1)</li>
+          <li>Requisition Form (F35)</li>
+          <li>Certificate of Pleadings Form (F36)</li>
+        </ul>
+        <p>
+          The following forms will be submitted for you but require swearing /
+          affirming <i class="fa fa-question-circle"></i> before filing (see
+          next step for details)
+        </p>
+        <ul>
+          <li>Child Support Affidavit (F37)</li>
+          <li>Affidavit - Desk Order Divorce Form (F38)</li>
+        </ul>
+        <div>
+          <!-- MC - Marriage Certificate -->
+          <Uploader doc-type="MC" />
+        </div>
+        <div>
+          <!-- AFTL - Affidavit of Translator -->
+          <Uploader doc-type="AFTL" />
+        </div>
+        <div>
+          <!-- OFI - Final Order -->
+          <Uploader doc-type="OFI" />
+        </div>
+        <div>
+          <!-- EFSS - Electronic Filing Statement - Supreme -->
+          <Uploader doc-type="EFSS" :party="1" />
+        </div>
+        <div>
+          <!-- EFSS - Electronic Filing Statement - Supreme -->
+          <Uploader doc-type="EFSS" :party="2" />
+        </div>
+        <div>
+          <!-- RDP - Registration of Divorce Proceeding -->
+          <Uploader doc-type="RDP" />
+        </div>
+        <div>
+          <!-- AAI - Agreement as to Annual Income -->
+          <Uploader doc-type="AAI" />
+        </div>
+        <div>
+          <!-- NCV – Name Change Form – Vital Statistics -->
+          <Uploader doc-type="NCV" :party="1" />
+        </div>
+        <div>
+          <!-- NCV – Name Change Form – Vital Statistics -->
+          <Uploader doc-type="NCV" :party="2" />
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
 <script>
-import Uploader from '../../components/Uploader/Uploader.vue';
+  import Uploader from "../../components/Uploader/Uploader.vue";
 
-export default {
-  name: 'App',
-  components: {
-    Uploader
-  },
-  props: {
-    signingLocation: String,
-    signingLocationYou: String,
-    signingLocationSpouse: String,
-    proxyRootPath: String
-  }
-}
+  export default {
+    name: "App",
+    components: {
+      Uploader,
+    },
+    props: {
+      signingLocation: String,
+      signingLocationYou: String,
+      signingLocationSpouse: String,
+      proxyRootPath: String,
+    },
+  };
 </script>
 
 <style scoped lang="scss">
   .question-well-border-less {
     padding: 10px 20px 30px 20px;
-    background-color: #F2F2F2;
-    border: 1px solid #DDD;
+    background-color: #f2f2f2;
+    border: 1px solid #ddd;
     border-radius: 6px;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/vue/src/pages/initial-filing/main.js b/vue/src/pages/initial-filing/main.js
index 6ae4ed73..f6157b68 100644
--- a/vue/src/pages/initial-filing/main.js
+++ b/vue/src/pages/initial-filing/main.js
@@ -1,9 +1,9 @@
-import Vue from 'vue';
-import App from './InitialFiling.vue';
+import Vue from "vue";
+import App from "./InitialFiling.vue";
 
 Vue.config.productionTip = false;
 Vue.component("initial-filing-uploader", App);
 
-new Vue({ 
-  el: '#vue-app' 
+new Vue({
+  el: "#vue-app",
 });
diff --git a/vue/src/utils/forms.js b/vue/src/utils/forms.js
index 1d642c82..857c1963 100644
--- a/vue/src/utils/forms.js
+++ b/vue/src/utils/forms.js
@@ -1,47 +1,56 @@
 export default {
-  "AAI": {
+  AAI: {
     name: "Agreement as to Annual Income (F9)",
     preText: "Complete, scan and upload the",
-    help: "This form is used if both you and your spouse agree on the income of the person who will be paying child support. It is used instead of a Financial Statement (F8) if you need to provide the court with proof of income. - Does not require signatures."
+    help:
+      "This form is used if both you and your spouse agree on the income of the person who will be paying child support. It is used instead of a Financial Statement (F8) if you need to provide the court with proof of income. - Does not require signatures.",
   },
-  "AFDO": {
+  AFDO: {
     name: "Affidavit - Desk Order Divorce Form (F38)",
     preText: "Upload the sworn/affirmed and scanned",
-    help: "This form sets out all the facts of your marriage and separation for the court and gives information about parenting time if you have children. - Required swearing/affirming and signatures by both you and your spouse in front of a commissioner."
-  },  
-  "AFTL": {
-    name:"Affidavit of Translation Form", 
-    preText:"Scan and upload the sworn",
-    help:"The Affidavit of Translation is an affidavit which is sworn by a translator before a notary, lawyer or commissioner for taking Affidavits.  The original certificate of marriage should be exhibited to the Affidavit of Translation together with the translation of the translator."
-  },
-  "CSA": {
-    name:"Child Support Affidavit (F37)", 
-    preText:"Upload the sworn/affirmed and scanned",
-    help:"This form gives facts about your children and child support, including the order you're asking the court for. You must also attach your separation agreement or court orders about children to this form as exhibits.  - Required swearing/affiming and signatures by both you and your spouse in front of a commissioner."
-  },
-  "EFSS": {
+    help:
+      "This form sets out all the facts of your marriage and separation for the court and gives information about parenting time if you have children. - Required swearing/affirming and signatures by both you and your spouse in front of a commissioner.",
+  },
+  AFTL: {
+    name: "Affidavit of Translation Form",
+    preText: "Scan and upload the sworn",
+    help:
+      "The Affidavit of Translation is an affidavit which is sworn by a translator before a notary, lawyer or commissioner for taking Affidavits.  The original certificate of marriage should be exhibited to the Affidavit of Translation together with the translation of the translator.",
+  },
+  CSA: {
+    name: "Child Support Affidavit (F37)",
+    preText: "Upload the sworn/affirmed and scanned",
+    help:
+      "This form gives facts about your children and child support, including the order you're asking the court for. You must also attach your separation agreement or court orders about children to this form as exhibits.  - Required swearing/affiming and signatures by both you and your spouse in front of a commissioner.",
+  },
+  EFSS: {
     name: "Electronic Filing Statement (F96)",
     preText: "Upload the signed and scanned",
-    help: "This form is used to confirm that the document you are filing electronically shows your original signature and is a true copy of the original paper version of the document. - Requires signature by both you and your spouse (but not a signature in front of a commissioner)"
+    help:
+      "This form is used to confirm that the document you are filing electronically shows your original signature and is a true copy of the original paper version of the document. - Requires signature by both you and your spouse (but not a signature in front of a commissioner)",
   },
-  "MC": {
-    name:"Proof of Marriage", 
-    preText:"Upload a scan of your",
-    help:"To get a divorce, you need an original marriage certificate or certified true copy of your registration of marriage to prove you are married. There are other options described in this tool if you can't get a copy of your marriage certificate or registration of marriage.  - Does not require signatures."
+  MC: {
+    name: "Proof of Marriage",
+    preText: "Upload a scan of your",
+    help:
+      "To get a divorce, you need an original marriage certificate or certified true copy of your registration of marriage to prove you are married. There are other options described in this tool if you can't get a copy of your marriage certificate or registration of marriage.  - Does not require signatures.",
   },
-  "NCV": {
+  NCV: {
     name: "Identification of Applicant (VSA 512)",
     preText: "Complete, scan and upload the",
-    help: "This form is used by the Court to notify Vital Statistics of court-ordered legal changes of name. - Does not require signatures."
+    help:
+      "This form is used by the Court to notify Vital Statistics of court-ordered legal changes of name. - Does not require signatures.",
   },
-  "OFI": {
+  OFI: {
     name: "Draft Final Order Form (F52)",
     preText: "Upload the signed and scanned",
-    help: "This will be your divorce order once the judge has signed it. It sets out the court order. - Requires signature by both you and your spouse (but not a signature in front of a commissioner)"
+    help:
+      "This will be your divorce order once the judge has signed it. It sets out the court order. - Requires signature by both you and your spouse (but not a signature in front of a commissioner)",
   },
-  "RDP": {
+  RDP: {
     name: "Registration of Joint Divorce Proceedings (JUS280)",
     preText: "Complete, scan and upload the",
-    help: "This form is for a central divorce registry in Ottawa. They use the form to check to make sure there is no other divorce proceeding pending in Canada. They also keep track of all divorces in Canada. - Does not require signatures."
-  }  
-};
\ No newline at end of file
+    help:
+      "This form is for a central divorce registry in Ottawa. They use the form to check to make sure there is no other divorce proceeding pending in Canada. They also keep track of all divorces in Canada. - Does not require signatures.",
+  },
+};
diff --git a/vue/src/utils/rotation.js b/vue/src/utils/rotation.js
index a8af5384..69bdee7d 100644
--- a/vue/src/utils/rotation.js
+++ b/vue/src/utils/rotation.js
@@ -13,4 +13,4 @@ export default function(rotation) {
     default:
       return 0;
   }
-};
\ No newline at end of file
+}