From bcde84b5b52eb144c38ada38410185ce853f6cd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Kube=C5=A1?=
 <46596180+KubesDavid@users.noreply.github.com>
Date: Tue, 25 Oct 2022 10:05:11 +0200
Subject: [PATCH] feat: Add ability to paste file/image from clipboard (#5627)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
---
 app/javascript/shared/helpers/FileHelper.js     |  6 +-----
 .../shared/helpers/specs/FileHelper.spec.js     |  2 +-
 .../widget/components/ChatAttachment.vue        | 17 +++++++++++++++++
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/javascript/shared/helpers/FileHelper.js b/app/javascript/shared/helpers/FileHelper.js
index d9ca9f943..e58f52f16 100644
--- a/app/javascript/shared/helpers/FileHelper.js
+++ b/app/javascript/shared/helpers/FileHelper.js
@@ -11,11 +11,7 @@ export const formatBytes = (bytes, decimals = 2) => {
 };
 
 export const fileSizeInMegaBytes = bytes => {
-  if (bytes === 0) {
-    return 0;
-  }
-  const sizeInMB = (bytes / (1024 * 1024)).toFixed(2);
-  return sizeInMB;
+  return bytes / (1024 * 1024);
 };
 
 export const checkFileSizeLimit = (file, maximumUploadLimit) => {
diff --git a/app/javascript/shared/helpers/specs/FileHelper.spec.js b/app/javascript/shared/helpers/specs/FileHelper.spec.js
index a0d1ac52f..750eab52c 100644
--- a/app/javascript/shared/helpers/specs/FileHelper.spec.js
+++ b/app/javascript/shared/helpers/specs/FileHelper.spec.js
@@ -24,7 +24,7 @@ describe('#File Helpers', () => {
       expect(fileSizeInMegaBytes(0)).toBe(0);
     });
     it('should return 19.07 if 20000000 is passed', () => {
-      expect(fileSizeInMegaBytes(20000000)).toBe('19.07');
+      expect(fileSizeInMegaBytes(20000000)).toBeCloseTo(19.07, 2);
     });
   });
   describe('checkFileSizeLimit', () => {
diff --git a/app/javascript/widget/components/ChatAttachment.vue b/app/javascript/widget/components/ChatAttachment.vue
index 0412ca5fb..bcf2e0ffa 100755
--- a/app/javascript/widget/components/ChatAttachment.vue
+++ b/app/javascript/widget/components/ChatAttachment.vue
@@ -1,5 +1,6 @@
 <template>
   <file-upload
+    ref="upload"
     :size="4096 * 2048"
     :accept="allowedFileTypes"
     :data="{
@@ -48,7 +49,23 @@ export default {
       return ALLOWED_FILE_TYPES;
     },
   },
+  mounted() {
+    document.addEventListener('paste', this.handleClipboardPaste);
+  },
+  destroyed() {
+    document.removeEventListener('paste', this.handleClipboardPaste);
+  },
   methods: {
+    handleClipboardPaste(e) {
+      const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+      items.forEach(item => {
+        if (item.kind === 'file') {
+          e.preventDefault();
+          const file = item.getAsFile();
+          this.$refs.upload.add(file);
+        }
+      });
+    },
     getFileType(fileType) {
       return fileType.includes('image') ? 'image' : 'file';
     },