Merge pull request #482 from RocketChat/mobile-uploads

Allow upload image from mobile

client/stylesheets/base.less

@@ -1952,6 +1952,31 @@ a.github-fork {
 	.message-form {
 		> div {
 			position: relative;
+			display: flex;
+			display: -webkit-flex;
+			> .file {
+				display: none;
+				width: 44px;
+				font-size: 22px;
+				padding: 6px 0;
+				text-align: center;
+				border: 1px solid #E7E7E7;
+				border-radius: 5px 0 0 5px;
+				border-right: none;
+				cursor: pointer;
+				color: #888;
+
+				input {
+					position: absolute;
+					top: 0;
+					left: 0;
+					right: 0;
+					bottom: 0;
+					overflow: hidden;
+					width: 44px;
+					opacity: 0;
+				}
+			}
 		}
 		textarea {
 			display: block;
@@ -3387,3 +3412,20 @@ a.github-fork {
 		border-width: 0 0 1px 0;
 	}
 }
+
+.touch {
+	.footer {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+	.message-form {
+		.file {
+			display: block !important;
+		}
+
+		textarea {
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
+		}
+	}
+}

client/views/app/room.coffee

@@ -550,6 +550,21 @@ Template.room.events
 
 		fileUpload files
 
+	'change .message-form input[type=file]': (event, template) ->
+		e = event.originalEvent or event
+		files = e.target.files
+		if not files or files.length is 0
+			files = e.dataTransfer?.files or []
+
+		filesToUpload = []
+		for file in files
+			filesToUpload.push
+				file: file
+				name: file.name
+
+		fileUpload filesToUpload
+
+
 	'click .deactivate': ->
 		username = Session.get('showUserInfo')
 		user = Meteor.users.findOne { username: String(username) }

client/views/app/room.html

@@ -45,7 +45,11 @@
 			<footer class="footer">
 				{{#if subscribed}}
 					<form class="message-form" method="post" action="/">
-						<div>
+						<div style="display: flex">
+							<div class="file">
+								<i class="icon-attach"></i>
+								<input type="file" accept="image/*">
+							</div>
 							{{> messagePopupConfig getPupupConfig}}
 							<textarea dir="auto" name="msg" maxlength="{{maxMessageLength}}" class="input-message" placeholder="{{_ 'Message'}}"></textarea>
 							<i class="icon-paper-plane" title="{{_ "Send_Message"}}"></i>