From 28566243469fad7a1b8a01f2867dbc0235e2d6d4 Mon Sep 17 00:00:00 2001
From: epicleptico <alfixos@gmail.com>
Date: Tue, 3 Mar 2015 11:52:07 +0100
Subject: [PATCH 1/2] Set up test environment and added tests

---
 .gitignore                                  |   1 +
 Gruntfile.js                                |  30 +-
 bower.json                                  |   6 +-
 karma.conf.js                               |  22 ++
 package.json                                |  11 +-
 src/js/plupload-angular-directive.js        |   3 +-
 tests/js/plupload-angular-directive.spec.js | 406 ++++++++++++++++++++
 tests/mocks/plUploader.mock.js              |  65 ++++
 8 files changed, 538 insertions(+), 6 deletions(-)
 create mode 100644 karma.conf.js
 create mode 100644 tests/js/plupload-angular-directive.spec.js
 create mode 100644 tests/mocks/plUploader.mock.js

diff --git a/.gitignore b/.gitignore
index 3c3629e..a088b6f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 node_modules
+bower_components
diff --git a/Gruntfile.js b/Gruntfile.js
index 8ba670e..efa3870 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -22,7 +22,7 @@ module.exports = function(grunt) {
       }
     },
     jshint: {
-      files: ['Gruntfile.js', 'src/**/*.js', 'src/**/**/*.js'],
+      files: ['Gruntfile.js', 'src/js/**/*.js'],
       options: {
         // options here to override JSHint defaults
         globals: {
@@ -40,6 +40,28 @@ module.exports = function(grunt) {
           {expand: false, src: ['src/lib/plupload/plupload.silverlight.xap'], dest: 'dist/plupload.silverlight.xap'},
         ]
       }
+    },
+    karma: {
+      once: {
+        configFile: 'karma.conf.js',
+        singleRun: true,
+        browsers: [
+          //'Chrome',
+          //'Firefox',
+          'PhantomJS'
+        ]
+      },
+      watch: {
+        configFile: 'karma.conf.js',
+        background: false,
+        autoWatch: true,
+        singleRun: false,
+        browsers: [
+          //'Chrome',
+          //'Firefox',
+          'PhantomJS'
+        ]
+      }
     }
     });
 
@@ -47,9 +69,11 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-karma');
+
 
-  grunt.registerTask('test', ['jshint']);
+  grunt.registerTask('test', ['jshint', 'karma:once']);
 
-  grunt.registerTask('build', ['jshint', 'concat', 'uglify','copy']);
+  grunt.registerTask('build', ['jshint', 'karma:once', 'concat', 'uglify','copy']);
 
 };
\ No newline at end of file
diff --git a/bower.json b/bower.json
index 88a5af1..029c015 100644
--- a/bower.json
+++ b/bower.json
@@ -24,5 +24,9 @@
     "bower_components",
     "test",
     "tests"
-  ]
+  ],
+  "dependencies": {
+    "angular": "~1.3.12",
+    "angular-mocks" : "~1.3.12"
+  }
 }
diff --git a/karma.conf.js b/karma.conf.js
new file mode 100644
index 0000000..3e57d9a
--- /dev/null
+++ b/karma.conf.js
@@ -0,0 +1,22 @@
+'use strict';
+
+module.exports = function(config) {
+ config.set({
+   basePath: '',
+   frameworks: ['jasmine'],
+   logLevel: config.LOG_INFO,
+   colors: true,
+   runnerPort: 9100,
+   port: 9018,
+   reporters: ['progress'],
+   preprocessors: {},
+   files: [
+     'bower_components/angular/angular.js',
+     'bower_components/angular-mocks/angular-mocks.js',
+     'tests/mocks/plUploader.mock.js',
+     'src/lib/plupload/plupload.full.js',
+     'src/js/plupload-angular-directive.js',
+     'tests/js/plupload-angular-directive.spec.js'
+   ]
+ });
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index a3ba193..05ba832 100644
--- a/package.json
+++ b/package.json
@@ -7,11 +7,20 @@
   ],
   "dependencies": {},
   "devDependencies": {
+    "coveralls": "^2.11.2",
     "grunt": "^0.4.5",
     "grunt-contrib-concat": "^0.4.0",
     "grunt-contrib-copy": "^0.5.0",
     "grunt-contrib-jshint": "^0.10.0",
-    "grunt-contrib-uglify": "^0.4.0"
+    "grunt-contrib-uglify": "^0.4.0",
+    "grunt-karma": "^0.9.0",
+    "jasmine-core": "^2.1.2",
+    "karma": "^0.12.26",
+    "karma-coverage": "^0.2.6",
+    "karma-chrome-launcher": "^0.1.5",
+    "karma-firefox-launcher": "^0.1.3",
+    "karma-jasmine": "^0.3.1",
+    "karma-phantomjs-launcher": "^0.1.4"
   },
   "engine": "node >= 0.4.1"
 }
