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

@@ -11,11 +11,7 @@ export const formatBytes = (bytes, decimals = 2) => {
 };
 
 export const fileSizeInMegaBytes = bytes => {
-  if (bytes === 0) {
+  return bytes / (1024 * 1024);
-    return 0;
-  }
-  const sizeInMB = (bytes / (1024 * 1024)).toFixed(2);
-  return sizeInMB;
 };
 
 export const checkFileSizeLimit = (file, maximumUploadLimit) => {

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', () => {

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';
     },