Skip to content

[NEW] Livechat File Upload#10514

Merged
sampaiodiego merged 31 commits intodevelopfrom
livechat-fileupload
Jul 13, 2018
Merged

[NEW] Livechat File Upload#10514
sampaiodiego merged 31 commits intodevelopfrom
livechat-fileupload

Conversation

@renatobecker-zz
Copy link
Copy Markdown

@renatobecker-zz renatobecker-zz commented Apr 19, 2018

Closes #4124
Closes #3686
Closes #6516
Closes #5449

This PR adds a important feature allowing to share files between Rocket.Chat and Livechat Widget.

apr-19-2018 16-40-21

@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10514 April 19, 2018 19:42 Inactive
@maih43538
Copy link
Copy Markdown

RocketChat / Rocket.Chat

Code Issues 1,805 Pull requests 179 Projects 9 Pulse

Jump to bottom
Open
Image has shrunk to nothing #10552

Xarkam opened this issue
1 day ago
type: bug
Description:
I try to paste picture of 1300 width pixels. (and height of 25px)
Server Setup Information:
Version of Rocket.Chat Server: 0.63.3
Operating System: ubuntu 16.04.4
Deployment Method(snap/docker/tar/etc): docker
Number of Running Instances: 1
DB Replicaset Oplog: active
Node Version: 8.9.3
mongoDB Version: 3.2
Steps to Reproduce:
Take picture of 1300 width pixel (and height of 25px)
Or use my picture for testing:

Expected behavior:
Display picture in chat.
Actual behavior:
No picture and error in log.
Relevant logs:
Exception while invoking method 'sendFileMessage' Error: reducev: image has shrunk to nothing => awaited here: at Function.Promise.await (/app/bundle/programs/server/npm/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:56:12) at Promise.asyncApply (/app/bundle/programs/server/packages/rocketchat_file-upload.js:1477:49) at /app/bundle/programs/server/npm/node_modules/meteor/promise/node_modules/meteor-promise/fiber_pool.js:43:40

👍
+1
👎
-1
😄
Laugh
🎉
Hooray
😕
Confused
❤️
Heart

TwizzyDizzy commented 1 day ago • edited 1 day ago
@rocket-cat label add "type: bug"
I can confirm this on 0.64.0-rc.1. I guess resizing images that have extreme ratios leads to one side of the image being zero when generating the preview.
Cheers
Thomas
👍 1
maih43538 reacted with thumbs up emoji
Remove my 👍
🎉 1
maih43538 reacted with hooray emoji
Remove my 🎉

👍
+1
👎
-1
😄
Laugh
🎉
Hooray
😕
Confused
❤️
Heart
rocket-cat added the type: bug label

1 day ago

maih43538
commented about 2 hours ago
Kết nối

👍
+1
👎
-1
😄
Laugh
🎉
Hooray
😕
Confused
❤️
Heart

maih43538
commented about 2 hours ago

👍
+1
👎
-1
😄
Laugh
🎉
Hooray
😕
Confused
❤️
Heart

maih43538
commented about 2 hours ago

👍 1
maih43538 reacted with thumbs up emoji
Remove my 👍
🎉 1
maih43538 reacted with hooray emoji
Remove my 🎉

👍
+1
👎
-1
😄
Laugh
🎉
Hooray
😕
Confused
❤️
Heart

maih43538
commented about 2 hours ago
Kết nối
😄 1
maih43538 reacted with laugh emoji
Remove my 😄
❤️ 1
maih43538 reacted with heart emoji
Remove my ❤️

👍
+1
👎
-1
😄
Laugh
🎉
Hooray
😕
Confused
❤️
Heart

maih43538
commented 13 minutes ago
Mobile

👍
+1
👎
-1
😄
Laugh
🎉
Hooray
😕
Confused
❤️
Heart

maih43538
commented 12 minutes ago
Kết nối tài khoảng google
👍 1
maih43538 reacted with thumbs up emoji
Remove my 👍
😄 1
maih43538 reacted with laugh emoji
Remove my 😄
🎉 1
maih43538 reacted with hooray emoji
Remove my 🎉
❤️ 1
maih43538 reacted with heart emoji
Remove my ❤️

👍
+1
👎
-1
😄
Laugh
🎉
Hooray
😕
Confused
❤️
Heart
Comment on issue

Comment
Notifications for this thread

You’re not receiving notifications from this thread.
Subscribe

Desktop version
Sign out

@renatobecker-zz
Copy link
Copy Markdown
Author

Hi @maih43538, I didn't understand why you mentioned the #10552 in this PR.
Thanks.

