jefersondaniel/angular-multiple-image-upload.js

## angular-multiple-image-upload.js
angular.module(
  'angularMultipleImageUpload',
  [
    'angularFileUpload'
  ]
)
.directive(
  'ngMultipleImageUpload',
  function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      template: '<div ng-repeat="src in srcList"><img class="ng-image-uploader-thumb" ng-src="{{src}}"/></div><ng-transclude></ng-transclude><div id="inputContainer" style="width:32px;height:32px;overflow:hidden;"><input style="position:relative;left:-150px;cursor:pointer;opacity:0.1;color:white;" type="file" nv-file-select uploader="uploader"/></div>',
      link: function(scope, element, attr) {
        var placeholder = element.find('div');
        var inputContainer = element.find('input').parent();

        placeholder.on('mousemove', function(e) {
          inputContainer.css({
            position: 'fixed',
            left: (e.pageX - window.pageXOffset - 16) + 'px',
            top: (e.pageY - window.pageYOffset - 5) + 'px',
            'z-index': 100,
          });
        });
      },
      controller: function($scope, FileUploader) {
        var uploader = new FileUploader();
        $scope.srcList = [];

        $scope.onLoadFile = function(event) {
          $scope.$apply(function() {
            $scope.srcList.push(event.target.result);
          });
        };

        uploader.onAfterAddingFile = function(params) {
          var reader = new FileReader();
          reader.onload = $scope.onLoadFile;
          reader.readAsDataURL(params._file);
        }

        $scope.uploader = uploader;
      }
    };
  }
)
;

## bower.json
{
  "name": "ng-multiple-image-upload",
  "version": "1.0.0",
  "authors": [
    "Jeferson Daniel <jeferson.daniel412@gmail.com>"
  ],
  "description": "A module to handle multiple image uploads",
  "main": "angular-multiple-image-upload.js",
  "moduleType": [
    "es6",
    "node"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular-file-upload": "~1.1.5",
    "angular": "~1.3.15"
  },
  "devDependencies": {
    "angular-mocks": "~1.3.15"
  },
  "resolutions": {
    "angular": "~1.3.15"
  }
}

## example.html
<!DOCTYPE html>
<html ng-app="StarterApp">
<head>
  <title></title>
  <style>
    .ng-image-uploader-thumb {
      background-color: #ddd;
      border-radius: 4px;
      color: #aaa;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      height: 140px;
      line-height: 140px;
      text-align: center;
      width: 140px;
      float: left;
      max-height: 140px;
      max-width: 140px;
      margin-right: 15px;
      border: 1px solid #ddd;
    }
  </style>
</head>
<body ng-controller="MainController as vm">
  <ng-multiple-image-upload model="vm.images">
    <div class="ng-image-uploader-thumb">
      Click to upload
    </div>
  </ng-multiple-image-upload>
</body>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-file-upload/angular-file-upload.min.js"></script>
<script src="angular-multiple-image-upload.js"></script>
<script>
  angular.module('StarterApp', [
    'angularMultipleImageUpload'
  ])
  .controller('MainController', function() {
    var vm = this;
    vm.images = [];
  })
  ;
</script>
</html>
	angular.module(
	'angularMultipleImageUpload',
	[
	'angularFileUpload'
	]
	)
	.directive(
	'ngMultipleImageUpload',
	function() {
	return {
	restrict: 'E',
	transclude: true,
	scope: {},
	template: '<div ng-repeat="src in srcList"><img class="ng-image-uploader-thumb" ng-src="{{src}}"/></div><ng-transclude></ng-transclude><div id="inputContainer" style="width:32px;height:32px;overflow:hidden;"><input style="position:relative;left:-150px;cursor:pointer;opacity:0.1;color:white;" type="file" nv-file-select uploader="uploader"/></div>',
	link: function(scope, element, attr) {
	var placeholder = element.find('div');
	var inputContainer = element.find('input').parent();

	placeholder.on('mousemove', function(e) {
	inputContainer.css({
	position: 'fixed',
	left: (e.pageX - window.pageXOffset - 16) + 'px',
	top: (e.pageY - window.pageYOffset - 5) + 'px',
	'z-index': 100,
	});
	});
	},
	controller: function($scope, FileUploader) {
	var uploader = new FileUploader();
	$scope.srcList = [];

	$scope.onLoadFile = function(event) {
	$scope.$apply(function() {
	$scope.srcList.push(event.target.result);
	});
	};

	uploader.onAfterAddingFile = function(params) {
	var reader = new FileReader();
	reader.onload = $scope.onLoadFile;
	reader.readAsDataURL(params._file);
	}

	$scope.uploader = uploader;
	}
	};
	}
	)
	;
	{
	"name": "ng-multiple-image-upload",
	"version": "1.0.0",
	"authors": [
	"Jeferson Daniel <jeferson.daniel412@gmail.com>"
	],
	"description": "A module to handle multiple image uploads",
	"main": "angular-multiple-image-upload.js",
	"moduleType": [
	"es6",
	"node"
	],
	"license": "MIT",
	"ignore": [
	"*/.",
	"node_modules",
	"bower_components",
	"test",
	"tests"
	],
	"dependencies": {
	"angular-file-upload": "~1.1.5",
	"angular": "~1.3.15"
	},
	"devDependencies": {
	"angular-mocks": "~1.3.15"
	},
	"resolutions": {
	"angular": "~1.3.15"
	}
	}
	<!DOCTYPE html>
	<html ng-app="StarterApp">
	<head>
	<title></title>
	<style>
	.ng-image-uploader-thumb {
	background-color: #ddd;
	border-radius: 4px;
	color: #aaa;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	height: 140px;
	line-height: 140px;
	text-align: center;
	width: 140px;
	float: left;
	max-height: 140px;
	max-width: 140px;
	margin-right: 15px;
	border: 1px solid #ddd;
	}
	</style>
	</head>
	<body ng-controller="MainController as vm">
	<ng-multiple-image-upload model="vm.images">
	<div class="ng-image-uploader-thumb">
	Click to upload
	</div>
	</ng-multiple-image-upload>
	</body>
	<script src="bower_components/angular/angular.min.js"></script>
	<script src="bower_components/angular-file-upload/angular-file-upload.min.js"></script>
	<script src="angular-multiple-image-upload.js"></script>
	<script>
	angular.module('StarterApp', [
	'angularMultipleImageUpload'
	])
	.controller('MainController', function() {
	var vm = this;
	vm.images = [];
	})
	;
	</script>
	</html>