Browse Source

begin image upload

develop
Robin Thoni 8 years ago
parent
commit
1e5d31ca28

+ 6
- 0
app/Http/Business/ImagesBusiness.php View File

@@ -2,6 +2,7 @@
2 2
 
3 3
 namespace App\Http\Business;
4 4
 
5
+use App\Http\DBO\ImageUploadDbo;
5 6
 use Luticate\Utils\LuBusiness;
6 7
 use App\Http\DataAccess\ImagesDataAccess;
7 8
 use App\Http\DBO\ImagesDbo;
@@ -11,4 +12,9 @@ class ImagesBusiness extends LuBusiness {
11 12
     {
12 13
         return new ImagesDataAccess();
13 14
     }
15
+
16
+    public static function upload(ImageUploadDbo $image)
17
+    {
18
+        return true;
19
+    }
14 20
 }

+ 6
- 0
app/Http/Controller/ImagesController.php View File

@@ -2,6 +2,7 @@
2 2
 
3 3
 namespace App\Http\Controller;
4 4
 
5
+use App\Http\DBO\ImageUploadDbo;
5 6
 use Luticate\Utils\LuController;
6 7
 use App\Http\Business\ImagesBusiness;
7 8
 use App\Http\DBO\ImagesDbo;
@@ -11,4 +12,9 @@ class ImagesController extends LuController {
11 12
     {
12 13
         return new ImagesBusiness();
13 14
     }
15
+
16
+    public function upload(ImageUploadDbo $image)
17
+    {
18
+        return ImagesBusiness::upload($image);
19
+    }
14 20
 }

+ 81
- 0
app/Http/DBO/ImageUploadDbo.php View File

@@ -0,0 +1,81 @@
1
+<?php
2
+/**
3
+ * Created by PhpStorm.
4
+ * User: robin
5
+ * Date: 4/22/16
6
+ * Time: 9:25 PM
7
+ */
8
+
9
+namespace App\Http\DBO;
10
+
11
+use Imagick;
12
+use Luticate\Utils\LuDbo;
13
+
14
+class ImageUploadDbo extends LuDbo
15
+{
16
+    /**
17
+     * @var Imagick
18
+     */
19
+    private $image;
20
+
21
+    /**
22
+     * @var string
23
+     */
24
+    private $name;
25
+
26
+    public static function jsonDeserialize($json)
27
+    {
28
+        $dbo = new ImageUploadDbo();
29
+
30
+        $imagine = new Imagick();
31
+        $imagine->readImageBlob(base64_decode($json["image"]));
32
+        $dbo->setImage($imagine);
33
+        $dbo->setName($json["name"]);
34
+
35
+        return $dbo;
36
+    }
37
+
38
+    function jsonSerialize()
39
+    {
40
+        $imageData = null;
41
+        if (!is_null($this->image)) {
42
+            $imageData = base64_encode($this->image->getImageBlob());
43
+        }
44
+        return [
45
+            "image" => $imageData,
46
+            "name" => $this->name
47
+        ];
48
+    }
49
+
50
+    /**
51
+     * @return Imagick
52
+     */
53
+    public function getImage()
54
+    {
55
+        return $this->image;
56
+    }
57
+
58
+    /**
59
+     * @param Imagick $image
60
+     */
61
+    public function setImage($image)
62
+    {
63
+        $this->image = $image;
64
+    }
65
+
66
+    /**
67
+     * @return string
68
+     */
69
+    public function getName()
70
+    {
71
+        return $this->name;
72
+    }
73
+
74
+    /**
75
+     * @param string $name
76
+     */
77
+    public function setName($name)
78
+    {
79
+        $this->name = $name;
80
+    }
81
+}

+ 14
- 0
app/Http/DBO/Permissions.php View File

@@ -0,0 +1,14 @@
1
+<?php
2
+/**
3
+ * Created by PhpStorm.
4
+ * User: robin
5
+ * Date: 4/22/16
6
+ * Time: 9:14 PM
7
+ */
8
+
9
+namespace App\Http\DBO;
10
+
11
+class Permissions
12
+{
13
+    const UPLOAD = "PX_UPLOAD";
14
+}

+ 6
- 1
app/Http/routes.php View File

@@ -1,5 +1,6 @@
1 1
 <?php
2 2
 
3
+use App\Http\DBO\Permissions;
3 4
 use Luticate\Auth\Business\LuticateBusiness;
4 5
 use Luticate\Doc\Business\LuDocBusiness;
5 6
 use Luticate\Utils\LuRoute;
@@ -12,4 +13,8 @@ LuticateBusiness::setupAuth();
12 13
 LuticateBusiness::setupRoutes("/api/luticate");
13 14
 LuDocBusiness::setupRoutes("/api/luticate");
14 15
 
