소스 검색

image drop

develop
Robin Thoni 8 년 전
부모
커밋
a5387c9700
5개의 변경된 파일50개의 추가작업 그리고 6개의 파일을 삭제
  1. 9
    3
      public/app/app.js
  2. 10
    0
      public/app/controllers/upload.controller.js
  3. 1
    0
      public/app/index.html
  4. 22
    0
      public/app/less/app.less
  5. 8
    3
      public/app/views/upload.html

+ 9
- 3
public/app/app.js 파일 보기

@@ -12,8 +12,10 @@ angular.module('app', [
12 12
     'luticateUtils',
13 13
     'appSdk'
14 14
 ])
15
-    .config(['$stateProvider', '$urlRouterProvider',
16
-        function($stateProvider, $urlRouterProvider) {
15
+    .config(['$stateProvider', '$urlRouterProvider', '$compileProvider',
16
+        function($stateProvider, $urlRouterProvider, $compileProvider) {
17
+
18
+            $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|data):/);
17 19
 
18 20
             $stateProvider.state('root', {
19 21
                 abstract: true,
@@ -74,4 +76,8 @@ angular.module('app', [
74 76
             $rootScope.$on('$stateChangeSuccess', function (event, current, previous) {
75 77
                 $rootScope.title = current.title + " - 420px";
76 78
             });
77
-    }]);
79
+    }]).filter("toDataUrl", function() {
80
+    return function (data) {
81
+        return "data:image/*;base64," + btoa(data);
82
+    }
83
+});

+ 10
- 0
public/app/controllers/upload.controller.js 파일 보기

@@ -1,4 +1,14 @@
1 1
 angular.module('app')
2 2
     .controller('UploadController', ['$scope', '$state', '$mdDialog',
3 3
         function($scope, $state, $mdDialog) {
4
+
5
+            $scope.image = null;
6
+
7
+            $scope.fileDropped = function(content, file)
8
+            {
9
+                $scope.image = {
10
+                    content: content,
11
+                    name: file.name
12
+                };
13
+            };
4 14
     }]);

+ 1
- 0
public/app/index.html 파일 보기

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

+ 22
- 0
public/app/less/app.less 파일 보기

@@ -39,4 +39,26 @@
39 39
 
40 40
 .strike {
41 41
   text-decoration: line-through;
42
+}
43
+
44
+@dropzone-min-size: 150px;
45
+
46
+@dropzone-max-size: 500px;
47
+
48
+.dropzone {
49
+  min-width: @dropzone-min-size;
50
+  min-height: @dropzone-min-size;
51
+  max-height: @dropzone-max-size + 2;
52
+  max-width: @dropzone-max-size + 2;
53
+  border: 1px solid #6e6e6e;
54
+  display: flex;
55
+  justify-content: center;
56
+  align-items: center;
57
+  img {
58
+    display: block;
59
+    max-width: @dropzone-max-size;
60
+    max-height: @dropzone-max-size;
61
+    width: auto;
62
+    height: auto;
63
+  }
42 64
 }

+ 8
- 3
public/app/views/upload.html 파일 보기

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

Loading…
취소
저장