add blank template files dropzone

app/javascript/template_builder/builder.vue

@@ -67,6 +67,7 @@
         />
         <div class="sticky bottom-0 bg-base-100 py-2">
           <Upload
+            v-if="sortedDocuments.length"
             :template-id="template.id"
             @success="updateFromUpload"
           />
@@ -77,19 +78,27 @@
           ref="documents"
           class="pr-3.5 pl-0.5"
         >
-          <Document
+          <template v-if="!sortedDocuments.length">
-            v-for="document in sortedDocuments"
+            <Dropzone
-            :key="document.uuid"
+              :template-id="template.id"
-            :ref="setDocumentRefs"
+              @success="updateFromUpload"
-            :areas-index="fieldAreasIndex[document.uuid]"
+            />
-            :selected-submitter="selectedSubmitter"
+          </template>
-            :document="document"
+          <template v-else>
-            :is-drag="!!dragFieldType"
+            <Document
-            :draw-field="drawField"
+              v-for="document in sortedDocuments"
-            @draw="onDraw"
+              :key="document.uuid"
-            @drop-field="onDropfield"
+              :ref="setDocumentRefs"
-            @remove-area="removeArea"
+              :areas-index="fieldAreasIndex[document.uuid]"
-          />
+              :selected-submitter="selectedSubmitter"
+              :document="document"
+              :is-drag="!!dragFieldType"
+              :draw-field="drawField"
+              @draw="onDraw"
+              @drop-field="onDropfield"
+              @remove-area="removeArea"
+            />
+          </template>
         </div>
       </div>
       <div
@@ -134,6 +143,7 @@
 
 <script>
 import Upload from './upload'
+import Dropzone from './dropzone'
 import Fields from './fields'
 import Document from './document'
 import Logo from './logo'
@@ -150,6 +160,7 @@ export default {
     Document,
     Fields,
     Logo,
+    Dropzone,
     DocumentPreview,
     IconInnerShadowTop,
     Contenteditable,

app/javascript/template_builder/dropzone.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    class="flex h-60 w-full"
+    @dragover.prevent
+    @drop.prevent="onDropFiles"
+  >
+    <label
+      class="w-full relative bg-base-200 hover:bg-base-200/70 rounded-md border border-base-content border-dashed"
+      :for="inputId"
+      :class="{ 'opacity-50': isLoading || isProcessing }"
+    >
+      <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
+        <div class="flex flex-col items-center">
+          <IconInnerShadowTop
+            v-if="isLoading || isProcessing"
+            class="animate-spin"
+            :width="40"
+            :height="40"
+          />
+          <IconCloudUpload
+            v-else
+            :width="40"
+            :height="40"
+          />
+          <div
+            v-if="message"
+            class="font-medium text-lg mb-1"
+          >
+            {{ message }}
+          </div>
+          <div class="text-sm">
+            <span class="font-medium">Click to upload</span> or drag and drop
+          </div>
+        </div>
+      </div>
+      <input
+        :id="inputId"
+        ref="input"
+        type="file"
+        class="hidden"
+        accept="image/*, application/pdf"
+        multiple
+        @change="upload"
+      >
+    </label>
+  </div>
+</template>
+
+<script>
+import Upload from './upload'
+import { IconCloudUpload, IconInnerShadowTop } from '@tabler/icons-vue'
+
+export default {
+  name: 'FileDropzone',
+  components: {
+    IconCloudUpload,
+    IconInnerShadowTop
+  },
+  props: {
+    templateId: {
+      type: [Number, String],
+      required: true
+    }
+  },
+  emits: ['success'],
+  data () {
+    return {
+      isLoading: false,
+      isProcessing: false
+    }
+  },
+  computed: {
+    inputId () {
+      return 'el' + Math.random().toString(32).split('.')[1]
+    },
+    message () {
+      if (this.isLoading) {
+        return 'Uploading...'
+      } else if (this.isProcessing) {
+        return 'Processing...'
+      } else {
+        return 'Add PDF documents or images'
+      }
+    }
+  },
+  methods: {
+    upload: Upload.methods.upload,
+    onDropFiles (e) {
+      this.$refs.input.files = e.dataTransfer.files
+
+      this.upload()
+    }
+  }
+}
+</script>

app/javascript/template_builder/upload.vue

@@ -3,13 +3,26 @@
     <label
       :for="inputId"
       class="btn btn-outline w-full"
-      :class="{ 'btn-disabled': isLoading }"
+      :class="{ 'btn-disabled': isLoading || isProcessing }"
     >
+      <IconInnerShadowTop
+        v-if="isLoading || isProcessing"
+        width="20"
+        class="animate-spin"
+      />
       <IconUpload
+        v-else
         width="20"
-        class="mr-2"
       />
-      Add Document
+      <span v-if="isLoading">
+        Uploading...
+      </span>
+      <span v-else-if="isProcessing">
+        Processing...
+      </span>
+      <span v-else>
+        Add Document
+      </span>
     </label>
     <input
       :id="inputId"
@@ -24,12 +37,13 @@
 </template>
 
 <script>
-import { IconUpload } from '@tabler/icons-vue'
+import { IconUpload, IconInnerShadowTop } from '@tabler/icons-vue'
 
 export default {
   name: 'DocumentsUpload',
   components: {
-    IconUpload
+    IconUpload,
+    IconInnerShadowTop
   },
   props: {
     templateId: {
@@ -40,7 +54,8 @@ export default {
   emits: ['success'],
   data () {
     return {
-      isLoading: false
+      isLoading: false,
+      isProcessing: false
     }
   },
   computed: {
@@ -79,7 +94,11 @@ export default {
             console.error(error)
           })
         })
-      )
+      ).finally(() => {
+        this.isLoading = false
+      })
+
+      this.isProcessing = true
 
       fetch(`/api/templates/${this.templateId}/documents`, {
         method: 'POST',
@@ -89,7 +108,7 @@ export default {
         this.$emit('success', data)
         this.$refs.input.value = ''
       }).finally(() => {
-        this.isLoading = false
+        this.isProcessing = false
       })
     }
   }