Merge remote-tracking branch 'rocket.chat/develop' into HEAD

Author: SeRoNet Concourse

app/api/server/lib/users.js

@@ -10,7 +10,7 @@ export async function findUsersToAutocomplete({ uid, selector }) {
 	const exceptions = selector.exceptions || [];
 	const conditions = selector.conditions || {};
 	const options = {
-		fields: {
+		projection: {
 			name: 1,
 			username: 1,
 			nickname: 1,

app/apps/server/bridges/scheduler.ts

@@ -17,12 +17,12 @@ function _callProcessor(processor: Function): (job: { attrs?: { data: object } }
 		// This field is for internal use, no need to leak to app processor
 		delete (data as any).appId;
 
-		processor(data);
+		return processor(data);
 	};
 }
 
 /**
- * Provides the Apps Engine with task scheduling capabilities
+ * Provides the Apps Engine with task scheduling capabilities.
  * It uses {@link agenda:github.com/agenda/agenda} as backend
  */
 export class AppSchedulerBridge extends SchedulerBridge {
@@ -43,7 +43,7 @@ export class AppSchedulerBridge extends SchedulerBridge {
 	}
 
 	/**
-	 * Entity that will be run in a job
+	 * Entity that will be run in a job.
 	 * @typedef {Object} Processor
 	 * @property {string} id The processor's identifier
 	 * @property {function} processor The function that will be run on a given schedule
@@ -127,7 +127,7 @@ export class AppSchedulerBridge extends SchedulerBridge {
 	}
 
 	/**
-	 * Schedules a registered processor to run recurrently according to a given interval
+	 * Schedules a registered processor to run recurrently according to a given interval.
 	 *
 	 * @param {Object} job
 	 * @param {string} job.id The processor's id

app/livechat/server/methods/saveBusinessHour.ts

@@ -5,6 +5,10 @@ import { businessHourManager } from '../business-hour';
 
 Meteor.methods({
 	'livechat:saveBusinessHour'(businessHourData: ILivechatBusinessHour) {
-		businessHourManager.saveBusinessHour(businessHourData);
+		try {
+			Promise.await(businessHourManager.saveBusinessHour(businessHourData));
+		} catch (e) {
+			throw new Meteor.Error(e.message);
+		}
 	},
 });

app/ui/client/lib/fileUpload.js

@@ -1,20 +1,12 @@
 import { Tracker } from 'meteor/tracker';
 import { Session } from 'meteor/session';
-import s from 'underscore.string';
-import { Handlebars } from 'meteor/ui';
 import { Random } from 'meteor/random';
 
 import { settings } from '../../../settings/client';
-import { t, fileUploadIsValidContentType, APIClient } from '../../../utils';
-import { modal, prependReplies } from '../../../ui-utils';
-
-
-const readAsDataURL = (file, callback) => {
-	const reader = new FileReader();
-	reader.onload = (e) => callback(e.target.result, file);
-
-	return reader.readAsDataURL(file);
-};
+import { fileUploadIsValidContentType, APIClient } from '../../../utils';
+import { prependReplies } from '../../../ui-utils';
+import { imperativeModal } from '../../../../client/lib/imperativeModal';
+import FileUploadModal from '../../../../client/components/modals/FileUploadModal';
 
 export const uploadFileWithMessage = async (rid, tmid, { description, fileName, msg, file }) => {
 	const data = new FormData();
@@ -84,129 +76,6 @@ export const uploadFileWithMessage = async (rid, tmid, { description, fileName,
 	}
 };
 
-
-const showUploadPreview = (file, callback) => {
-	// If greater then 10MB don't try and show a preview
-	if (file.file.size > (10 * 1000000)) {
-		return callback(file, null);
-	}
-
-	if (file.file.type == null) {
-		return callback(file, null);
-	}
-
-	if ((file.file.type.indexOf('audio') > -1) || (file.file.type.indexOf('video') > -1) || (file.file.type.indexOf('image') > -1)) {
-		file.type = file.file.type.split('/')[0];
-
-		return readAsDataURL(file.file, (content) => callback(file, content));
-	}
-
-	return callback(file, null);
-};
-
-const getAudioUploadPreview = (file, preview) => `\
-<div class='upload-preview'>
-	<audio style="width: 100%;" controls="controls">
-		<source src="${ preview }" type="${ file.file.type }">
-		Your browser does not support the audio element.
-	</audio>
-</div>
-<div class='upload-preview-title'>
-	<div class="rc-input__wrapper">
-		<input class="rc-input__element" id='file-name' style='display: inherit;' value='${ Handlebars._escape(file.name) }' placeholder='${ t('Upload_file_name') }'>
-	</div>
-	<div class="rc-input__wrapper">
-		<input class="rc-input__element" id='file-description' autofocus style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
-	</div>
-</div>`;
-
-const getVideoUploadPreview = (file, preview) => `\
-<div class='upload-preview'>
-	<video style="width: 100%;" controls="controls">
-		<source src="${ preview }" type="video/webm">
-		Your browser does not support the video element.
-	</video>
-</div>
-<div class='upload-preview-title'>
-	<div class="rc-input__wrapper">
-		<input class="rc-input__element" id='file-name' style='display: inherit;' value='${ Handlebars._escape(file.name) }' placeholder='${ t('Upload_file_name') }'>
-	</div>
-	<div class="rc-input__wrapper">
-		<input class="rc-input__element" id='file-description' autofocus style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
-	</div>
-</div>`;
-
-const getImageUploadPreview = (file, preview) => `\
-<div class='upload-preview'>
-	<div class='upload-preview-file' style='background-image: url(${ preview })'></div>
-</div>
-<div class='upload-preview-title'>
-	<div class="rc-input__wrapper">
-		<input class="rc-input__element" id='file-name' style='display: inherit;' value='${ Handlebars._escape(file.name) }' placeholder='${ t('Upload_file_name') }'>
-	</div>
-	<div class="rc-input__wrapper">
-		<input class="rc-input__element" id='file-description' autofocus style='display: inherit;' value='' placeholder='${ t('Upload_file_description') }'>
-	</div>
-</div>`;
-
-const formatBytes = (bytes, decimals) => {
-	if (bytes === 0) {
-		return '0 Bytes';
-	}
-
-	const k = 1000;
-	const dm = (decimals + 1) || 3;
-
-	const sizes = [
-		'Bytes',
-		'KB',
-		'MB',
-		'GB',
-		'TB',
-		'PB',
-	];
-
-	const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-	return `${ parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) } ${ sizes[i] }`;
-};
-
-const getGenericUploadPreview = (file) => `\
-<div class='upload-preview'>
-<div>${ Handlebars._escape(file.name) } - ${ formatBytes(file.file.size) }</div>
-</div>
-<div class='upload-preview-title'>
-<div class="rc-input__wrapper">
-<input class="rc-input__element" id='file-name' style='display: inherit;' value='${ Handlebars._escape(file.name) }' placeholder='${ t('Upload_file_name') }'>
-</div>
-<div class="rc-input__wrapper">
-<input class="rc-input__element" id='file-description' style='display: inherit;' value='' autoFocus placeholder='${ t('Upload_file_description') }'>
-</div>
-</div>`;
-
-const getUploadPreview = async (file, preview) => {
-	if (file.type === 'audio') {
-		return getAudioUploadPreview(file, preview);
-	}
-
-	if (file.type === 'video') {
-		return getVideoUploadPreview(file, preview);
-	}
-
-	const isImageFormatSupported = () => new Promise((resolve) => {
-		const element = document.createElement('img');
-		element.onload = () => resolve(true);
-		element.onerror = () => resolve(false);
-		element.src = preview;
-	});
-
-	if (file.type === 'image' && await isImageFormatSupported()) {
-		return getImageUploadPreview(file, preview);
-	}
-
-	return getGenericUploadPreview(file, preview);
-};
-
 export const fileUpload = async (files, input, { rid, tmid }) => {
 	const threadsEnabled = settings.get('Threads_enabled');
 
@@ -228,55 +97,30 @@ export const fileUpload = async (files, input, { rid, tmid }) => {
 	const uploadNextFile = () => {
 		const file = files.pop();
 		if (!file) {
-			modal.close();
 			return;
 		}
 
-		if (file.file.type && !fileUploadIsValidContentType(file.file.type)) {
-			modal.open({
-				title: t('FileUpload_MediaType_NotAccepted'),
-				text: file.file.type || `*.${ s.strRightBack(file.file.name, '.') }`,
-				type: 'error',
-				timer: 3000,
-			});
-			return;
-		}
-
-		if (file.file.size === 0) {
-			modal.open({
-				title: t('FileUpload_File_Empty'),
-				type: 'error',
-				timer: 1000,
-			});
-			return;
-		}
-
-		showUploadPreview(file, async (file, preview) => modal.open({
-			title: t('Upload_file_question'),
-			text: await getUploadPreview(file, preview),
-			showCancelButton: true,
-			closeOnConfirm: false,
-			closeOnCancel: false,
-			confirmButtonText: t('Send'),
-			cancelButtonText: t('Cancel'),
-			html: true,
-			onRendered: () => $('#file-description').focus(),
-		}, async (isConfirm) => {
-			if (!isConfirm) {
-				return;
-			}
-
-			const fileName = document.getElementById('file-name').value || file.name || file.file.name;
-
-			uploadFileWithMessage(rid, tmid, {
-				description: document.getElementById('file-description').value || undefined,
-				fileName,
-				msg: msg || undefined,
-				file,
-			});
-
-			uploadNextFile();
-		}));
+		imperativeModal.open({
+			component: FileUploadModal,
+			props: {
+				file: file.file,
+				onClose: () => {
+					imperativeModal.close();
+					uploadNextFile();
+				},
+				onSubmit: (fileName, description) => {
+					uploadFileWithMessage(rid, tmid, {
+						description,
+						fileName,
+						msg: msg || undefined,
+						file,
+					});
+					imperativeModal.close();
+					uploadNextFile();
+				},
+				isValidContentType: file.file.type && fileUploadIsValidContentType(file.file.type),
+			},
+		});
 	};
 
 	uploadNextFile();

client/components/modals/FileUploadModal/FilePreview.tsx

@@ -0,0 +1,55 @@
+import React, { ReactElement } from 'react';
+
+import { isIE11 } from '../../../../app/ui-utils/client/lib/isIE11';
+import GenericPreview from './GenericPreview';
+import MediaPreview from './MediaPreview';
+
+export enum FilePreviewType {
+	IMAGE = 'image',
+	AUDIO = 'audio',
+	VIDEO = 'video',
+}
+
+const getFileType = (fileType: File['type']): FilePreviewType | undefined => {
+	if (!fileType) {
+		return;
+	}
+	for (const type of Object.values(FilePreviewType)) {
+		if (fileType.indexOf(type) > -1) {
+			return type;
+		}
+	}
+};
+
+const shouldShowMediaPreview = (file: File, fileType: FilePreviewType | undefined): boolean => {
+	if (!fileType) {
+		return false;
+	}
+	if (isIE11()) {
+		return false;
+	}
+	// Avoid preview if file size bigger than 10mb
+	if (file.size > 10000000) {
+		return false;
+	}
+	if (!Object.values(FilePreviewType).includes(fileType)) {
+		return false;
+	}
+	return true;
+};
+
+type FilePreviewProps = {
+	file: File;
+};
+
+const FilePreview = ({ file }: FilePreviewProps): ReactElement => {
+	const fileType = getFileType(file.type);
+
+	if (shouldShowMediaPreview(file, fileType)) {
+		return <MediaPreview file={file} fileType={fileType as FilePreviewType} />;
+	}
+
+	return <GenericPreview file={file} />;
+};
+
+export default FilePreview;

client/components/modals/FileUploadModal/FileUploadModal.stories.js

@@ -0,0 +1,28 @@
+import { Box } from '@rocket.chat/fuselage';
+import React, { useState } from 'react';
+
+import FileUploadModal from '.';
+
+export default {
+	title: 'components/modals/FileUploadModal',
+	component: FileUploadModal,
+};
+
+const onClose = () => console.log('close');
+
+const _file = new File(['lol'], 'lol', { type: 'image' });
+
+export const Default = () => {
+	const [file, setFile] = useState(_file);
+
+	const handleFile = (e) => {
+		console.log(e.target.files);
+		setFile(e.target.files[0]);
+	};
+	return (
+		<Box>
+			<Box is='input' type='file' onChange={handleFile} />
+			<FileUploadModal file={file} onClose={onClose} />
+		</Box>
+	);
+};