Can upload logic

RocketChat · Jun 25, 2020 · 635e4c4 · 635e4c4
1 parent 8b1135d
commit 635e4c4
Show file tree

Hide file tree

Showing 6 changed files with 197 additions and 91 deletions.
diff --git a/app/containers/MessageBox/index.js b/app/containers/MessageBox/index.js
@@ -571,7 +571,7 @@ class MessageBox extends Component {
 
 	canUploadFile = (file) => {
 		const { FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize } = this.props;
-		const result = canUploadFile(file, { FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize });
+		const result = canUploadFile(file, FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize);
 		if (result.success) {
 			return true;
 		}

diff --git a/app/utils/media.js b/app/utils/media.js
@@ -1,16 +1,15 @@
-export const canUploadFile = (file, serverInfo) => {
-	const { FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize } = serverInfo;
+export const canUploadFile = (file, allowList, maxFileSize) => {
 	if (!(file && file.path)) {
 		return { success: true };
 	}
-	if (FileUpload_MaxFileSize > -1 && file.size > FileUpload_MaxFileSize) {
+	if (maxFileSize > -1 && file.size > maxFileSize) {
 		return { success: false, error: 'error-file-too-large' };
 	}
 	// if white list is empty, all media types are enabled
-	if (!FileUpload_MediaTypeWhiteList || FileUpload_MediaTypeWhiteList === '*') {
+	if (!allowList || allowList === '*') {
 		return { success: true };
 	}
-	const allowedMime = FileUpload_MediaTypeWhiteList.split(',');
+	const allowedMime = allowList.split(',');
 	if (allowedMime.includes(file.mime)) {
 		return { success: true };
 	}

diff --git a/app/views/ShareListView/index.js b/app/views/ShareListView/index.js
@@ -217,13 +217,14 @@ class ShareListView extends React.Component {
 	}
 
 	shareMessage = (room) => {
-		const { attachments, text } = this.state;
+		const { attachments, text, serverInfo } = this.state;
 		const { navigation } = this.props;
 
 		navigation.navigate('ShareView', {
 			room,
 			text,
 			attachments,
+			serverInfo,
 			isShareExtension: true
 		});
 	}

diff --git a/app/views/ShareView/Preview.js b/app/views/ShareView/Preview.js
@@ -14,6 +14,7 @@ import { isIOS } from '../../utils/deviceInfo';
 import { THUMBS_HEIGHT } from './constants';
 import sharedStyles from '../Styles';
 import { allowPreview } from './utils';
+import I18n from '../../i18n';
 
 const styles = StyleSheet.create({
 	fileContainer: {
@@ -32,6 +33,23 @@ const styles = StyleSheet.create({
 	}
 });
 
+const IconPreview = React.memo(({
+	iconName, title, description, theme, width, height, danger
+}) => (
+	<ScrollView
+		style={{ backgroundColor: themes[theme].auxiliaryBackground }}
+		contentContainerStyle={[styles.fileContainer, { width, height }]}
+	>
+		<CustomIcon
+			name={iconName}
+			size={56}
+			color={danger ? themes[theme].dangerColor : themes[theme].tintColor}
+		/>
+		<Text style={[styles.fileName, { color: themes[theme].titleText }]}>{title}</Text>
+		{description ? <Text style={[styles.fileSize, { color: themes[theme].bodyText }]}>{description}</Text> : null}
+	</ScrollView>
+));
+
 const Preview = React.memo(({
 	item, theme, isShareExtension, length
 }) => {
@@ -44,46 +62,58 @@ const Preview = React.memo(({
 	const thumbsHeight = (length > 1) ? THUMBS_HEIGHT : 0;
 	const calculatedHeight = height - insets.top - insets.bottom - messageboxHeight - thumbsHeight - headerHeight;
 
-	if (type?.match(/video/)) {
-		return (
-			<Video
-				source={{ uri: item.path }}
-				rate={1.0}
-				volume={1.0}
-				isMuted={false}
-				resizeMode={Video.RESIZE_MODE_CONTAIN}
-				isLooping={false}
-				style={{ width, height: calculatedHeight }}
-				useNativeControls
-			/>
-		);
-	}
-
-	// Disallow preview of images too big in order to prevent memory issues on iOS share extension
-	if (allowPreview(isShareExtension, item?.size)) {
-		if (type?.match(/image/)) {
+	if (item?.canUpload) {
+		if (type?.match(/video/)) {
 			return (
-				<ImageViewer
-					uri={item.path}
-					imageComponentType={isShareExtension ? types.REACT_NATIVE_IMAGE : types.FAST_IMAGE}
-					width={width}
-					height={calculatedHeight}
-					theme={theme}
+				<Video
+					source={{ uri: item.path }}
+					rate={1.0}
+					volume={1.0}
+					isMuted={false}
+					resizeMode={Video.RESIZE_MODE_CONTAIN}
+					isLooping={false}
+					style={{ width, height: calculatedHeight }}
+					useNativeControls
 				/>
 			);
 		}
+
+		// Disallow preview of images too big in order to prevent memory issues on iOS share extension
+		if (allowPreview(isShareExtension, item?.size)) {
+			if (type?.match(/image/)) {
+				return (
+					<ImageViewer
+						uri={item.path}
+						imageComponentType={isShareExtension ? types.REACT_NATIVE_IMAGE : types.FAST_IMAGE}
+						width={width}
+						height={calculatedHeight}
+						theme={theme}
+					/>
+				);
+			}
+		}
+		return (
+			<IconPreview
+				iconName={type?.match(/image/) ? 'Camera' : 'clip'}
+				title={item?.filename}
+				description={prettyBytes(item?.size ?? 0)}
+				theme={theme}
+				width={width}
+				height={calculatedHeight}
+			/>
+		);
 	}
 
 	return (
-		<ScrollView style={{ backgroundColor: themes[theme].auxiliaryBackground }} contentContainerStyle={[styles.fileContainer, { width, height: calculatedHeight }]}>
-			<CustomIcon
-				name={type?.match(/image/) ? 'Camera' : 'clip'}
-				size={56}
-				color={themes[theme].tintColor}
-			/>
-			<Text style={[styles.fileName, { color: themes[theme].titleText }]}>{item?.filename}</Text>
-			<Text style={[styles.fileSize, { color: themes[theme].bodyText }]}>{prettyBytes(item?.size ?? 0)}</Text>
-		</ScrollView>
+		<IconPreview
+			iconName='warning'
+			title={I18n.t(item?.error)}
+			description={prettyBytes(item?.size ?? 0)}
+			theme={theme}
+			width={width}
+			height={calculatedHeight}
+			danger
+		/>
 	);
 });
 Preview.propTypes = {
@@ -93,4 +123,14 @@ Preview.propTypes = {
 	length: PropTypes.number
 };
 
+IconPreview.propTypes = {
+	iconName: PropTypes.string,
+	title: PropTypes.string,
+	description: PropTypes.string,
+	theme: PropTypes.string,
+	width: PropTypes.number,
+	height: PropTypes.number,
+	danger: PropTypes.bool
+};
+
 export default Preview;
diff --git a/app/views/ShareView/Thumbs.js b/app/views/ShareView/Thumbs.js
@@ -24,6 +24,11 @@ const styles = StyleSheet.create({
 		left: 0,
 		bottom: 0
 	},
+	dangerIcon: {
+		position: 'absolute',
+		right: 16,
+		bottom: 0
+	},
 	removeButton: {
 		position: 'absolute',
 		right: 6,
@@ -59,7 +64,7 @@ const styles = StyleSheet.create({
 
 const ThumbButton = isIOS ? TouchableOpacity : TouchableNativeFeedback;
 
-const Thumb = React.memo(({ item, theme, isShareExtension }) => {
+const ThumbContent = React.memo(({ item, theme, isShareExtension }) => {
 	const type = item?.mime;
 
 	if (type?.match(/image/)) {
@@ -102,11 +107,43 @@ const Thumb = React.memo(({ item, theme, isShareExtension }) => {
 	// Multiple files selection (not audio or video) is not implemented, so there's no thumb
 	return null;
 });
-Thumb.propTypes = {
-	item: PropTypes.object,
-	theme: PropTypes.string,
-	isShareExtension: PropTypes.bool
-};
+
+const Thumb = ({
+	item, theme, isShareExtension, onPress, onRemove
+}) => (
+	<ThumbButton style={styles.item} onPress={() => onPress(item)} activeOpacity={0.7}>
+		<>
+			<ThumbContent
+				item={item}
+				theme={theme}
+				isShareExtension={isShareExtension}
+			/>
+			<RectButton
+				hitSlop={BUTTON_HIT_SLOP}
+				style={[styles.removeButton, { backgroundColor: themes[theme].bodyText, borderColor: themes[theme].auxiliaryBackground }]}
+				activeOpacity={1}
+				rippleColor={themes[theme].bannerBackground}
+				onPress={() => onRemove(item)}
+			>
+				<View style={[styles.removeView, { borderColor: themes[theme].auxiliaryBackground }]}>
+					<CustomIcon
+						name='Cross'
+						color={themes[theme].backgroundColor}
+						size={14}
+					/>
+				</View>
+			</RectButton>
+			{!item?.canUpload ? (
+				<CustomIcon
+					name='warning'
+					size={20}
+					color={themes[theme].dangerColor}
+					style={styles.dangerIcon}
+				/>
+			) : null}
+		</>
+	</ThumbButton>
+);
 
 const Thumbs = React.memo(({
 	attachments, theme, isShareExtension, onPress, onRemove
@@ -118,30 +155,13 @@ const Thumbs = React.memo(({
 				data={attachments}
 				keyExtractor={item => item.path}
 				renderItem={({ item }) => (
-					<ThumbButton style={styles.item} onPress={() => onPress(item)} activeOpacity={0.7}>
-						<>
-							<Thumb
-								item={item}
-								theme={theme}
-								isShareExtension={isShareExtension}
-							/>
-							<RectButton
-								hitSlop={BUTTON_HIT_SLOP}
-								style={[styles.removeButton, { backgroundColor: themes[theme].bodyText, borderColor: themes[theme].auxiliaryBackground }]}
-								activeOpacity={1}
-								rippleColor={themes[theme].bannerBackground}
-								onPress={() => onRemove(item)}
-							>
-								<View style={[styles.removeView, { borderColor: themes[theme].auxiliaryBackground }]}>
-									<CustomIcon
-										name='Cross'
-										color={themes[theme].backgroundColor}
-										size={14}
-									/>
-								</View>
-							</RectButton>
-						</>
-					</ThumbButton>
+					<Thumb
+						item={item}
+						theme={theme}
+						isShareExtension={isShareExtension}
+						onPress={() => onPress(item)}
+						onRemove={() => onRemove(item)}
+					/>
 				)}
 				style={[styles.list, { backgroundColor: themes[theme].messageboxBackground }]}
 			/>
@@ -155,5 +175,17 @@ Thumbs.propTypes = {
 	onPress: PropTypes.func,
 	onRemove: PropTypes.func
 };
+Thumb.propTypes = {
+	item: PropTypes.object,
+	theme: PropTypes.string,
+	isShareExtension: PropTypes.bool,
+	onPress: PropTypes.func,
+	onRemove: PropTypes.func
+};
+ThumbContent.propTypes = {
+	item: PropTypes.object,
+	theme: PropTypes.string,
+	isShareExtension: PropTypes.bool
+};
 
 export default Thumbs;