[BETA] 1.17.0

android/app/build.gradle

@@ -174,6 +174,7 @@ android {
 dependencies {
     addUnimodulesDependencies()
     implementation "org.webkit:android-jsc:r241213"
+    implementation project(':react-native-document-picker')
     implementation project(':react-native-firebase')
     implementation project(':react-native-webview')
     implementation project(':react-native-orientation-locker')

android/app/src/main/java/chat/rocket/reactnative/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import io.github.elyx0.reactnativedocumentpicker.DocumentPickerPackage;
 import io.invertase.firebase.RNFirebasePackage;
 import io.invertase.firebase.fabric.crashlytics.RNFirebaseCrashlyticsPackage;
 import io.invertase.firebase.analytics.RNFirebaseAnalyticsPackage;
@@ -60,6 +61,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new DocumentPickerPackage(),
             new RNFirebasePackage(),
             new RNFirebaseCrashlyticsPackage(),
             new RNFirebaseAnalyticsPackage(),

android/settings.gradle

@@ -2,6 +2,8 @@ apply from: '../node_modules/react-native-unimodules/gradle.groovy'
 includeUnimodulesProjects()
 
 rootProject.name = 'RocketChatRN'
+include ':react-native-document-picker'
+project(':react-native-document-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-document-picker/android')
 include ':react-native-firebase'
 project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')
 include ':react-native-webview'

app/constants/settings.js

@@ -73,5 +73,11 @@ export default {
 	},
 	AutoTranslate_Enabled: {
 		type: 'valueAsBoolean'
+	},
+	FileUpload_MediaTypeWhiteList: {
+		type: 'valueAsString'
+	},
+	FileUpload_MaxFileSize: {
+		type: 'valueAsNumber'
 	}
 };

app/containers/MessageBox/UploadModal.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import {
 	View, Text, StyleSheet, Image, ScrollView, TouchableHighlight
 } from 'react-native';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
 import { responsive } from 'react-native-responsive-ui';
@@ -12,7 +13,10 @@ import Button from '../Button';
 import I18n from '../../i18n';
 import sharedStyles from '../../views/Styles';
 import { isIOS } from '../../utils/deviceInfo';
-import { COLOR_PRIMARY, COLOR_BACKGROUND_CONTAINER, COLOR_WHITE } from '../../constants/colors';
+import {
+	COLOR_PRIMARY, COLOR_BACKGROUND_CONTAINER, COLOR_WHITE, COLOR_DANGER
+} from '../../constants/colors';
+import { CustomIcon } from '../../lib/Icons';
 
 const cancelButtonColor = COLOR_BACKGROUND_CONTAINER;
 
@@ -63,18 +67,56 @@ const styles = StyleSheet.create({
 	androidButtonText: {
 		fontSize: 18,
 		textAlign: 'center'
+	},
+	fileIcon: {
+		color: COLOR_PRIMARY,
+		margin: 20,
+		flex: 1,
+		textAlign: 'center'
+	},
+	errorIcon: {
+		color: COLOR_DANGER
+	},
+	fileMime: {
+		...sharedStyles.textColorTitle,
+		...sharedStyles.textBold,
+		textAlign: 'center',
+		fontSize: 20,
+		marginBottom: 20
+	},
+	errorContainer: {
+		margin: 20,
+		flex: 1,
+		textAlign: 'center',
+		justifyContent: 'center',
+		alignItems: 'center'
+	},
+	video: {
+		flex: 1,
+		borderRadius: 4,
+		height: 150,
+		backgroundColor: '#1f2329',
+		marginBottom: 6,
+		alignItems: 'center',
+		justifyContent: 'center'
 	}
 
 });
 
 @responsive
+@connect(state => ({
+	FileUpload_MediaTypeWhiteList: state.settings.FileUpload_MediaTypeWhiteList,
+	FileUpload_MaxFileSize: state.settings.FileUpload_MaxFileSize
+}))
 export default class UploadModal extends Component {
 	static propTypes = {
 		isVisible: PropTypes.bool,
 		file: PropTypes.object,
 		close: PropTypes.func,
 		submit: PropTypes.func,
-		window: PropTypes.object
+		window: PropTypes.object,
+		FileUpload_MediaTypeWhiteList: PropTypes.string,
+		FileUpload_MaxFileSize: PropTypes.number
 	}
 
 	state = {
@@ -116,12 +158,81 @@ export default class UploadModal extends Component {
 		return false;
 	}
 
+	canUploadFile = () => {
+		const { FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize, file } = this.props;
+		if (!(file && file.path)) {
+			return true;
+		}
+		if (file.size > FileUpload_MaxFileSize) {
+			return false;
+		}
+		if (!FileUpload_MediaTypeWhiteList) {
+			return false;
+		}
+		const allowedMime = FileUpload_MediaTypeWhiteList.split(',');
+		if (allowedMime.includes(file.mime)) {
+			return true;
+		}
+		const wildCardGlob = '/*';
+		const wildCards = allowedMime.filter(item => item.indexOf(wildCardGlob) > 0);
+		if (wildCards.includes(file.mime.replace(/(\/.*)$/, wildCardGlob))) {
+			return true;
+		}
+		return false;
+	}
+
+	uriToPath = uri => uri.replace(/^file:\/\//, '');
+
 	submit = () => {
 		const { file, submit } = this.props;
 		const { name, description } = this.state;
+		file.path = this.uriToPath(file.path);
 		submit({ ...file, name, description });
 	}
 
+	renderError = () => {
+		const { file, FileUpload_MaxFileSize, close } = this.props;
+		const { window: { width } } = this.props;
+		const errorMessage = (FileUpload_MaxFileSize < file.size)
+			? 'error-file-too-large'
+			: 'error-invalid-file-type';
+		return (
+			<View style={[styles.container, { width: width - 32 }]}>
+				<View style={styles.titleContainer}>
+					<Text style={styles.title}>{I18n.t(errorMessage)}</Text>
+				</View>
+				<View style={styles.errorContainer}>
+					<CustomIcon name='circle-cross' size={120} style={styles.errorIcon} />
+				</View>
+				<Text style={styles.fileMime}>{ file.mime }</Text>
+				<View style={styles.buttonContainer}>
+					{
+						(isIOS)
+							? (
+								<Button
+									title={I18n.t('Cancel')}
+									type='secondary'
+									backgroundColor={cancelButtonColor}
+									style={styles.button}
+									onPress={close}
+								/>
+							)
+							: (
+								<TouchableHighlight
+									onPress={close}
+									style={[styles.androidButton, { backgroundColor: cancelButtonColor }]}
+									underlayColor={cancelButtonColor}
+									activeOpacity={0.5}
+								>
+									<Text style={[styles.androidButtonText, { ...sharedStyles.textBold, color: COLOR_PRIMARY }]}>{I18n.t('Cancel')}</Text>
+								</TouchableHighlight>
+							)
+					}
+				</View>
+			</View>
+		);
+	}
+
 	renderButtons = () => {
 		const { close } = this.props;
 		if (isIOS) {
@@ -166,9 +277,25 @@ export default class UploadModal extends Component {
 		);
 	}
 
+	renderPreview() {
+		const { file } = this.props;
+		if (file.mime && file.mime.match(/image/)) {
+			return (<Image source={{ isStatic: true, uri: file.path }} style={styles.image} />);
+		}
+		if (file.mime && file.mime.match(/video/)) {
+			return (
+				<View style={styles.video}>
+					<CustomIcon name='play' size={72} color={COLOR_WHITE} />
+				</View>
+			);
+		}
+		return (<CustomIcon name='file-generic' size={72} style={styles.fileIcon} />);
+	}
+
 	render() {
 		const { window: { width }, isVisible, close } = this.props;
-		const { name, description, file } = this.state;
+		const { name, description } = this.state;
+		const showError = !this.canUploadFile();
 		return (
 			<Modal
 				isVisible={isVisible}
@@ -181,26 +308,29 @@ export default class UploadModal extends Component {
 				hideModalContentWhileAnimating
 				avoidKeyboard
 			>
-				<View style={[styles.container, { width: width - 32 }]}>
-					<View style={styles.titleContainer}>
-						<Text style={styles.title}>{I18n.t('Upload_file_question_mark')}</Text>
-					</View>
-
-					<ScrollView style={styles.scrollView}>
-						<Image source={{ isStatic: true, uri: file.path }} style={styles.image} />
-						<TextInput
-							placeholder={I18n.t('File_name')}
-							value={name}
-							onChangeText={value => this.setState({ name: value })}
-						/>
-						<TextInput
-							placeholder={I18n.t('File_description')}
-							value={description}
-							onChangeText={value => this.setState({ description: value })}
-						/>
-					</ScrollView>
-					{this.renderButtons()}
-				</View>
+				{(showError) ? this.renderError()
+					: (
+						<View style={[styles.container, { width: width - 32 }]}>
+							<View style={styles.titleContainer}>
+								<Text style={styles.title}>{I18n.t('Upload_file_question_mark')}</Text>
+							</View>
+
+							<ScrollView style={styles.scrollView}>
+								{this.renderPreview()}
+								<TextInput
+									placeholder={I18n.t('File_name')}
+									value={name}
+									onChangeText={value => this.setState({ name: value })}
+								/>
+								<TextInput
+									placeholder={I18n.t('File_description')}
+									value={description}
+									onChangeText={value => this.setState({ description: value })}
+								/>
+							</ScrollView>
+							{this.renderButtons()}
+						</View>
+					)}
 			</Modal>
 		);
 	}