15
-$route->post("/api/effects/{effect}/apply", "Effects", "apply");
16
+$route->post("/api/effects/{effect}/apply", "Effects", "apply", Permissions::UPLOAD);
17
+
18
+$route->post("/api/images/upload", "Images", "upload", Permissions::UPLOAD);
19
+
20
+//sleep(2);

+ 19
- 2
public/app/app.js View File

@@ -12,8 +12,8 @@ angular.module('app', [
12 12
     'luticateUtils',
13 13
     'appSdk'
14 14
 ])
15
-    .config(['$stateProvider', '$urlRouterProvider', '$compileProvider',
16
-        function($stateProvider, $urlRouterProvider, $compileProvider) {
15
+    .config(['$stateProvider', '$urlRouterProvider', '$compileProvider', '$httpProvider',
16
+        function($stateProvider, $urlRouterProvider, $compileProvider, $httpProvider) {
17 17
 
18 18
             $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|data):/);
19 19
 
@@ -63,6 +63,23 @@ angular.module('app', [
63 63
             });
64 64
 
65 65
             $urlRouterProvider.otherwise('/');
66
+
67
+            $httpProvider.interceptors.push(['luticateAuthCache', '$injector', '$q',
68
+                function (luticateAuthCache, $injector, $q) {
69
+                    return {
70
+                        'request': function (config) {
71
+                            var token = luticateAuthCache.getToken();
72
+
73
+                            if (token != null)
74
+                                config.headers['X-Authorization'] = token;
75
+
76
+                            return config;
77
+                        },
78
+                        'responseError': function(rejection) {
79
+                            return $q.reject(rejection);
80
+                        }
81
+                    };
82
+                }]);
66 83
     }])
67 84
     .directive('dateNow', ['$filter', function($filter) {
68 85
         return {

+ 29
- 3
public/app/controllers/upload.controller.js View File

@@ -1,8 +1,13 @@
1 1
 angular.module('app')
2
-    .controller('UploadController', ['$scope', '$state', '$mdDialog', 'EffectsBusiness',
3
-        function($scope, $state, $mdDialog, EffectsBusiness) {
2
+    .controller('UploadController', ['$scope', '$state', '$mdDialog', 'EffectsBusiness', 'ImagesBusiness', 'luticateAuthCache',
3
+        function($scope, $state, $mdDialog, EffectsBusiness, ImagesBusiness, luticateAuthCache) {
4 4
 
5 5
             $scope.image = null;
6
+            
7
+            var promiseImage = {
8
+                id: "promiseImage",
9
+                groups: ["imageView"]
10
+            };
6 11
 
7 12
             $scope.input = angular.element(angular.element("#filePicker")[0]);
8 13
             $scope.input.on("change", function (e) {
@@ -37,7 +42,7 @@ angular.module('app')
37 42
                     effect: effect,
38 43
                     image: $scope.image.content,
39 44
                     data: data
40
-                }).then(function(data)
45
+                }, promiseImage).then(function(data)
41 46
                 {
42 47
                     $scope.image.content = data.image;
43 48
                 }, function (error)
@@ -46,6 +51,27 @@ angular.module('app')
46 51
                 });
47 52
             };
48 53
 
54
+            $scope.isUploadVisible = function () {
55
+                return luticateAuthCache.getUser() != null;
56
+            };
57
+
58
+            $scope.canUpload = function () {
59
+                return $scope.image != null;
60
+            };
61
+
62
+            $scope.upload = function()
63
+            {
64
+                ImagesBusiness.upload({
65
+                    image: $scope.image.content,
66
+                    name: $scope.image.name
67
+                }, promiseImage).then(function(data)
68
+                {
69
+                    console.log(data);
70
+                }, function (error) {
71
+                    console.log(error);
72
+                });
73
+            };
74
+
49 75
             $scope.test = function()
50 76
             {
51 77
                 $scope.applyEffect("BlackAndWhite", null);

+ 2
- 0
public/app/index.html View File

@@ -60,6 +60,8 @@
60 60
     <script src="../sdk/sdk.js"></script>
61 61
     <script src="../sdk/DataAccess/effects.js"></script>
62 62
     <script src="../sdk/Business/effects.js"></script>
63
+    <script src="../sdk/DataAccess/images.js"></script>
64
+    <script src="../sdk/Business/images.js"></script>
63 65
 
64 66
     <!-- Directives -->
65 67
     <script src="controllers/directives/dropzone.controller.js"></script>

+ 16
- 6
public/app/less/app.less View File

@@ -43,21 +43,17 @@
43 43
 
44 44
 @dropzone-min-size: 150px;
45 45
 
46
-@dropzone-max-size: 500px;
47
-
48 46
 .dropzone {
49 47
   min-width: @dropzone-min-size;
50 48
   min-height: @dropzone-min-size;
51
-  max-height: @dropzone-max-size + 2;
52
-  max-width: @dropzone-max-size + 2;
53 49
   border: 1px solid #6e6e6e;
54 50
   display: flex;
55 51
   justify-content: center;
56 52
   align-items: center;
57 53
   img {
58 54
     display: block;
59
-    max-width: @dropzone-max-size;
60
-    max-height: @dropzone-max-size;
55
+    max-width: 100%;
56
+    max-height: 100%;
61 57
     width: auto;
62 58
     height: auto;
63 59
   }
@@ -67,4 +63,18 @@
67 63
   width: 0;
68 64
   height: 0;
69 65
   overflow: hidden;
66
+}
67
+
68
+.nav {
69
+  li {
70
+    a:hover, a:focus {
71
+      text-decoration: none;
72
+      background-color: #303F9F;
73
+    }
74
+  }
75
+}
76
+
77
+.active {
78
+  text-decoration: none;
79
+  background-color: #1A237E;
70 80
 }

+ 4
- 1
public/app/views/toolbar.html View File

@@ -3,7 +3,10 @@
3 3
         <md-button class="md-icon-button" aria-label="Toolbar" ng-click="toggleSideBar()" hide-gt-md>
4 4
             <md-icon md-svg-icon="img/menu.svg"></md-icon>
5 5
         </md-button>
6
-        <h2>Toolbar</h2>
6
+        <ul class="nav navbar-nav navbar-left">
7
+            <li ui-sref-active="active"><a ui-sref="images">Images</a></li>
8
+            <li ui-sref-active="active"><a ui-sref="upload">Upload</a></li>
9
+        </ul>
7 10
         <span flex></span>
8 11
         <div ng-hide="isLogged()">
9 12
             <span><a ui-sref="signUp">Sign up</a></span> or

+ 18
- 7
public/app/views/upload.html View File

@@ -1,12 +1,23 @@
1 1
 <div layout="column" layout-fill layout-align="top center">
2 2
 
3 3
     <h1>Upload</h1>
4
-    <div image-dropzone="fileLoaded(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 or <a href="" ng-click="pickFile()">pick one</a>
8
-        </p>
4
+    <div ng-show="isUploadVisible()" class="col-xs-6" lu-busy="imageView">
5
+
6
+        <div class="center-block">
7
+
8
+            <div image-dropzone="fileLoaded(content, file)" class="dropzone">
9
+                <img ng-show="image != null" ng-src="{{ image.content | toDataUrl }}">
10
+                <p ng-hide="image != null">
11
+                    Drag a file here or <a href="" ng-click="pickFile()">pick one</a>
12
+                </p>
13
+            </div>
14
+
15
+            <md-button ng-show="canUpload()" ng-click="upload()" >Upload</md-button>
16
+            <input type="file" class="hidden-input" id="filePicker">
17
+        </div>
18
+    </div>
19
+
20
+    <div ng-hide="isUploadVisible()">
21
+        Please <a ui-sref="login">log in</a> or <a ui-sref="signUp">sign up</a> to upload images!
9 22
     </div>
10
-    <button type="button" ng-click="test()" >Test.</button>
11
-    <input type="file" class="hidden-input" id="filePicker">
12 23
 </div>

+ 21
- 0
public/sdk/Business/images.js View File

@@ -0,0 +1,21 @@
1
+/**
2
+ * Created by robin on 4/22/16.
3
+ */
4
+
5
+(function()
6
+{
7
+    angular.module("appSdk").factory("ImagesBusiness", ['ImagesDataAccess', '$q', function (ImagesDataAccess, $q) {
8
+        var Business = {};
9
+
10
+        Business.getAll = ImagesDataAccess.getAll;
11
+
12
+        Business.upload = function(data, promise)
13
+        {
14
+            data.image = btoa(data.image);
15
+
16
+            return ImagesDataAccess.upload(data, promise);
17
+        };
18
+
19
+        return Business;
20
+    }])
21
+})();

+ 1
- 1
public/sdk/DataAccess/effects.js View File

@@ -11,7 +11,7 @@
11 11
 
12 12
         DataAccess.apply = function(data, promise)
13 13
         {
14
-            return luticateRequest.post(entry_point + data.effect + "/apply", {data: JSON.stringify(data)}, promise);
14
+            return luticateRequest.post(entry_point + data.effect + "/apply", {data: JSON.stringify(data)}, null, promise);
15 15
         };
16 16
         
17 17
         return DataAccess;

+ 5
- 0
public/sdk/DataAccess/images.js View File

@@ -14,6 +14,11 @@
14 14
             return luticateRequest.get(entry_point, data, promise);
15 15
         };
16 16
 
17
+        DataAccess.upload = function(data, promise)
18
+        {
19
+            return luticateRequest.post(entry_point + "upload", {image: JSON.stringify(data)}, null, promise);
20
+        };
21
+
17 22
         return DataAccess;
18 23
     }])
19 24
 })();

Loading…
Cancel
Save