diff --git a/src/js/plupload-angular-directive.js b/src/js/plupload-angular-directive.js
index 5d2e80b..b88eedb 100755
--- a/src/js/plupload-angular-directive.js
+++ b/src/js/plupload-angular-directive.js
@@ -1,6 +1,7 @@
 'use strict';
 
 angular.module('plupload.directive', [])
+  .constant('plupload', plupload) //Needed for use as dependency for the directive plUpload
 	.provider('plUploadService', function() {
 
 		var config = {
@@ -29,7 +30,7 @@ angular.module('plupload.directive', [])
 		}];
 
 	})	
-	.directive('plUpload', ['$parse', '$log', 'plUploadService', function ($parse, $log, plUploadService) {
+	.directive('plUpload', ['$parse', '$log', 'plupload', 'plUploadService', function ($parse, $log, plupload, plUploadService) {
 		return {
 			restrict: 'A',
 			scope: {
diff --git a/tests/js/plupload-angular-directive.spec.js b/tests/js/plupload-angular-directive.spec.js
new file mode 100644
index 0000000..1fca632
--- /dev/null
+++ b/tests/js/plupload-angular-directive.spec.js
@@ -0,0 +1,406 @@
+describe('plupload-angular-directive', function(){
+
+  /*
+   * plUploadService tests
+   */
+  describe('service', function(){
+
+    beforeEach(module('plupload.directive', function(plUploadServiceProvider){
+      plUploadServiceProvider.setConfig('flashPath', 'plupload/flash.swf');
+      plUploadServiceProvider.setConfig('silverLightPath', 'plupload/silverlight.xap');
+      plUploadServiceProvider.setConfig('uploadPath', 'upload.php');
+    }));
+
+    var plUploadService;
+    beforeEach(inject(function(_plUploadService_){
+      plUploadService = _plUploadService_;
+    }));
+
+    describe('setConfig', function(){
+
+      it('can set values', function(){
+        plUploadService.setConfig('flashPath', 'anotherValue');
+        expect(plUploadService.getConfig('flashPath')).not.toBe('plupload/flash.swf');
+      });
+    });
+
+    describe('getConfig', function(){
+
+      it('can retrieve the config', function(){
+        expect(plUploadService.getConfig('flashPath')).toBe('plupload/flash.swf');
+        expect(plUploadService.getConfig('silverLightPath')).toBe('plupload/silverlight.xap');
+        expect(plUploadService.getConfig('uploadPath')).toBe('upload.php');
+      });
+
+    });
+
+  });
+
+  describe('directive', function(){
+
+    var $scope, $compile, $rootScope;
+
+    beforeEach(module('plupload.directive', function(plUploadServiceProvider, $provide){
+      plUploadServiceProvider.setConfig('flashPath', 'plupload/flash.swf');
+      plUploadServiceProvider.setConfig('silverLightPath', 'plupload/silverlight.xap');
+      plUploadServiceProvider.setConfig('uploadPath', 'upload.php');
+
+      //Mock the plupload
+      $provide.constant('plupload', PlUploadMock);
+    }));
+
+    beforeEach(inject(function(_$rootScope_, _$compile_){
+      $scope = _$rootScope_.$new();
+      $compile = _$compile_;
+      $rootScope = _$rootScope_;
+    }));
+
+    /**
+     * Fn that will help to create the element and compile into the scope
+     * @param attributes
+     */
+    var createAndCompile = function(attributes) {
+
+      var defaultAttributes = {
+        'pl-upload' : ''
+      };
+
+      attributes = angular.extend(defaultAttributes, attributes);
+
+      var element = angular.element('<button>').attr(attributes);
+
+      //Compile
+      element = $compile(element)($scope);
+
+      //Digest
+      $rootScope.$digest();
+
+      //Return the element
+      return element;
+    };
+
+    describe('settings', function(){
+
+      it('without additional arguments should set up default options', function(){
+
+        var jElement = createAndCompile();
+        var opts = PlUploadMock.last.options;
+        expect(opts.runtimes).toBe('html5,flash,silverlight');
+        expect(opts.browse_button).toBeDefined();
+        expect(typeof opts.browse_button == 'string').toBeTruthy();
+        expect(opts.browse_button.length).toBe(5);
+        expect(opts.multi_selection).toBeTruthy();
+        expect(opts.max_file_size).toBe('10mb');
+        expect(opts.url).toBe('upload.php');
+        expect(opts.flash_swf_url).toBe('plupload/flash.swf');
+        expect(opts.silverlight_xap_url).toBe('plupload/silverlight.xap');
+        expect(opts.filters).toBeDefined();
+        expect(opts.filters.length).toBe(1);
+        expect(opts.filters[0].title).toBe('Image files');
+        expect(opts.filters[0].extensions).toBe('jpg,jpeg,gif,png,tiff,pdf');
+        expect(opts.drop_element).not.toBeDefined();
+      });
+
+      it('id attribute should change default_button option', function(){
+        var jElement = createAndCompile({ id : 'element' });
+        var opts = PlUploadMock.last.options;
+        expect(opts.browse_button).toBe('element');
+      });
+
+      it('pl-max-file-size attribute must change max_file_size option', function(){
+        var jElement = createAndCompile({ 'pl-max-file-size' : '5mb' });
+        var opts = PlUploadMock.last.options;
+        expect(opts.max_file_size).toBe('5mb');
+      });
+
+      it('pl-url must change url option', function(){
+        var jElement = createAndCompile({ 'pl-url' : 'newRouteToUploadFiles' });
+        var opts = PlUploadMock.last.options;
+        expect(opts.url).toBe('newRouteToUploadFiles');
+      });
+
+      it('pl-flash-swf-url attribute must change flash_swf_url option', function(){
+        var jElement = createAndCompile({ 'pl-flash-swf-url' : 'newRouteToFlashPlugin' });
+        var opts = PlUploadMock.last.options;
+        expect(opts.flash_swf_url).toBe('newRouteToFlashPlugin');
+      });
+
+      it('pl-silverlight-xap-url attribute must change silverlight_xap_url option', function(){
+        var jElement = createAndCompile({ 'pl-silverlight-xap-url' : 'newRouteToXapPlugin' });
+        var opts = PlUploadMock.last.options;
+        expect(opts.silverlight_xap_url).toBe('newRouteToXapPlugin');
+      });
+
+      it('pl-filters-model attribute should change filters option', function(){
+        var jElement = createAndCompile({ 'pl-filters-model' : JSON.stringify([{title: 'Videos', extensions: 'mp4,qv,avi'}]) });
+        var opts = PlUploadMock.last.options;
+        expect(opts.filters.length).toBe(1);
+        expect(opts.filters[0].title).toBe('Videos');
+        expect(opts.filters[0].extensions).toBe('mp4,qv,avi');
+      });
+
+      it('pl-multi-params-model attribute binded to scope should change multipart_params option', function(){
+        $scope.myParamsModel = 'wonderfulParams';
+        var jElement = createAndCompile({'pl-multi-params-model': 'myParamsModel'});
+        var opts = PlUploadMock.last.options;
+        expect(opts.multipart_params).toBe('wonderfulParams');
+      });
+
+      it('pl-instance attribute binded to scope should put the Uploader on it', function(){
+        $scope.uploaderInstance = {};
+        var jElement = createAndCompile({'pl-instance': 'uploaderInstance'});
+        expect($scope.uploaderInstance).toBe(PlUploadMock.last);
+      });
+    });
+
+    describe('On Error event', function(){
+
+      it('on-file-error attribute added should call to scope function', function(){
+        $scope.onError = function(){};
+        spyOn($scope, 'onError');
+        createAndCompile({'on-file-error': 'onError()'});
+        var instance = PlUploadMock.last;
+
+        var errorObj = {
+          file: {
+            name: 'someFile.txt'
+          },
+          message: 'random error'
+        };
+
+        instance.trigger('Error', [instance, errorObj]);
+        expect($scope.onError).toHaveBeenCalled();
+      });
+
+      it('should log with specified message', inject(function($log){
+        spyOn($log, 'error');
+        createAndCompile();
+        var instance = PlUploadMock.last;
+
+
+        //Case 1: error object with file
+        var errorObj = {
+          file: {
+            name: 'someFile.txt'
+          },
+          message: 'random error'
+        };
+
+        instance.trigger('Error', [instance, errorObj]);
+        var expectedErrorMessage = 'Cannot upload, error: ' + errorObj.message + ", File: " + errorObj.file.name;
+        expect($log.error).toHaveBeenCalledWith(expectedErrorMessage);
+
+
+        //Case 2: error with object without file
+        var errorObj = {
+          message: 'random error'
+        };
+        instance.trigger('Error', [instance, errorObj]);
+        expectedErrorMessage = 'Cannot upload, error: ' + errorObj.message;
+        expect($log.error).toHaveBeenCalledWith(expectedErrorMessage);
+      }));
+
+      it('should call to instance refresh', function(){
+        createAndCompile();
+        var instance = PlUploadMock.last;
+        spyOn(instance, 'refresh');
+
+        var errorObj = {
+          file: {
+            name: 'someFile.txt'
+          },
+          message: 'random error'
+        };
+
+        instance.trigger('Error', [instance, errorObj]);
+        expect(instance.refresh).toHaveBeenCalled();
+      });
+
+    });
+
+    describe('On FilesAdded event', function(){
+
+      it('pl-auto-upload attribute =  true must call to instance.start', function(){
+        createAndCompile({'pl-auto-upload': 'true'});
+        var instance = PlUploadMock.last;
+        spyOn(instance, 'start');
+
+        var files = [];
+
+        instance.trigger('FilesAdded', [instance, files]);
+        expect(instance.start).toHaveBeenCalled();
+      });
+
+      it('pl-auto-upload attribute = false must not call to instance.start', function(){
+        createAndCompile({'pl-auto-upload': 'false'});
+        var instance = PlUploadMock.last;
+        spyOn(instance, 'start');
+
+        var files = [];
+
+        instance.trigger('FilesAdded', [instance, files]);
+        expect(instance.start).not.toHaveBeenCalled();
+      });
+
+      it('on-file-added attribute must call to scope function', function(){
+        $scope.fileAdded = function(){};
+        spyOn($scope, 'fileAdded');
+        createAndCompile({'on-file-added': 'fileAdded()'});
+        var instance = PlUploadMock.last;
+
+        var files = [];
+
+        instance.trigger('FilesAdded', [instance, files]);
+        expect($scope.fileAdded).toHaveBeenCalled();
+      });
+
+      it('pl-files-model attribute must add files to scope attribute', function(){
+        $scope.files = [];
+        createAndCompile({'pl-files-model': 'files'});
+        var instance = PlUploadMock.last;
+
+        var files = [
+          {name: 'file1'},
+          {name: 'file2'},
+          {name: 'file3'},
+          {name: 'file4'},
+        ];
+
+        instance.trigger('FilesAdded', [instance, files]);
+        expect($scope.files.length).toBe(4);
+        expect($scope.files[0]).toBe(files[0]);
+        expect($scope.files[1]).toBe(files[1]);
+        expect($scope.files[2]).toBe(files[2]);
+        expect($scope.files[3]).toBe(files[3]);
+      });
+    });
+
+    describe('On BeforeUpload event', function(){
+
+      it('on-before-upload attribute must call to scope function with $file param', function(){
+        $scope.before = function($file){};
+        spyOn($scope, 'before');
+        createAndCompile({'on-before-upload': 'before($file)'});
+        var instance = PlUploadMock.last;
+
+        var file = {
+          name : 'helloWorld.txt'
+        };
+
+        instance.trigger('BeforeUpload', [instance, file]);
+        expect($scope.before).toHaveBeenCalledWith(file);
+      });
+    });
+
+    describe('On FileUploaded event', function(){
+
+      it('pl-files-model attribute not set and on-file-uploaded set should call scope Fn', function(){
+        $scope.uploaded = function($response) {};
+        spyOn($scope, 'uploaded');
+        createAndCompile({'on-file-uploaded': 'uploaded($response)'});
+        var instance = PlUploadMock.last;
+
+        var file = {
+          name: 'randomOrg.txt'
+        };
+
+        var serverResponse = {
+          response : JSON.stringify({
+            'isAllOk' : 'NotReally'
+          })
+        };
+
+        instance.trigger('FileUploaded', [instance, file, serverResponse]);
+        expect($scope.uploaded).toHaveBeenCalledWith(serverResponse);
+      });
+
+      //TODO this section need to be refactored first before tests can be done. I exactly don't know what atm does and why
+      describe('pl-files-model attribute in on', function(){
+
+      });
+    });
+
+    describe('On UploadProgress event', function(){
+
+      it('pl-progress-model attribute not in, don\'t do nothing', function(){
+        createAndCompile();
+        var instance = PlUploadMock.last;
+
+        var file = {
+          name : 'randomFile.txt',
+          percent: 100
+        };
+
+        instance.trigger('UploadProgress', [instance, file]);
+      });
+
+      describe('pl-progress-model attribute specified', function(){
+
+        it('on-file-progress attribute specified, should call to scope Fn', function(){
+          $scope.progress = -1;
+          $scope.onProgress = function(){};
+          spyOn($scope, 'onProgress');
+
+          createAndCompile({'pl-progress-model': 'progress', 'on-file-progress': 'onProgress()'});
+          var instance = PlUploadMock.last;
+
+          var file = {
+            name : 'randomFile.txt',
+            percent: 100
+          };
+
+          instance.trigger('UploadProgress', [instance, file]);
+          expect($scope.onProgress).toHaveBeenCalled();
+
+        });
+
+        it('without pl-files-model attribute scope value should be same as file percent', function(){
+          $scope.progress = -1;
+          createAndCompile({'pl-progress-model': 'progress'});
+
+          var instance = PlUploadMock.last;
+
+
+          //Test 1
+          var file = {
+            name : 'randomFile.txt',
+            percent: 10
+          };
+
+          instance.trigger('UploadProgress', [instance, file]);
+          expect($scope.progress).toBe(file.percent);
+
+
+          file.percent = 75;
+          instance.trigger('UploadProgress', [instance, file]);
+          expect($scope.progress).toBe(file.percent);
+        });
+
+        it('with pl-files-model attribute scope value must be the average percentages', function(){
+          $scope.progress = -1;
+          $scope.files = [
+            {percent: 0},
+            {percent: 75},
+            {percent: 25},
+            {percent: 50}
+          ];
+          createAndCompile({'pl-progress-model': 'progress', 'pl-files-model': 'files'});
+
+          var instance = PlUploadMock.last;
+
+          //Test 1
+          $scope.files[0].percent = 25;
+          instance.trigger('UploadProgress', [instance, $scope.files[0]]);
+          expect($scope.progress).toBe(43.75);
+
+          //Test 2
+          $scope.files[0].percent = 75;
+          instance.trigger('UploadProgress', [instance, $scope.files[0]]);
+          expect($scope.progress).toBe(56.25);
+
+        });
+      });
+
+    });
+  });
+});
\ No newline at end of file
diff --git a/tests/mocks/plUploader.mock.js b/tests/mocks/plUploader.mock.js
new file mode 100644
index 0000000..cb81b31
--- /dev/null
+++ b/tests/mocks/plUploader.mock.js
@@ -0,0 +1,65 @@
+var PlUploadMock = new (function (){
+  this.last = null;
+
+  /**
+   * Setting up the mock
+   * @type {UploaderMock}
+   */
+  this.Uploader = UploaderMock;
+
+})();
+
+/**
+ * Mocks the Uploader
+ * @param options
+ * @constructor
+ */
+function UploaderMock(options) {
+
+  PlUploadMock.last = this;
+
+  //Store options
+  this.options = options;
+
+  //Binds obj
+  this.binds = {};
+
+  //Settings mock
+  this.settings = {
+    headers : {}
+  };
+
+
+  /**
+   * mocked init Fn
+   */
+  this.init = function(){};
+
+  /**
+   * Mocked start Fn
+   */
+  this.start = function(){};
+
+  /**
+   * Mock refresh
+   */
+  this.refresh = function(){};
+
+  /**
+   * Binds a Fn to the event
+   * @param event
+   * @param fn
+   */
+  this.bind = function(event, fn) {
+    this.binds[event] = fn;
+  };
+
+  /**
+   * Triggers a Fn on the mock
+   * @param event
+   * @param params
+   */
+  this.trigger = function(event, params) {
+    this.binds[event].apply(this, params);
+  };
+}
\ No newline at end of file

From 61df6a98b707629678f109831c0c2353fb6c8723 Mon Sep 17 00:00:00 2001
From: epicleptico <alfixos@gmail.com>
Date: Tue, 3 Mar 2015 11:54:19 +0100
Subject: [PATCH 2/2] JSHint fix

---
 src/js/plupload-angular-directive.js | 440 ++++++++++++++-------------
 1 file changed, 221 insertions(+), 219 deletions(-)

diff --git a/src/js/plupload-angular-directive.js b/src/js/plupload-angular-directive.js
index b88eedb..2e527c6 100755
--- a/src/js/plupload-angular-directive.js
+++ b/src/js/plupload-angular-directive.js
@@ -1,222 +1,224 @@
-'use strict';
-
-angular.module('plupload.directive', [])
-  .constant('plupload', plupload) //Needed for use as dependency for the directive plUpload
-	.provider('plUploadService', function() {
-
-		var config = {
-			flashPath: 'bower_components/plupload-angular-directive/dist/plupload.flash.swf',
-			silverLightPath: 'bower_components/plupload-angular-directive/dist/plupload.silverlight.xap',
-			uploadPath: 'upload.php'
-		};
-
-		this.setConfig = function(key, val) {
-	        	config[key] = val;
-	        };
-
-	    this.getConfig =  function(key) {
-	        	return config[key];
-	        };
-
-	    var that = this;
-
-	    this.$get = [function(){
-
-		    return {
-		        getConfig: that.getConfig,
-		        setConfig: that.setConfig
-		    };
-
-		}];
-
-	})	
-	.directive('plUpload', ['$parse', '$log', 'plupload', 'plUploadService', function ($parse, $log, plupload, plUploadService) {
-		return {
-			restrict: 'A',
-			scope: {
-				'plProgressModel': '=',
-				'plFilesModel': '=',
-				'plFiltersModel': '=',
-				'plMultiParamsModel':'=',
-				'plInstance': '='
-			},
-			link: function (scope, iElement, iAttrs) {
-
-				scope.randomString = function(len, charSet) {
-					charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-					var randomString = '';
-					for (var i = 0; i < len; i++) {
-						var randomPoz = Math.floor(Math.random() * charSet.length);
-						randomString += charSet.substring(randomPoz,randomPoz+1);
-					}
-					return randomString;
-				}
-
-				if(!iAttrs.id){
-					var randomValue = scope.randomString(5);
-					iAttrs.$set('id',randomValue);	
-				}
-				if(!iAttrs.plAutoUpload){
-					iAttrs.$set('plAutoUpload','true');
-				}
-				if(!iAttrs.plMaxFileSize){
-					iAttrs.$set('plMaxFileSize','10mb');
-				}
-				if(!iAttrs.plUrl){
-					iAttrs.$set('plUrl', plUploadService.getConfig('uploadPath'));
-				}
-				if(!iAttrs.plFlashSwfUrl){
-					iAttrs.$set('plFlashSwfUrl', plUploadService.getConfig('flashPath'));
-				}
-				if(!iAttrs.plSilverlightXapUrl){
-					iAttrs.$set('plSilverlightXapUrl', plUploadService.getConfig('silverLightPath'));
-				}
-				if(typeof scope.plFiltersModel=="undefined"){
-					scope.filters = [{title : "Image files", extensions : "jpg,jpeg,gif,png,tiff,pdf"}];
-					//alert('sf');
-				} else{
-					scope.filters = scope.plFiltersModel;
-				}
-
-
-				var options = {
-					runtimes : 'html5,flash,silverlight',
-						browse_button : iAttrs.id,
-						multi_selection: true,
-				//		container : 'abc',
-						max_file_size : iAttrs.plMaxFileSize,
-						url : iAttrs.plUrl,
-						flash_swf_url : iAttrs.plFlashSwfUrl,
-						silverlight_xap_url : iAttrs.plSilverlightXapUrl,
-						filters : scope.filters,
-						drop_element: iAttrs.plDropElement
-				}
-
-
-				if(scope.plMultiParamsModel){
-					options.multipart_params = scope.plMultiParamsModel;
-				}
-
-
-				var uploader = new plupload.Uploader(options);
-
-				uploader.settings.headers = plUploadService.getConfig('headers');
-
-				uploader.init();
-
-				uploader.bind('Error', function(up, err) {
-					if(iAttrs.onFileError){
-						scope.$parent.$apply(iAttrs.onFileError);
-					} 
-					
-					$log.error("Cannot upload, error: " + err.message + (err.file ? ", File: " + err.file.name : "") + "");
-
-					up.refresh(); // Reposition Flash/Silverlight
- 				});
-
-				uploader.bind('FilesAdded', function(up,files) {
-					//uploader.start();
-					scope.$apply(function() {
-						if(iAttrs.plFilesModel) {
-							angular.forEach(files, function(file,key) {
-								if (!scope.plFilesModel) scope.plFilesModel=[];
-								scope.plFilesModel.push(file);
-							});
-						}
-							
-						if(iAttrs.onFileAdded){
-							scope.$parent.$eval(iAttrs.onFileAdded);
-						}
-					});
-
-					if(iAttrs.plAutoUpload=="true"){
-						uploader.start();
-					}
-				});
-				
-                uploader.bind('BeforeUpload', function(up, file) {
-                    if(iAttrs.onBeforeUpload){
-                        var fn = $parse(iAttrs.onBeforeUpload);
-               			fn(scope.$parent, {$file:file});
+(function() {
+  'use strict';
+
+  angular.module('plupload.directive', [])
+    .constant('plupload', plupload) //Needed for use as dependency for the directive plUpload
+    .provider('plUploadService', function() {
+
+      var config = {
+        flashPath: 'bower_components/plupload-angular-directive/dist/plupload.flash.swf',
+        silverLightPath: 'bower_components/plupload-angular-directive/dist/plupload.silverlight.xap',
+        uploadPath: 'upload.php'
+      };
+
+      this.setConfig = function(key, val) {
+        config[key] = val;
+      };
+
+      this.getConfig = function(key) {
+        return config[key];
+      };
+
+      var that = this;
+
+      this.$get = [function() {
+
+        return {
+          getConfig: that.getConfig,
+          setConfig: that.setConfig
+        };
+
+      }];
+
+    })
+    .directive('plUpload', ['$parse', '$log', 'plupload', 'plUploadService', function($parse, $log, plupload, plUploadService) {
+      return {
+        restrict: 'A',
+        scope: {
+          'plProgressModel': '=',
+          'plFilesModel': '=',
+          'plFiltersModel': '=',
+          'plMultiParamsModel': '=',
+          'plInstance': '='
+        },
+        link: function(scope, iElement, iAttrs) {
+
+          scope.randomString = function(len, charSet) {
+            charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+            var randomString = '';
+            for(var i = 0; i < len; i++) {
+              var randomPoz = Math.floor(Math.random() * charSet.length);
+              randomString += charSet.substring(randomPoz, randomPoz + 1);
+            }
+            return randomString;
+          };
+
+          if(!iAttrs.id) {
+            var randomValue = scope.randomString(5);
+            iAttrs.$set('id', randomValue);
+          }
+          if(!iAttrs.plAutoUpload) {
+            iAttrs.$set('plAutoUpload', 'true');
+          }
+          if(!iAttrs.plMaxFileSize) {
+            iAttrs.$set('plMaxFileSize', '10mb');
+          }
+          if(!iAttrs.plUrl) {
+            iAttrs.$set('plUrl', plUploadService.getConfig('uploadPath'));
+          }
+          if(!iAttrs.plFlashSwfUrl) {
+            iAttrs.$set('plFlashSwfUrl', plUploadService.getConfig('flashPath'));
+          }
+          if(!iAttrs.plSilverlightXapUrl) {
+            iAttrs.$set('plSilverlightXapUrl', plUploadService.getConfig('silverLightPath'));
+          }
+          if(typeof scope.plFiltersModel == "undefined") {
+            scope.filters = [{title: "Image files", extensions: "jpg,jpeg,gif,png,tiff,pdf"}];
+            //alert('sf');
+          } else {
+            scope.filters = scope.plFiltersModel;
+          }
+
+
+          var options = {
+            runtimes: 'html5,flash,silverlight',
+            browse_button: iAttrs.id,
+            multi_selection: true,
+            //		container : 'abc',
+            max_file_size: iAttrs.plMaxFileSize,
+            url: iAttrs.plUrl,
+            flash_swf_url: iAttrs.plFlashSwfUrl,
+            silverlight_xap_url: iAttrs.plSilverlightXapUrl,
+            filters: scope.filters,
+            drop_element: iAttrs.plDropElement
+          };
+
+
+          if(scope.plMultiParamsModel) {
+            options.multipart_params = scope.plMultiParamsModel;
+          }
+
+
+          var uploader = new plupload.Uploader(options);
+
+          uploader.settings.headers = plUploadService.getConfig('headers');
+
+          uploader.init();
+
+          uploader.bind('Error', function(up, err) {
+            if(iAttrs.onFileError) {
+              scope.$parent.$apply(iAttrs.onFileError);
+            }
+
+            $log.error("Cannot upload, error: " + err.message + (err.file ? ", File: " + err.file.name : "") + "");
+
+            up.refresh(); // Reposition Flash/Silverlight
+          });
+
+          uploader.bind('FilesAdded', function(up, files) {
+            //uploader.start();
+            scope.$apply(function() {
+              if(iAttrs.plFilesModel) {
+                angular.forEach(files, function(file, key) {
+                  if(!scope.plFilesModel) scope.plFilesModel = [];
+                  scope.plFilesModel.push(file);
+                });
+              }
+
+              if(iAttrs.onFileAdded) {
+                scope.$parent.$eval(iAttrs.onFileAdded);
+              }
+            });
+
+            if(iAttrs.plAutoUpload == "true") {
+              uploader.start();
+            }
+          });
+
+          uploader.bind('BeforeUpload', function(up, file) {
+            if(iAttrs.onBeforeUpload) {
+              var fn = $parse(iAttrs.onBeforeUpload);
+              fn(scope.$parent, {$file: file});
+            }
+          });
+
+          uploader.bind('FileUploaded', function(up, file, res) {
+            //We are going to make some refactor here.
+            //The idea behind is always update files with the server response value
+            //And also launch the eventi if neeed
+
+            //If we have the model...
+            if(iAttrs.plFilesModel) {
+              //Apply on scope...
+              scope.$apply(function() {
+
+                //All files are uploaded?
+                scope.allUploaded = false;
+
+                angular.forEach(scope.plFilesModel, function($file, key) {
+
+                  //Bug FIX, this logic will set allUploaded right
+                  if(file.percent != 100) {
+                    scope.allUploaded = false;
+                  } else if(file.id == $file.id) { //If the file is the same that we are reciving...
+                    //Set response on the file
+                    $file.response = JSON.parse(res.response);
+
+                    //Need throw event? throw it
+                    if(iAttrs.onFileUploaded) {
+                      var fn = $parse(iAttrs.onFileUploaded);
+                      fn(scope.$parent, {$response: res});
                     }
+                  }
+
                 });
+              });
+            }
+            //We doesn't have model but we have the event
+            else if(!iAttrs.plFilesModel && iAttrs.onFileUploaded) {
+              var fn = $parse(iAttrs.onFileUploaded);
+              scope.$apply(function() {
+                fn(scope.$parent, {$response: res});
+              });
+            }
+          });
+
+          uploader.bind('UploadProgress', function(up, file) {
+            if(!iAttrs.plProgressModel) {
+              return;
+            }
+
+            if(iAttrs.plFilesModel) {
+              scope.$apply(function() {
+                scope.sum = 0;
+
+                angular.forEach(scope.plFilesModel, function(file, key) {
+                  scope.sum = scope.sum + file.percent;
+                });
+
+                scope.plProgressModel = scope.sum / scope.plFilesModel.length;
+              });
+            } else {
+              scope.$apply(function() {
+                scope.plProgressModel = file.percent;
+              });
+            }
+
+
+            if(iAttrs.onFileProgress) {
+              scope.$parent.$eval(iAttrs.onFileProgress);
+            }
+          });
+
+          if(iAttrs.plInstance) {
+            scope.plInstance = uploader;
+          }
+
+          scope.$on("$destroy", function() {
+            uploader.destroy();
+          });
 
-				uploader.bind('FileUploaded', function(up, file, res) {
-					    //We are going to make some refactor here.
-			                    //The idea behind is always update files with the server response value
-			                    //And also launch the eventi if neeed
-			
-			                    //If we have the model...
-			                    if(iAttrs.plFilesModel) {
-			                        //Apply on scope...
-			                        scope.$apply(function() {
-			
-			                            //All files are uploaded?
-			                            scope.allUploaded = false;
-			
-			                            angular.forEach(scope.plFilesModel, function($file, key) {
-			
-			                                //Bug FIX, this logic will set allUploaded right
-			                                if(file.percent != 100) {
-			                                    scope.allUploaded = false;
-			                                } else if(file.id == $file.id) { //If the file is the same that we are reciving...
-			                                    //Set response on the file
-			                                    $file.response = JSON.parse(res.response);
-			
-			                                    //Need throw event? throw it
-			                                    if(iAttrs.onFileUploaded) {
-			                                        var fn = $parse(iAttrs.onFileUploaded);
-			                                        fn(scope.$parent, {$response:res});
-			                                    }
-			                                }
-			
-			                            });
-			                        });
-			                    }
-			                    //We doesn't have model but we have the event
-			                    else if(!iAttrs.plFilesModel && iAttrs.onFileUploaded) {
-			                        var fn = $parse(iAttrs.onFileUploaded);
-			                        scope.$apply(function(){
-			                            fn(scope.$parent, {$response:res});
-			                        });
-			                    }
-				});
-
-				uploader.bind('UploadProgress',function(up,file){
-					if(!iAttrs.plProgressModel){
-						return;
-					}
-					
-					if(iAttrs.plFilesModel){
-						scope.$apply(function() {
-							scope.sum = 0;
-
-							angular.forEach(scope.plFilesModel, function(file,key) {
-								scope.sum = scope.sum + file.percent;
-							});
-
-							scope.plProgressModel = scope.sum/scope.plFilesModel.length;
-						});
-					} else {
-						scope.$apply(function() {
-							scope.plProgressModel = file.percent;
-						});
-					}
-
-
-					if(iAttrs.onFileProgress){
-						scope.$parent.$eval(iAttrs.onFileProgress);
-					}
-				});
-
-				if(iAttrs.plInstance){
-					scope.plInstance = uploader;	
-				}
-
-				scope.$on("$destroy", function(){
-                    			uploader.destroy();
-                		});
-                
-			}
-		};
-	}])
+        }
+      };
+    }]);
+})();
\ No newline at end of file