From c470791282a6cd9e041737e5c17a10f131f9e549 Mon Sep 17 00:00:00 2001
From: formsdev <136701234+formsdev@users.noreply.github.com>
Date: Fri, 20 Oct 2023 14:24:21 +0530
Subject: [PATCH] copy and paste support for file and image upload (#224)

---
 resources/js/components/forms/FileInput.vue  | 20 ++++++++++-----
 resources/js/components/forms/ImageInput.vue | 27 +++++++++++++++-----
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/resources/js/components/forms/FileInput.vue b/resources/js/components/forms/FileInput.vue
index d5197cd..b0ac5b7 100644
--- a/resources/js/components/forms/FileInput.vue
+++ b/resources/js/components/forms/FileInput.vue
@@ -115,9 +115,9 @@
                       class="font-semibold text-nt-blue hover:text-nt-blue-dark focus:outline-none focus:underline transition duration-150 ease-in-out"
                       @click="openFileUpload"
                     >
-                      Upload {{ multiple ? 'file(s)' : 'a file' }}
+                      Upload {{ multiple ? 'file(s)' : 'a file' }},
                     </button>
-                    or drag and drop
+                    use drag and drop or paste it
                   </p>
                   <p class="mt-1 text-xs text-gray-500">
                     Up to {{ mbLimit }}mb
@@ -198,6 +198,10 @@ export default {
         if(this.disabled){
           this.showUploadModal = false
         }
+        document.removeEventListener('paste', this.onUploadPasteEvent)
+        if(this.showUploadModal){
+          document.addEventListener("paste", this.onUploadPasteEvent)
+        }
       }
     },
     files: {
@@ -237,11 +241,15 @@ export default {
     onUploadDropEvent (e) {
       this.uploadDragoverEvent = false
       this.uploadDragoverTracking = false
-      this.droppedFiles(e)
+      this.droppedFiles(e.dataTransfer.files)
     },
-    droppedFiles (e) {
-      const droppedFiles = e.dataTransfer.files
-
+    onUploadPasteEvent (e) {
+      if(!this.showUploadModal) return
+      this.uploadDragoverEvent = false
+      this.uploadDragoverTracking = false
+      this.droppedFiles(e.clipboardData.files)
+    },
+    droppedFiles (droppedFiles) {
       if (!droppedFiles) return
 
       for (let i = 0; i < droppedFiles.length; i++) {
diff --git a/resources/js/components/forms/ImageInput.vue b/resources/js/components/forms/ImageInput.vue
index 11de7c4..3020f1b 100644
--- a/resources/js/components/forms/ImageInput.vue
+++ b/resources/js/components/forms/ImageInput.vue
@@ -86,9 +86,9 @@
                       class="font-semibold text-nt-blue hover:text-nt-blue-dark focus:outline-none focus:underline transition duration-150 ease-in-out"
                       @click="openFileUpload"
                     >
-                      Upload your image
+                      Upload your image,
                     </button>
-                    or drag and drop
+                    use drag and drop or paste it
                   </p>
                   <p class="mt-1 text-xs text-gray-500">
                     .jpg, .jpeg, .png, .bmp, .gif, .svg up to 5mb
@@ -130,6 +130,17 @@ export default {
     }
   },
 
+  watch: {
+    showUploadModal: {
+      handler (val) {
+        document.removeEventListener('paste', this.onUploadPasteEvent)
+        if(this.showUploadModal){
+          document.addEventListener("paste", this.onUploadPasteEvent)
+        }
+      }
+    }
+  },
+
   methods: {
     clearUrl () {
       this.$set(this.form, this.name, null)
@@ -141,11 +152,15 @@ export default {
     onUploadDropEvent (e) {
       this.uploadDragoverEvent = false
       this.uploadDragoverTracking = false
-      this.droppedFiles(e)
+      this.droppedFiles(e.dataTransfer.files)
     },
-    droppedFiles (e) {
-      const droppedFiles = e.dataTransfer.files
-
+    onUploadPasteEvent (e) {
+      if(!this.showUploadModal) return
+      this.uploadDragoverEvent = false
+      this.uploadDragoverTracking = false
+      this.droppedFiles(e.clipboardData.files)
+    },
+    droppedFiles (droppedFiles) {
       if (!droppedFiles) return
 
       this.file = droppedFiles[0]