Image placeholder not rendered/showing at omnichannel client (guest) side

Description:

Hello Rocket.chat,

Were trying to develop some omnichannel for our product, but we found some problem. When the client (Guest) side try to upload an image, it failed to loading. Meanwhile from the admin side, the image load just fine.

Steps to reproduce:

1. Enable omnichannel, insert the omnichannel code to the website
2. Start the chat with agent
3. Upload a image as guest

Expected behavior:

The image placeholder should be showing at guest side

Actual behavior:

From guest side :

From rocket chat agent side:

Server Setup Information:

• Version of Rocket.Chat Server: 3.8.1
• Operating System: Linux x64
• Deployment Method:
• Number of Running Instances:
• DB Replicaset Oplog: Enabled
• NodeJS Version: v12.18.4
• MongoDB Version:4.4.4

Client Setup Information

• Desktop App or Browser Version: Chrome v 89.0.4389.90
• Operating System: Windows 10

Additional context

Relevant logs:

I20210327-00:30:06.967(0) server.js:204 API ➔ debug POST: /api/v1/method.call/livechat%3AchangeLivechatStatus 
I20210327-00:30:06.968(0) server.js:204 Meteor ➔ method livechat:changeLivechatStatus -> userId: d4GRzbztR4qyxA8jk, arguments: [] 
I20210327-00:30:06.978(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: { message: '{"msg":"result","id":"27","result":1}', success: true } } 
I20210327-00:30:10.131(0) server.js:204 API ➔ debug GET: /api/v1/statistics?refresh=false 
I20210327-00:30:10.139(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: {     _id: 'AHgoEgxebETXbkC5S',     wizard: {       organizationType: 'enterprise',       industry: 'technologyProvider',       size: '0',       country: 'indonesia',       language: 'en',       serverType: 'privateTeam',       registerServer: false     },     uniqueId: '5HjddSETxMWPkk2iY',     installedAt: 2020-09-13T15:19:31.244Z,     version: '3.8.1',     totalUsers: 35,     activeUsers: 35,     activeGuests: 0,     nonActiveUsers: 0,     appUsers: 0,     onlineUsers: 1,     awayUsers: 2,     totalConnectedUsers: 3,     offlineUsers: 32,     totalRooms: 86,     totalChannels: 1,     totalPrivateGroups: 4,     totalDirect: 25,     totalLivechat: 56,     totalDiscussions: 0,     totalThreads: 13,     totalLivechatVisitors: 8,     totalLivechatAgents: 2,     livechatEnabled: true,     totalChannelMessages: 186,     totalPrivateGroupMessages: 793,     totalDirectMessages: 1198,     totalLivechatMessages: 396,     totalMessages: 2573,     federatedServers: 0,     federatedUsers: 0,     lastLogin: 2021-03-26T22:58:07.958Z,     lastMessageSentAt: 2021-03-26T13:05:56.314Z,     lastSeenSubscription: 2021-03-15T05:29:13.267Z,     os: {       type: 'Linux',       platform: 'linux',       arch: 'x64',       release: '5.4.0-1030-aws',       uptime: 724663,       loadavg: [Array],       totalmem: 4124864512,       freemem: 244011008,       cpus: [Array]     },     process: { nodeVersion: 'v12.18.4', pid: 3343, uptime: 724505.027652781 },     deploy: { method: 'tar', platform: 'selfinstall' },     enterpriseReady: true,     uploadsTotal: 119,     uploadsTotalSize: 88818712,     migration: {       _id: 'control',       locked: false,       version: 209,       buildAt: '2021-03-18T14:56:35.101Z',       lockedAt: 2021-03-18T14:57:15.893Z     },     instanceCount: 1,     oplogEnabled: true,     mongoVersion: '4.4.4',     mongoStorageEngine: 'unknown',     uniqueUsersOfYesterday: { year: 2021, month: 3, day: 26, data: [] },     uniqueUsersOfLastMonth: { year: 2021, month: 2, day: 27, data: [Array] },     uniqueDevicesOfYesterday: { year: 2021, month: 3, day: 26, data: [] },     uniqueDevicesOfLastMonth: { year: 2021, month: 3, day: 26, data: [Array] },     uniqueOSOfYesterday: { year: 2021, month: 3, day: 26, data: [] },     uniqueOSOfLastMonth: { year: 2021, month: 3, day: 26, data: [Array] },     apps: {       engineVersion: '1.19.0',       enabled: false,       totalInstalled: 0,       totalActive: 0,       totalFailed: 0     },     integrations: {       totalIntegrations: 0,       totalIncoming: 0,       totalIncomingActive: 0,       totalOutgoing: 0,       totalOutgoingActive: 0,       totalWithScriptEnabled: 0     },     pushQueue: 0,     enterprise: { modules: [], tags: [] },     createdAt: 2021-03-27T00:12:01.066Z,     _updatedAt: 2021-03-27T00:12:01.066Z,     success: true   } } 
I20210327-00:30:10.144(0) server.js:204 API ➔ debug POST: /api/v1/method.call/instances%3Aget 
I20210327-00:30:10.152(0) server.js:204 Meteor ➔ method instances/get -> userId: d4GRzbztR4qyxA8jk, arguments: [] 
I20210327-00:30:10.153(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: { message: '{"msg":"result","id":"28","result":[]}', success: true } } 
I20210327-00:30:10.411(0) server.js:204 API ➔ debug POST: /api/v1/method.call/license%3AgetTags 
I20210327-00:30:10.415(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: { message: '{"msg":"result","id":"29","result":[]}', success: true } } 
I20210327-00:30:10.532(0) server.js:204 API ➔ debug POST: /api/v1/method.call/private-settings%3Aget 
I20210327-00:30:10.533(0) server.js:204 Meteor ➔ method private-settings/get -> userId: d4GRzbztR4qyxA8jk, arguments: [{}] 
I20210327-00:30:10.538(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: {     message: '{"msg":"result","id":"30","result":{"update":[],"remove":[]}}',     success: true   } } 
I20210327-00:32:00.909(0) server.js:204 SyncedCron ➔ info Starting "Generate download files for user data". 
I20210327-00:32:00.910(0) server.js:204 SyncedCron ➔ info Finished "Generate download files for user data". 
I20210327-00:34:00.924(0) server.js:204 SyncedCron ➔ info Starting "Generate download files for user data". 
I20210327-00:34:00.925(0) server.js:204 SyncedCron ➔ info Finished "Generate download files for user data". 
I20210327-00:35:39.218(0) server.js:204 API ➔ debug GET: /api/v1/statistics?refresh=false 
I20210327-00:35:39.220(0) server.js:204 API ➔ debug POST: /api/v1/method.call/instances%3Aget 
I20210327-00:35:39.223(0) server.js:204 Meteor ➔ method instances/get -> userId: d4GRzbztR4qyxA8jk, arguments: [] 
I20210327-00:35:39.225(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: { message: '{"msg":"result","id":"31","result":[]}', success: true } } 
I20210327-00:35:39.228(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: {     _id: 'AHgoEgxebETXbkC5S',     wizard: {       organizationType: 'enterprise',       industry: 'technologyProvider',       size: '0',       country: 'indonesia',       language: 'en',       serverType: 'privateTeam',       registerServer: false     },     uniqueId: '5HjddSETxMWPkk2iY',     installedAt: 2020-09-13T15:19:31.244Z,     version: '3.8.1',     totalUsers: 35,     activeUsers: 35,     activeGuests: 0,     nonActiveUsers: 0,     appUsers: 0,     onlineUsers: 1,     awayUsers: 2,     totalConnectedUsers: 3,     offlineUsers: 32,     totalRooms: 86,     totalChannels: 1,     totalPrivateGroups: 4,     totalDirect: 25,     totalLivechat: 56,     totalDiscussions: 0,     totalThreads: 13,     totalLivechatVisitors: 8,     totalLivechatAgents: 2,     livechatEnabled: true,     totalChannelMessages: 186,     totalPrivateGroupMessages: 793,     totalDirectMessages: 1198,     totalLivechatMessages: 396,     totalMessages: 2573,     federatedServers: 0,     federatedUsers: 0,     lastLogin: 2021-03-26T22:58:07.958Z,     lastMessageSentAt: 2021-03-26T13:05:56.314Z,     lastSeenSubscription: 2021-03-15T05:29:13.267Z,     os: {       type: 'Linux',       platform: 'linux',       arch: 'x64',       release: '5.4.0-1030-aws',       uptime: 724663,       loadavg: [Array],       totalmem: 4124864512,       freemem: 244011008,       cpus: [Array]     },     process: { nodeVersion: 'v12.18.4', pid: 3343, uptime: 724505.027652781 },     deploy: { method: 'tar', platform: 'selfinstall' },     enterpriseReady: true,     uploadsTotal: 119,     uploadsTotalSize: 88818712,     migration: {       _id: 'control',       locked: false,       version: 209,       buildAt: '2021-03-18T14:56:35.101Z',       lockedAt: 2021-03-18T14:57:15.893Z     },     instanceCount: 1,     oplogEnabled: true,     mongoVersion: '4.4.4',     mongoStorageEngine: 'unknown',     uniqueUsersOfYesterday: { year: 2021, month: 3, day: 26, data: [] },     uniqueUsersOfLastMonth: { year: 2021, month: 2, day: 27, data: [Array] },     uniqueDevicesOfYesterday: { year: 2021, month: 3, day: 26, data: [] },     uniqueDevicesOfLastMonth: { year: 2021, month: 3, day: 26, data: [Array] },     uniqueOSOfYesterday: { year: 2021, month: 3, day: 26, data: [] },     uniqueOSOfLastMonth: { year: 2021, month: 3, day: 26, data: [Array] },     apps: {       engineVersion: '1.19.0',       enabled: false,       totalInstalled: 0,       totalActive: 0,       totalFailed: 0     },     integrations: {       totalIntegrations: 0,       totalIncoming: 0,       totalIncomingActive: 0,       totalOutgoing: 0,       totalOutgoingActive: 0,       totalWithScriptEnabled: 0     },     pushQueue: 0,     enterprise: { modules: [], tags: [] },     createdAt: 2021-03-27T00:12:01.066Z,     _updatedAt: 2021-03-27T00:12:01.066Z,     success: true   } } 
I20210327-00:36:00.939(0) server.js:204 SyncedCron ➔ info Starting "Generate download files for user data". 
I20210327-00:36:00.940(0) server.js:204 SyncedCron ➔ info Finished "Generate download files for user data". 
I20210327-00:38:00.951(0) server.js:204 SyncedCron ➔ info Starting "Generate download files for user data". 
I20210327-00:38:00.953(0) server.js:204 SyncedCron ➔ info Finished "Generate download files for user data". 
I20210327-00:40:00.967(0) server.js:204 SyncedCron ➔ info Starting "Generate download files for user data". 
I20210327-00:40:00.968(0) server.js:204 SyncedCron ➔ info Finished "Generate download files for user data". 
I20210327-00:41:31.302(0) server.js:204 API ➔ debug GET: /api/v1/stdout.queue 
I20210327-00:41:31.308(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: {     queue: [       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object], [Object], [Object],       [Object], [Object], [Object], [Object],       ... 9900 more items     ],     success: true   } } 
I20210327-00:42:00.980(0) server.js:204 SyncedCron ➔ info Starting "Generate download files for user data". 
I20210327-00:42:00.982(0) server.js:204 SyncedCron ➔ info Finished "Generate download files for user data". 
I20210327-00:42:19.843(0) server.js:204 API ➔ debug GET: /api/v1/livechat/config?token=tjyc67vkwmk3yfze3u5bot 
I20210327-00:42:19.853(0) server.js:204 Meteor ➔ method listEmojiCustom -> userId: undefined, arguments: [] 
I20210327-00:42:19.863(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: {     config: {       enabled: true,       settings: [Object],       theme: [Object],       messages: [Object],       survey: [Object],       triggers: [Array],       departments: [Array],       resources: [Object],       online: true,       guest: undefined,       room: undefined,       agent: undefined,       customFields: []     },     success: true   } } 
I20210327-00:42:19.980(0) server.js:204 Meteor ➔ publish null -> userId: null, arguments: [] 
I20210327-00:42:20.006(0) server.js:204 Meteor ➔ method livechat:setUpConnection -> userId: null, arguments: [{"token":"tjyc67vkwmk3yfze3u5bot"}] 
I20210327-00:42:20.081(0) server.js:204 API ➔ debug POST: /api/v1/livechat/page.visited 
I20210327-00:42:20.084(0) server.js:204 API ➔ debug POST: /api/v1/livechat/page.visited 
I20210327-00:42:20.087(0) server.js:204 API ➔ debug Success { statusCode: 200, body: { success: true } } 
I20210327-00:42:20.130(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: {     page: {       msg: 'Beranda > ProdukIndo Staging - https://staging.produkindo.com/',       navigation: [Object]     },     success: true   } } 
I20210327-00:42:29.506(0) server.js:204 API ➔ debug POST: /api/v1/livechat/visitor 
I20210327-00:42:29.595(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: {     visitor: {       _id: 'gH5QzTRHC2Gq4QHuA',       username: 'guest-9',       _updatedAt: 2021-03-27T00:42:29.568Z,       name: 'Andri Amirul Sonjaya',       token: 'tjyc67vkwmk3yfze3u5bot',       visitorEmails: [Array]     },     success: true   } } 
I20210327-00:42:39.826(0) server.js:204 API ➔ debug GET: /api/v1/livechat/room?token=tjyc67vkwmk3yfze3u5bot 
I20210327-00:42:40.070(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: {     room: {       _id: '3Z49vLw88eEmDKEMu',       msgs: 0,       usersCount: 1,       lm: 2021-03-27T00:42:39.835Z,       fname: 'Andri Amirul Sonjaya',       t: 'l',       ts: 2021-03-27T00:42:39.835Z,       v: [Object],       cl: false,       open: true,       waitingResponse: true,       _updatedAt: 2021-03-27T00:42:39.956Z     },     newRoom: true,     success: true   } } 
I20210327-00:42:40.131(0) server.js:204 API ➔ debug POST: /api/v1/livechat/upload/3Z49vLw88eEmDKEMu 
I20210327-00:42:40.135(0) server.js:204 API ➔ debug POST: /api/v1/livechat/visitor.status 
I20210327-00:42:40.194(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: { token: 'tjyc67vkwmk3yfze3u5bot', status: 'online', success: true } } 
I20210327-00:42:40.333(0) server.js:204 Meteor ➔ method sendFileLivechatMessage -> userId: undefined, arguments: ["3Z49vLw88eEmDKEMu","tjyc67vkwmk3yfze3u5bot",{"_id":"gJ3W7ZZqwBxPd5s7E","name":"Capture.PNG","size":620,"type":"image/png","rid":"3Z49vLw88eEmDKEMu","visitorToken":"tjyc67vkwmk3yfze3u5bot","store":"GridFS:Uploads","_updatedAt":"2021-03-27T00:42:40.146Z","instanceId":"3sRFejQw3EieKH8ud","identify":{"format":"png","size":{"width":264,"height":175}},"complete":true,"etag":"qSbiHiZxczkwhYPYB","path":"/ufs/GridFS:Uploads/gJ3W7ZZqwBxPd5s7E/Capture.PNG","progress":1,"token":"6BC849e919","uploading":false,"uploadedAt":"2021-03-27T00:42:40.316Z","url":"https://chat.soluvas.com/ufs/GridFS:Uploads/gJ3W7ZZqwBxPd5s7E/Capture.PNG"},{}] 
I20210327-00:42:40.350(0) server.js:204 Meteor ➔ method sendMessageLivechat -> userId: undefined, arguments: [{"_id":"EiMpWg65pmmj7WqwC","rid":"3Z49vLw88eEmDKEMu","ts":"2021-03-27T00:42:40.349Z","file":{"_id":"gJ3W7ZZqwBxPd5s7E","name":"Capture.PNG","type":"image/png"},"groupable":false,"attachments":[{"title":"Capture.PNG","type":"file","title_link":"/file-upload/gJ3W7ZZqwBxPd5s7E/Capture.PNG","title_link_download":true,"image_url":"/file-upload/gJ3W7ZZqwBxPd5s7E/Capture.PNG","image_type":"image/png","image_size":620,"image_dimensions":{"width":264,"height":175},"image_preview":"/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAVACADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAj/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAP/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCcAFwAAAAAB//Z"}],"token":"tjyc67vkwmk3yfze3u5bot"}] 
I20210327-00:42:40.392(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: {     _id: 'EiMpWg65pmmj7WqwC',     rid: '3Z49vLw88eEmDKEMu',     msg: '',     token: 'tjyc67vkwmk3yfze3u5bot',     file: {       _id: 'gJ3W7ZZqwBxPd5s7E',       name: 'Capture.PNG',       type: 'image/png'     },     attachments: [ [Object] ],     alias: 'Andri Amirul Sonjaya',     ts: 2021-03-27T00:42:40.354Z,     u: {       _id: 'gH5QzTRHC2Gq4QHuA',       username: 'guest-9',       name: 'Andri Amirul Sonjaya'     },     unread: true,     mentions: [],     channels: [],     _updatedAt: 2021-03-27T00:42:40.362Z,     newRoom: false,     showConnecting: true,     success: true   } } 
I20210327-00:42:40.395(0) server.js:204 API ➔ debug Success { statusCode: 200, body: { success: true } } 
I20210327-00:42:40.400(0) server.js:204 Integrations ➔ Outgoing WebHook.debug Execute Trigger: sendMessage 
I20210327-00:42:40.401(0) server.js:204 Integrations ➔ Outgoing WebHook.debug Got the event arguments for the event: sendMessage {   event: 'sendMessage',   message: {     _id: 'EiMpWg65pmmj7WqwC',     rid: '3Z49vLw88eEmDKEMu',     msg: '',     token: 'tjyc67vkwmk3yfze3u5bot',     file: {       _id: 'gJ3W7ZZqwBxPd5s7E',       name: 'Capture.PNG',       type: 'image/png'     },     attachments: [ [Object] ],     alias: 'Andri Amirul Sonjaya',     ts: 2021-03-27T00:42:40.354Z,     u: {       _id: 'gH5QzTRHC2Gq4QHuA',       username: 'guest-9',       name: 'Andri Amirul Sonjaya'     },     unread: true,     mentions: [],     channels: [],     _updatedAt: 2021-03-27T00:42:40.362Z,     newRoom: false,     showConnecting: true   },   room: {     _id: '3Z49vLw88eEmDKEMu',     msgs: 0,     usersCount: 1,     lm: 2021-03-27T00:42:39.835Z,     fname: 'Andri Amirul Sonjaya',     t: 'l',     ts: 2021-03-27T00:42:39.835Z,     v: {       _id: 'gH5QzTRHC2Gq4QHuA',       username: 'guest-9',       token: 'tjyc67vkwmk3yfze3u5bot',       status: 'online'     },     cl: false,     open: true,     waitingResponse: true,     _updatedAt: 2021-03-27T00:42:40.168Z   } } 
I20210327-00:42:40.402(0) server.js:204 Integrations ➔ Outgoing WebHook.debug Starting search for triggers for the room: 3Z49vLw88eEmDKEMu 
I20210327-00:42:40.403(0) server.js:204 Integrations ➔ Outgoing WebHook.debug Found 0 to iterate over and see if the match the event. 
I20210327-00:42:40.621(0) server.js:204 API ➔ debug GET: /api/v1/livechat/messages.history/3Z49vLw88eEmDKEMu?token=tjyc67vkwmk3yfze3u5bot 
I20210327-00:42:40.632(0) server.js:204 API ➔ debug Success {   statusCode: 200,   body: {     messages: [ [Object], [Object], [Object], [Object], [Object] ],     success: true   } } 

Start by reproducing the upload flow with an omnichannel guest in Chrome, then compare the guest and agent views described in the issue. The work is done when an uploaded image displays its placeholder on the guest side as well as on the agent side.