Merge pull request #479 from RocketChat/upload-preview

Add dialog to preview and confirm file upload

Author: engelgabriel

client/lib/fileUpload.coffee

@@ -0,0 +1,43 @@
+@fileUpload = (files) ->
+	files = [].concat files
+
+	consume = ->
+		file = files.pop()
+		if not file?
+			swal.close()
+			return
+
+		reader = new FileReader()
+		reader.onload = (event) ->
+			image = event.target.result
+			swal
+				title: t('Upload_file_question')
+				text: """
+					<div class='upload-preview'>
+						<div class='upload-preview-file' style='background-image: url(#{image})'></div>
+					</div>
+					<div class='upload-preview-title'>#{file.name}</div>
+				"""
+				showCancelButton: true
+				closeOnConfirm: false
+				closeOnCancel: false
+				html: true
+			, (isConfirm) ->
+				consume()
+
+				if isConfirm isnt true
+					return
+
+				newFile = new (FS.File)(file.file)
+				if file.name?
+					newFile.name(file.name)
+				newFile.rid = Session.get('openedRoom')
+				newFile.recId = Random.id()
+				newFile.userId = Meteor.userId()
+				Files.insert newFile, (error, fileObj) ->
+					unless error
+						toastr.success 'Upload succeeded!'
+
+		reader.readAsDataURL(file.file)
+
+	consume()

client/stylesheets/base.less

@@ -75,6 +75,22 @@ blockquote {
 	}
 }
 
+.upload-preview {
+	background-color: #f5f5f5;
+	.upload-preview-file {
+		height: 200px;
+		background-size: contain;
+		background-repeat: no-repeat;
+		background-position: center center;
+	}
+}
+
+.upload-preview-title {
+	background-color: #eee;
+	padding: 3px;
+	border-radius: 0 0 5px 5px;
+}
+
 .flex-center {
 	display: -webkit-flex;
 	display: flex;

client/views/app/room.coffee

@@ -349,20 +349,15 @@ Template.room.events
 			return
 
 		items = e.originalEvent.clipboardData.items
+		files = []
 		for item in items
 			if item.kind is 'file' and item.type.indexOf('image/') isnt -1
 				e.preventDefault()
+				files.push
+					file: item.getAsFile()
+					name: 'Clipboard'
 
-				blob = item.getAsFile()
-
-				newFile = new (FS.File)(blob)
-				newFile.name('Clipboard')
-				newFile.rid = Session.get('openedRoom')
-				newFile.recId = Random.id()
-				newFile.userId = Meteor.userId()
-				Files.insert newFile, (error, fileObj) ->
-					unless error
-						toastr.success 'Upload from clipboard succeeded!'
+		fileUpload files
 
 	'keydown .input-message': (event) ->
 		Template.instance().chatMessages.keydown(@_id, event, Template.instance())
@@ -547,14 +542,13 @@ Template.room.events
 	'dropped .dropzone-overlay': (e) ->
 		e.currentTarget.parentNode.classList.remove 'over'
 
+		files = []
 		FS?.Utility?.eachFile e, (file) ->
-			newFile = new (FS.File)(file)
-			newFile.rid = Session.get('openedRoom')
-			newFile.recId = Random.id()
-			newFile.userId = Meteor.userId()
-			Files.insert newFile, (error, fileObj) ->
-				unless error
-					toastr.success 'Upload succeeded!'
+			files.push
+				file: file
+				name: file.name
+
+		fileUpload files
 
 	'click .deactivate': ->
 		username = Session.get('showUserInfo')

i18n/en.i18n.json

@@ -184,6 +184,7 @@
   "The_field_is_required" : "The field %s is required.",
   "True" : "True",
   "Unnamed" : "Unnamed",
+  "Upload_file_question": "Upload file?",
   "Use_initials_avatar" : "Use your username initials",
   "use_menu" : "Use the side menu to access your rooms and chats",
   "Use_service_avatar" : "Use %s avatar",

i18n/pt.i18n.json

@@ -40,6 +40,7 @@
   "Created_at" : "Data criação",
   "Direct_Messages" : "Mensagens Diretas",
   "Deleted" : "Deletado!",
+  "Drop_to_upload_file": "Largue para enviar arquivos",
   "Duplicate_private_group_name" : "Já existe um Grupo Privado com nome '%s'",
   "Duplicate_channel_name" : "Já existe um Canal com nome '%s'",
   "edited" : "editado",
@@ -145,6 +146,7 @@
   "strike" : "tachado",
   "Submit" : "Enviar",
   "The_field_is_required" : "O campo %s é obrigatório.",
+  "Upload_file_question": "Enviar arquivo?",
   "Use_initials_avatar" : "Usar as iniciais do seu nome de usuário",
   "use_menu" : "Utilize o menu à esquerda para acessar suas salas",
   "Use_service_avatar" : "Use o avatar de %s",