Add upload preview

client/stylesheets/base.less

@@ -2691,6 +2691,18 @@ a.github-fork {
 		display: inline-block;
 		top: -33px;
 	}
+	input[type=file] {
+		position: absolute !important;
+		width: 100%;
+		top: 0;
+		left: 0;
+		height: 100%;
+		opacity: 0;
+		z-index: 10000;
+		* {
+			cursor: pointer;
+		}
+	}
 }
 
 @media all and(max-width: 1100px) {

client/views/avatar/avatar.coffee

 Template.avatarPrompt.onCreated ->
 	self = this
 	self.suggestions = new ReactiveVar
+	self.upload = new ReactiveVar
 
 	Meteor.call 'getAvatarSuggestion', (error, avatars) ->
 		self.suggestions.set
@@ -12,6 +13,9 @@ Template.avatarPrompt.helpers
 	suggestions: ->
 		return Template.instance().suggestions.get()
 
+	upload: ->
+		return Template.instance().upload.get()
+
 
 Template.avatarPrompt.events
 	'click .select-service': (e) ->
@@ -23,5 +27,6 @@ Template.avatarPrompt.events
 			reader = new FileReader()
 			reader.readAsDataURL(blob)
 			reader.onloadend = ->
-				Meteor.call 'setAvatarFromService', reader.result, 'upload', ->
-					console.log arguments
\ No newline at end of file
+				template.upload.set
+					service: 'upload'
+					blob: reader.result

client/views/avatar/avatar.html

@@ -46,7 +46,18 @@
 								{{> avatarSuggestionLogin 'github'}}
 							{{/unless}}
 
-							<input type="file" class="myFileInput">
+							<div class="avatar-suggestion-item">
+								<div style="background-image: url({{upload.blob}});">
+								</div>
+								{{#with upload}}
+									<button type="button" class="button primary select-service">Use uploaded avatar</button>
+								{{/with}}
+								{{#unless upload}}
+									<button type="button" class="button primary">Select file
+										<input type="file" class="myFileInput">
+									</button>
+								{{/unless}}
+							</div>
 						{{else}}
 							{{_ "usernameRegistration.Loading_suggestion"}}
 						{{/if}}