@ccfiel
Copy link
Copy Markdown

ccfiel commented May 3, 2018

when this will be merge to master? :)

@sampaiodiego sampaiodiego temporarily deployed to rocket-chat-pr-10514 May 15, 2018 12:44 Inactive
livechatUrl = `${ livechatUrl }&${ query }`;
}

return Meteor.absoluteUrl().replace(/\/$/, '') + livechatUrl;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can change this to Meteor.absoluteUrl(livechatUrl)

};

Template.messageAttachment.helpers({
fixLivechatUpload,
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pls fix the indentation (change the spaces by a tab)

</div>
<div class="buttons">
<svg class="send-button" aria-label="{{_ "Send"}}" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1764 11q33 24 27 64l-256 1536q-5 29-32 45-14 8-31 8-11 0-24-5l-453-185-242 295q-18 23-49 23-13 0-22-4-19-7-30.5-23.5t-11.5-36.5v-349l864-1059-1069 925-395-162q-37-14-40-55-2-40 32-59l1664-960q15-9 32-9 20 0 36 11z"/></svg>
{{#if fileUploadEnabled}}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please add a logic to hide the button if the textarea is not empty.

and what about changing the position of the button to above the textarea? like this:
image

@@ -1,6 +1,7 @@
/* globals Livechat, LivechatVideoCall, MsgTyping */
/* globals Livechat, LivechatFileUpload, LivechatVideoCall, MsgTyping */
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks like you're not using LivechatFileUpload on this file

enableQuery: { _id: 'Jitsi_Enabled', value: true }
});

RocketChat.settings.add('Livechat_fileupload_enabled', false, {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this can be enabled by default

closeOnCancel: true,
closeOnConfirm: true
}, (isConfirm) => {
if (isConfirm) {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should try writing more plain functions, it helps readability and maintainability. this one could be rewrite like this:

if (!isConfirm) {
	return;
}

const roomId = visitor.getRoom(true);

if (visitor.getId()) {
	return sendFileMessage(file.file, roomId);
}

const guest = {
	token: visitor.getToken()
};

if (Livechat.department) {
	guest.department = Livechat.department;
}

Meteor.call('livechat:registerGuest', guest, (error, result) => {
	if (error) {
		return showError(error.reason);
	}

	visitor.setId(result.userId);
	sendFileMessage(file.file, roomId);
});


const match = /^\/([^\/]+)\/(.*)/.exec(req.url);

if (match[1]) {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as before.. please rewrite this to be more plain.. also rewrite in a way that the success flow is not inside an if statement.

}

fileUpload = function(file) {
Meteor.call('livechat:checkTypeFileUpload', file.file.type, (error, result) => {
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO both checks (type and size) should be done by the same method. so instead of calling multiple methods for multiples validations, I would rather then call a single livechat:validateFileUpload and that method would than perform all validations needed.

return getUploadPreview(file, function(file, preview) {
let text = '';
if (file.type === 'audio') {
text = `\
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

any reason to add this line breaks?

}

const room = RocketChat.models.Rooms.findOneById(file.rid);
return room && room.t === 'l' && file && file.visitorToken && room.v && room.v.token === file.visitorToken;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you don't need to check file && file.visitorToken here again, you checked them before already

@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10514 May 17, 2018 14:53 Inactive
@renatobecker-zz
Copy link
Copy Markdown
Author

Hi @sampaiodiego!
I have just fixed the review requests. I Would like to suggest that we consider increasing the size of the livechat widget. I'm bringing this suggestion because after testing the Livechat fileupload process, there are some alerts/warnings where they are not displayed correctly inside the default widget box.

# Conflicts:
#	packages/rocketchat-livechat/server/lib/Livechat.js
#	packages/rocketchat-livechat/server/methods/getInitialData.js
@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10514 May 24, 2018 15:09 Inactive
@sampaiodiego sampaiodiego temporarily deployed to rocket-chat-pr-10514 June 13, 2018 12:25 Inactive
@phqtuyen
Copy link
Copy Markdown

Hi guys,

I was trying to run this branch on OSX High Sierra 10.13.3 with npm 6.1.0 and meteor 1.6, I have encountered a very strange bug with live chat. The strange thing is it does not always occur. Here are the steps to reproduce:

  1. npm cache clean -f && npm install && npm rebuild.
  2. meteor npm run as usual. The livechat works like a charm this first time.
  3. Turn off the development server and meteor npm start again.
  4. Try to access livechat client, this is where the error occur.
    screen shot 2018-06-15 at 12 18 43 pm

Step 1 seems to fix the issue but only for that time, if I build again then the error re-appears. I wonder if has anyone faced the same issues or any idea how to fix it? Many thanks.

@vodkhang
Copy link
Copy Markdown

I had the same issue, and it seemed that putting "readable-stream": "^2.3.3" into packages/rocketchat-livechat/.app/package.json make it work

# Conflicts:
#	packages/rocketchat-livechat/.app/package.json
@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10514 June 21, 2018 20:55 Inactive
@renatobecker-zz
Copy link
Copy Markdown
Author

@vodkhang, about your comments:

  • swal is already being imported inside LivechatFileUpload.js, just check the lastest commits.
  • Sometimes we have troubles merging i18n files, so I suggest you to run meteor reset command and then run meteor again.

@vodkhang
Copy link
Copy Markdown

vodkhang commented Jul 6, 2018

I still think your string is not in the correct location? Should the string be inside livechat i18n file?

@vodkhang
Copy link
Copy Markdown

vodkhang commented Jul 6, 2018

The display is still wrong when I have done meteor reset. The livechat app seems to be independent so I think you need to copy the i18n to inside

@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10514 July 6, 2018 22:38 Inactive
@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10514 July 6, 2018 22:40 Inactive
};

Template.messageAttachment.helpers({
fixLivechatUpload,
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what about change this to a cookie approach just like rocket.chat client does?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

}

let { rc_uid, rc_token } = query;
const { rc_room_type } = query;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will need to change if we change to cookies

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

const isAuthorizedByCookies = rc_uid && rc_token && RocketChat.models.Users.findOneByIdAndLoginToken(rc_uid, rc_token);
const isAuthorizedByHeaders = headers['x-user-id'] && headers['x-auth-token'] && RocketChat.models.Users.findOneByIdAndLoginToken(headers['x-user-id'], headers['x-auth-token']);
return isAuthorizedByCookies || isAuthorizedByHeaders;
const isAuthorizedByQuery = rc_room_type && RocketChat.roomTypes.getConfig(rc_room_type).allowFileUpload(query);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

allowFileUpload is not the best name to use here, since it is not allowing upload but the file access.. so I think canAccessUploadedFile or canAccessFile would be better.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

*/
allowFileUpload(allowData) {
const { rc_uid, rc_token } = allowData;
return rc_uid && rc_token && RocketChat.models.Users.findOneByIdAndLoginToken(rc_uid, rc_token);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since this is being done already previously, I think this default function can return false only.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

{{{body}}}
{{#if hasAttachments}}
{{#each attachments}}
{{injectIndex . @index}} {{> messageAttachment}}
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this index from injectIndex being used somewhere? or what is its purpose?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My bad.. I was probably thinking of something like ReactJS approach.
Fixed.

</span>
<div class="body" dir="auto">
{{{body}}}
{{#if hasAttachments}}
Copy link
Copy Markdown
Member

@sampaiodiego sampaiodiego Jul 9, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this {{#if ... }} can be removed.

instead it should always show {{{body}}} and then have the {{#each attachments}}.. this will allow it showing replies from rocket.chat (somewhat).

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed, but we will need to thing about improving markdown on Livechat, I guess.. =)

@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10514 July 9, 2018 22:07 Inactive
@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10514 July 9, 2018 22:07 Inactive
}

canAccessUploadedFile(accessData) {
const { rc_token, rc_rid } = accessData;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can move this to function definition, like:

canAccessUploadedFile({ rc_token, rc_rid } = {}) {
  // ...
}

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

connected = connectionStatus.connected;
document.cookie = `rc_rid=${ visitor.getRoom() }; path=/`;
document.cookie = `rc_token=${ visitor.getToken() }; path=/`;
document.cookie = `rc_room_type=${ 'l' }; path=/`;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you don't need to use interpolation for fixed values:

document.cookie = `rc_room_type=l; path=/`;

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

}

const user = Meteor.user();
const user = (file.userId) ? Meteor.user() : null;
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you don't need these parenthesis:

const user = file.userId ? Meteor.user() : null;

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

return false;
}

const language = (user) ? user.language : 'en';
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you don't need these parenthesis:

const language = user ? user.language : 'en';

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed.

@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10514 July 10, 2018 22:36 Inactive
@renatobecker-zz
Copy link
Copy Markdown
Author

@sampaiodiego, I just submitted the improvements on codebase.

@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10514 July 10, 2018 23:11 Inactive
@engelgabriel engelgabriel temporarily deployed to rocket-chat-pr-10514 July 11, 2018 01:48 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants