begin image upload

app/Http/Business/ImagesBusiness.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Business;
 
+use App\Http\DBO\ImageUploadDbo;
 use Luticate\Utils\LuBusiness;
 use App\Http\DataAccess\ImagesDataAccess;
 use App\Http\DBO\ImagesDbo;
@@ -11,4 +12,9 @@ class ImagesBusiness extends LuBusiness {
     {
         return new ImagesDataAccess();
     }
+
+    public static function upload(ImageUploadDbo $image)
+    {
+        return true;
+    }
 }

app/Http/Controller/ImagesController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controller;
 
+use App\Http\DBO\ImageUploadDbo;
 use Luticate\Utils\LuController;
 use App\Http\Business\ImagesBusiness;
 use App\Http\DBO\ImagesDbo;
@@ -11,4 +12,9 @@ class ImagesController extends LuController {
     {
         return new ImagesBusiness();
     }
+
+    public function upload(ImageUploadDbo $image)
+    {
+        return ImagesBusiness::upload($image);
+    }
 }

app/Http/DBO/ImageUploadDbo.php

@@ -0,0 +1,81 @@
+<?php
+/**
+ * Created by PhpStorm.
+ * User: robin
+ * Date: 4/22/16
+ * Time: 9:25 PM
+ */
+
+namespace App\Http\DBO;
+
+use Imagick;
+use Luticate\Utils\LuDbo;
+
+class ImageUploadDbo extends LuDbo
+{
+    /**
+     * @var Imagick
+     */
+    private $image;
+
+    /**
+     * @var string
+     */
+    private $name;
+
+    public static function jsonDeserialize($json)
+    {
+        $dbo = new ImageUploadDbo();
+
+        $imagine = new Imagick();
+        $imagine->readImageBlob(base64_decode($json["image"]));
+        $dbo->setImage($imagine);
+        $dbo->setName($json["name"]);
+
+        return $dbo;
+    }
+
+    function jsonSerialize()
+    {
+        $imageData = null;
+        if (!is_null($this->image)) {
+            $imageData = base64_encode($this->image->getImageBlob());
+        }
+        return [
+            "image" => $imageData,
+            "name" => $this->name
+        ];
+    }
+
+    /**
+     * @return Imagick
+     */
+    public function getImage()
+    {
+        return $this->image;
+    }
+
+    /**
+     * @param Imagick $image
+     */
+    public function setImage($image)
+    {
+        $this->image = $image;
+    }
+
+    /**
+     * @return string
+     */
+    public function getName()
+    {
+        return $this->name;
+    }
+
+    /**
+     * @param string $name
+     */
+    public function setName($name)
+    {
+        $this->name = $name;
+    }
+}

app/Http/DBO/Permissions.php

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

app/Http/routes.php

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

public/app/app.js

@@ -12,8 +12,8 @@ angular.module('app', [
     'luticateUtils',
     'appSdk'
 ])
-    .config(['$stateProvider', '$urlRouterProvider', '$compileProvider',
-        function($stateProvider, $urlRouterProvider, $compileProvider) {
+    .config(['$stateProvider', '$urlRouterProvider', '$compileProvider', '$httpProvider',
+        function($stateProvider, $urlRouterProvider, $compileProvider, $httpProvider) {
 
             $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|data):/);
 
@@ -63,6 +63,23 @@ angular.module('app', [
             });
 
             $urlRouterProvider.otherwise('/');
+
+            $httpProvider.interceptors.push(['luticateAuthCache', '$injector', '$q',
+                function (luticateAuthCache, $injector, $q) {
+                    return {
+                        'request': function (config) {
+                            var token = luticateAuthCache.getToken();
+
+                            if (token != null)
+                                config.headers['X-Authorization'] = token;
+
+                            return config;
+                        },
+                        'responseError': function(rejection) {
+                            return $q.reject(rejection);
+                        }
+                    };
+                }]);
     }])
     .directive('dateNow', ['$filter', function($filter) {
         return {

public/app/controllers/upload.controller.js

@@ -1,8 +1,13 @@
 angular.module('app')
-    .controller('UploadController', ['$scope', '$state', '$mdDialog', 'EffectsBusiness',
-        function($scope, $state, $mdDialog, EffectsBusiness) {
+    .controller('UploadController', ['$scope', '$state', '$mdDialog', 'EffectsBusiness', 'ImagesBusiness', 'luticateAuthCache',
+        function($scope, $state, $mdDialog, EffectsBusiness, ImagesBusiness, luticateAuthCache) {
 
             $scope.image = null;
+            
+            var promiseImage = {
+                id: "promiseImage",
+                groups: ["imageView"]
+            };
 
             $scope.input = angular.element(angular.element("#filePicker")[0]);
             $scope.input.on("change", function (e) {
@@ -37,7 +42,7 @@ angular.module('app')
                     effect: effect,
                     image: $scope.image.content,
                     data: data
-                }).then(function(data)
+                }, promiseImage).then(function(data)
                 {
                     $scope.image.content = data.image;
                 }, function (error)
@@ -46,6 +51,27 @@ angular.module('app')
                 });
             };
 
+            $scope.isUploadVisible = function () {
+                return luticateAuthCache.getUser() != null;
+            };
+
+            $scope.canUpload = function () {
+                return $scope.image != null;
+            };
+
+            $scope.upload = function()
+            {
+                ImagesBusiness.upload({
+                    image: $scope.image.content,
+                    name: $scope.image.name
+                }, promiseImage).then(function(data)
+                {
+                    console.log(data);
+                }, function (error) {
+                    console.log(error);
+                });
+            };
+
             $scope.test = function()
             {
                 $scope.applyEffect("BlackAndWhite", null);

public/app/index.html

@@ -60,6 +60,8 @@
     <script src="../sdk/sdk.js"></script>
     <script src="../sdk/DataAccess/effects.js"></script>
     <script src="../sdk/Business/effects.js"></script>
+    <script src="../sdk/DataAccess/images.js"></script>
+    <script src="../sdk/Business/images.js"></script>
 
     <!-- Directives -->
     <script src="controllers/directives/dropzone.controller.js"></script>

public/app/less/app.less

@@ -43,21 +43,17 @@
 
 @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;
+    max-width: 100%;
+    max-height: 100%;
     width: auto;
     height: auto;
   }
@@ -67,4 +63,18 @@
   width: 0;
   height: 0;
   overflow: hidden;
+}
+
+.nav {
+  li {
+    a:hover, a:focus {
+      text-decoration: none;
+      background-color: #303F9F;
+    }
+  }
+}
+
+.active {
+  text-decoration: none;
+  background-color: #1A237E;
 }

public/app/views/toolbar.html

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

public/app/views/upload.html

@@ -1,12 +1,23 @@
 <div layout="column" layout-fill layout-align="top center">
 
     <h1>Upload</h1>
-    <div image-dropzone="fileLoaded(content, file)" class="dropzone">
-        <img ng-show="image != null" ng-src="{{ image.content | toDataUrl }}">
-        <p ng-hide="image != null">
-            Drag a file here or <a href="" ng-click="pickFile()">pick one</a>
-        </p>
+    <div ng-show="isUploadVisible()" class="col-xs-6" lu-busy="imageView">
+
+        <div class="center-block">
+
+            <div image-dropzone="fileLoaded(content, file)" class="dropzone">
+                <img ng-show="image != null" ng-src="{{ image.content | toDataUrl }}">
+                <p ng-hide="image != null">
+                    Drag a file here or <a href="" ng-click="pickFile()">pick one</a>
+                </p>
+            </div>
+
+            <md-button ng-show="canUpload()" ng-click="upload()" >Upload</md-button>
+            <input type="file" class="hidden-input" id="filePicker">
+        </div>
+    </div>
+
+    <div ng-hide="isUploadVisible()">
+        Please <a ui-sref="login">log in</a> or <a ui-sref="signUp">sign up</a> to upload images!
     </div>
-    <button type="button" ng-click="test()" >Test.</button>
-    <input type="file" class="hidden-input" id="filePicker">
 </div>

public/sdk/Business/images.js

@@ -0,0 +1,21 @@
+/**
+ * Created by robin on 4/22/16.
+ */
+
+(function()
+{
+    angular.module("appSdk").factory("ImagesBusiness", ['ImagesDataAccess', '$q', function (ImagesDataAccess, $q) {
+        var Business = {};
+
+        Business.getAll = ImagesDataAccess.getAll;
+
+        Business.upload = function(data, promise)
+        {
+            data.image = btoa(data.image);
+
+            return ImagesDataAccess.upload(data, promise);
+        };
+
+        return Business;
+    }])
+})();

public/sdk/DataAccess/effects.js

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

public/sdk/DataAccess/images.js

@@ -14,6 +14,11 @@
             return luticateRequest.get(entry_point, data, promise);
         };
 
+        DataAccess.upload = function(data, promise)
+        {
+            return luticateRequest.post(entry_point + "upload", {image: JSON.stringify(data)}, null, promise);
+        };
+
         return DataAccess;
     }])
 })();