Add import menu item to all addressBooks

js/components/addressBook/addressBook_controller.js

@@ -1,5 +1,5 @@
 angular.module('contactsApp')
-.controller('addressbookCtrl', function($scope, AddressBookService) {
+.controller('addressbookCtrl', function($scope, $document, AddressBookService) {
 	var ctrl = this;
 
 	ctrl.t = {
@@ -12,7 +12,8 @@ angular.module('contactsApp')
 		shareInputPlaceHolder: t('contacts', 'Share with users or groups'),
 		delete: t('contacts', 'Delete'),
 		more: t('contacts', 'More'),
-		canEdit: t('contacts', 'can edit')
+		canEdit: t('contacts', 'can edit'),
+		import: t('contacts', 'Import')
 	};
 
 	ctrl.showUrl = false;
@@ -152,6 +153,13 @@ angular.module('contactsApp')
 		});
 	};
 
+	ctrl.triggerImport = function() {
+		var element = $document.find('#contact-import-' + $scope.index);
+		if (element) {
+			element.click();
+		}
+	};
+
 	ctrl.download = function() {
 		window.open(ctrl.addressBook.url + '?export');
 	};

js/components/addressBook/addressBook_directive.js

@@ -1,6 +1,25 @@
 angular.module('contactsApp')
-.directive('addressbook', function() {
+.directive('addressbook', function(ContactService) {
 	return {
+		link: function(scope, element, attrs, ctrl) {
+			var input = element.find('input');
+			input.bind('change', function() {
+				angular.forEach(input.get(0).files, function(file) {
+					var reader = new FileReader();
+
+					reader.addEventListener('load', function () {
+						scope.$apply(function () {
+							ContactService.import.call(ContactService, reader.result, file.type, ctrl.addressBook);
+						});
+					}, false);
+
+					if (file) {
+						reader.readAsText(file);
+					}
+				});
+				input.get(0).value = '';
+			});
+		},
 		restrict: 'A', // has to be an attribute to work with core css
 		scope: {
 			index: '@'

templates/addressBook.html

@@ -43,6 +43,14 @@
 			</button>
 		</li>
 
+		<li>
+      <button	ng-click="ctrl.triggerImport()">
+				<span class="icon-upload svg"></span>
+				<span>{{ctrl.t.import}}</span>
+			</button>
+      <input type="file" id="contact-import-{{index}}" class="hidden-visually" multiple/>
+		</li>
+
 		<li>
 			<button	ng-click="ctrl.deleteAddressBook()">
 				<span class="icon-delete svg"></span>