google drive file picker

app/javascript/template_builder/dropzone.vue

@@ -12,8 +12,8 @@
       :for="inputId"
       :class="{ 'opacity-50': isLoading, 'hover:bg-base-200/50': withHoverClass && !isDragEntering, 'bg-base-200/50 border-base-content/30': isDragEntering }"
     >
-      <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center pointer-events-none">
-        <div class="flex flex-col items-center">
+      <div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center">
+        <div class="flex flex-col items-center pointer-events-none">
           <IconInnerShadowTop
             v-if="isLoading"
             class="animate-spin"
@@ -40,6 +40,15 @@
           >
             <span class="font-medium">{{ t('click_to_upload') }}</span> {{ t('or_drag_and_drop_files') }}
           </div>
+          <button
+            v-if="withGoogleDrive"
+            class="flex items-center text-sm mt-2 pointer-events-auto"
+            @click.stop.prevent="$emit('click-google-drive')"
+          >
+            <span>{{ t('or_add_from') }}</span>
+            <IconBrandGoogleDrive class="w-4 h-4 inline-block ml-1" />
+            <span class="ml-1 font-medium hover:underline">Google Drive</span>
+          </button>
         </div>
       </div>
       <form
@@ -62,7 +71,7 @@
 
 <script>
 import Upload from './upload'
-import { IconCloudUpload, IconFilePlus, IconFileSymlink, IconFiles, IconInnerShadowTop } from '@tabler/icons-vue'
+import { IconCloudUpload, IconFilePlus, IconFileSymlink, IconFiles, IconInnerShadowTop, IconBrandGoogleDrive } from '@tabler/icons-vue'
 
 export default {
   name: 'FileDropzone',
@@ -71,7 +80,8 @@ export default {
     IconCloudUpload,
     IconInnerShadowTop,
     IconFileSymlink,
-    IconFiles
+    IconFiles,
+    IconBrandGoogleDrive
   },
   inject: ['baseFetch', 't'],
   props: {
@@ -99,6 +109,11 @@ export default {
       required: false,
       default: true
     },
+    withGoogleDrive: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     title: {
       type: String,
       required: false,
@@ -110,7 +125,7 @@ export default {
       default: 'image/*, application/pdf, application/zip'
     }
   },
-  emits: ['success', 'error', 'loading'],
+  emits: ['success', 'error', 'loading', 'click-google-drive'],
   data () {
     return {
       isLoading: false,