Chat: Implement uploading/downloading in FileAttachments demo

Author: Ruslan Farkhutdinov

apps/demos/Demos/Chat/FileAttachments/jQuery/data.js

@@ -16,6 +16,22 @@ const supportAgent = {
   avatarUrl: '../../../../images/petersmith.png',
 };
 
+const createEmptyAttachment = (name, type) => {
+  const blob = new Blob([''], { type });
+  const url = URL.createObjectURL(blob);
+
+  return {
+    name,
+    url,
+    size: 0,
+  };
+};
+
+const screenshot1 = createEmptyAttachment('Screenshot1.jpg', 'image/jpeg');
+const screenshot2 = createEmptyAttachment('Screenshot2.jpg', 'image/jpeg');
+const screenshot3 = createEmptyAttachment('Screenshot3.jpg', 'image/jpeg');
+const instructions = createEmptyAttachment('Instructions.pdf', 'application/pdf');
+
 const messages = [
   {
     id: new DevExpress.data.Guid(),
@@ -28,32 +44,14 @@ const messages = [
     timestamp: getTimestamp(date, -7),
     author: currentUser,
     text: "Hi, I'm having trouble accessing my account.\nIt says my password is incorrect. I’ve attached some screenshots for you to check.",
-    attachments: [
-      {
-        name: 'Screenshot1.jpg',
-        size: 0,
-      },
-      {
-        name: 'Screenshot2.jpg',
-        size: 0,
-      },
-      {
-        name: 'Screenshot3.jpg',
-        size: 0,
-      },
-    ],
+    attachments: [screenshot1, screenshot2, screenshot3],
   },
   {
     id: new DevExpress.data.Guid(),
     timestamp: getTimestamp(date, -7),
     author: supportAgent,
     text: 'Thanks for the screenshots!  I can help you with that. Please refer to the attached file for instructions to restore access.',
-    attachments: [
-      {
-        name: 'Instructions.pdf',
-        size: 0,
-      },
-    ],
+    attachments: [instructions],
   },
 ];
 

apps/demos/Demos/Chat/FileAttachments/jQuery/index.js

@@ -13,22 +13,36 @@ $(() => {
     paginate: false,
   });
 
+  const uploadedFilesMap = new Map();
+
   $('#chat').dxChat({
     height: 600,
     dataSource,
     reloadOnChange: false,
     user: currentUser,
     fileUploaderOptions: {
-      uploadUrl: 'https://js.devexpress.com/Demos/NetCore/FileUploader/Upload',
+      uploadFile: () => {},
+      onValueChanged(e) {
+        e.value.forEach((file) => {
+          const url = URL.createObjectURL(file);
+          uploadedFilesMap.set(file.name, url);
+        });
+      },
     },
     onMessageEntered(e) {
       const { message } = e;
 
+      const attachmentsWithUrls = message.attachments?.map((attachment) => {
+        const url = uploadedFilesMap.get(attachment.name);
+        return { ...attachment, url };
+      });
+
       dataSource.store().push([{
         type: 'insert',
         data: {
           id: new DevExpress.data.Guid(),
           ...message,
+          attachments: attachmentsWithUrls,
         },
       }]);
     },
@@ -51,7 +65,17 @@ $(() => {
       }]);
     },
     onAttachmentDownloadClick(e) {
-      console.log(e);
+      const { attachment } = e;
+      if (!attachment?.url) return;
+
+      const link = document.createElement('a');
+      link.href = attachment.url;
+      link.download = attachment.name;
+      document.body.appendChild(link);
+
+      link.click();
+
+      document.body.removeChild(link);
     },
   }).dxChat('instance');
 });