image drop

public/app/app.js

@@ -12,8 +12,10 @@ angular.module('app', [
     'luticateUtils',
     'appSdk'
 ])
-    .config(['$stateProvider', '$urlRouterProvider',
-        function($stateProvider, $urlRouterProvider) {
+    .config(['$stateProvider', '$urlRouterProvider', '$compileProvider',
+        function($stateProvider, $urlRouterProvider, $compileProvider) {
+
+            $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|data):/);
 
             $stateProvider.state('root', {
                 abstract: true,
@@ -74,4 +76,8 @@ angular.module('app', [
             $rootScope.$on('$stateChangeSuccess', function (event, current, previous) {
                 $rootScope.title = current.title + " - 420px";
             });
-    }]);
+    }]).filter("toDataUrl", function() {
+    return function (data) {
+        return "data:image/*;base64," + btoa(data);
+    }
+});

public/app/controllers/upload.controller.js

@@ -1,4 +1,14 @@
 angular.module('app')
     .controller('UploadController', ['$scope', '$state', '$mdDialog',
         function($scope, $state, $mdDialog) {
+
+            $scope.image = null;
+
+            $scope.fileDropped = function(content, file)
+            {
+                $scope.image = {
+                    content: content,
+                    name: file.name
+                };
+            };
     }]);

public/app/index.html

@@ -60,6 +60,7 @@
     <script src="../sdk/sdk.js"></script>
 
     <!-- Directives -->
+    <script src="controllers/directives/dropzone.controller.js"></script>
 
     <!-- endbuild -->
 

public/app/less/app.less

@@ -39,4 +39,26 @@
 
 .strike {
   text-decoration: line-through;
+}
+
+@dropzone-min-size: 150px;
+
+@dropzone-max-size: 500px;
+
+.dropzone {
+  min-width: @dropzone-min-size;
+  min-height: @dropzone-min-size;
+  max-height: @dropzone-max-size + 2;
+  max-width: @dropzone-max-size + 2;
+  border: 1px solid #6e6e6e;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  img {
+    display: block;
+    max-width: @dropzone-max-size;
+    max-height: @dropzone-max-size;
+    width: auto;
+    height: auto;
+  }
 }

public/app/views/upload.html

@@ -1,5 +1,10 @@
 <div layout="column" layout-fill layout-align="top center">
-    <p>
-        Upload
-    </p>
+
+    <h1>Upload</h1>
+    <div image-dropzone="fileDropped(content, file)" class="dropzone">
+        <img ng-show="image != null" ng-src="{{ image.content | toDataUrl }}">
+        <p ng-hide="image != null">
+            Drag a file here
+        </p>
+    </div>
 </div>