Integration of File upload (WIP)

.env.sample

@@ -25,3 +25,6 @@ REMIND_AFTER=7
 REMIND_UNITL=0
 REMIND_ALL=true
 JWTSECRET='secret'
+
+UPLOAD_DIR='uploads/'
+

bower.json

@@ -1,32 +1,33 @@
 {
-    "name": "ethics-app",
-    "version": "0.0.1",
-    "authors": [
-        "Nicholas Schiestel <[email protected]>"
-    ],
-    "description": "Ethics-App for the Institute for Geoinformatics, Münster",
-    "license": "MIT",
-    "private": true,
-    "dependencies": {
-        "angular": "1.6.4",
-        "angular-momentjs": "^0.2.2",
-        "angular-route": "1.6.4",
-        "angular-sanitize": "1.6.4",
-        "angular-translate": "^2.11.1",
-        "bootstrap": "v4.0.0-alpha.6",
-        "font-awesome": "^4.6.3",
-        "jquery": "^3.1.0",
-        "moment": "^2.14.1",
-        "tether": "^1.3.7",
-        "flag-icon-css": "^2.0.0",
-        "underscore": "^1.8.3",
-        "angular-underscore-module": "^1.0.3",
-        "angucomplete-alt": "^3.0.0"
-    },
-    "resolutions": {
-        "angular": "1.6.4",
-        "angular-route": "1.6.4",
-        "angular-sanitize": "1.6.4",
-        "bootstrap": "v4.0.0-alpha.6"
-    }
+  "name": "ethics-app",
+  "version": "0.0.1",
+  "authors": [
+    "Nicholas Schiestel <[email protected]>"
+  ],
+  "description": "Ethics-App for the Institute for Geoinformatics, Münster",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "angular": "1.6.4",
+    "angular-momentjs": "^0.2.2",
+    "angular-route": "1.6.4",
+    "angular-sanitize": "1.6.4",
+    "angular-translate": "^2.11.1",
+    "bootstrap": "v4.0.0-alpha.6",
+    "font-awesome": "^4.6.3",
+    "jquery": "^3.1.0",
+    "moment": "^2.14.1",
+    "tether": "^1.3.7",
+    "flag-icon-css": "^2.0.0",
+    "underscore": "^1.8.3",
+    "angular-underscore-module": "^1.0.3",
+    "angucomplete-alt": "^3.0.0",
+    "angular-upload": "^1.0.12"
+  },
+  "resolutions": {
+    "angular": "1.6.4",
+    "angular-route": "1.6.4",
+    "angular-sanitize": "1.6.4",
+    "bootstrap": "v4.0.0-alpha.6"
+  }
 }

controllers/concerns/put.js

@@ -75,7 +75,9 @@ exports.request = function(req, res) {
                 q12_value: req.body.q12_value,
                 q12_explanation: req.body.q12_explanation,
                 q13_value: req.body.q13_value,
-                q13_explanation: req.body.q13_explanation
+                q13_explanation: req.body.q13_explanation,
+                q14_value: req.body.q14_value,
+                q14_explanation: req.body.q14_explanation
             };
             var params = _.values(object);
             callback(null, client, done, params);

controllers/concerns/upload_file.js

@@ -0,0 +1,77 @@
+var async = require('async');
+var colors = require('colors');
+var pg = require('pg');
+var types = require('pg').types;
+types.setTypeParser(1700, 'text', parseFloat);
+var _ = require('underscore');
+var pool = require('../../server.js').pool;
+
+var fs = require("fs");
+var dir = "/../../sql/queries/concerns/";
+var query_get_concern = fs.readFileSync(__dirname + dir + 'get.sql', 'utf8').toString();
+var query_add_file = fs.readFileSync(__dirname + dir + 'set_uploaded_file.sql', 'utf8').toString();
+
+
+// EDIT
+exports.upload = function(req, res) {
+
+    async.waterfall([
+        function(callback){
+            // Connect to database
+            pool.connect(function(err, client, done) {
+                if(err) {
+                    callback(err, 500);
+                } else {
+                    callback(null, client, done);
+                }
+            });
+        },
+        function(client, done, callback) {
+            // Database query
+            client.query(query_get_concern, [
+                req.params.concern_id
+            ], function(err, result) {
+                done();
+                if (err) {
+                    callback(err, 500);
+                } else {
+                    // Check if Concern exists
+                    if (result.rows.length === 0) {
+                        callback(new Error("Concern not found"), 404);
+                    } else {
+                        callback(null, client, done);
+                    }
+                }
+            });
+        },
+        function(client, done, callback) {
+            // TODO: Add object/schema validation
+            var object = {
+                concern_id: req.params.concern_id,
+                q14_filename: req.file.originalname,
+                q14_filepath: req.file.path
+            };
+            var params = _.values(object);
+            callback(null, client, done, params);
+        },
+        function(client, done, params, callback){
+            console.log(req.file);
+            // Database query
+            client.query(query_add_file, params, function(err, result) {
+                done();
+                if (err) {
+                    callback(err, 500);
+                } else {
+                    callback(null, 200, result.rows[0]);
+                }
+            });
+        }
+    ], function(err, code, result) {
+        if(err){
+            console.error(colors.red(err));
+            res.status(code).send(err.message);
+        } else {
+            res.status(code).send(result);
+        }
+    });
+};

controllers/documents/submit.js

@@ -170,6 +170,8 @@ exports.request = function(req, res) {
                 callback(null, client, done, document, course, revision, description, concern, 3);
             } else if(concern.q13_value){
                 callback(null, client, done, document, course, revision, description, concern, 3);
+            } else if(concern.q14_value){
+                callback(null, client, done, document, course, revision, description, concern, 3);
             } else {
                 // Check if document has been already in review
                 if(document.status === 5){

package.json

@@ -34,10 +34,12 @@
     "cookie-parser": "^1.4.3",
     "dotenv": "^4.0.0",
     "express": "^4.14.0",
+    "file-type": "^7.6.0",
     "helmet": "^3.4.1",
     "html-pdf": "^2.1.0",
     "jsonwebtoken": "^7.2.1",
     "moment": "^2.14.1",
+    "multer": "^1.3.0",
     "mustache": "^2.3.0",
     "nodemailer": "^2.7.0",
     "pg": "^6.1.0",

public/config.js

@@ -12,25 +12,34 @@ app.constant("config", {
     appLanguage: 'en_US',
     appYear: moment().format("YYYY"),
     timeZone: "Europe/Berlin",
-    debugMode: false,
+    debugMode: true,
     html5Mode: true,
     serverMode: 'development',
     serverSettings: {
         development: {
             host: 'http://localhost',
             port: 5000,
             apiPath: "/api",
+            uploadPath: "/upload/",
             memberClientPath: '/member-client',
             userClientPath: '/user-client'
         },
         production: {
             host: 'http://localhost',
             port: 80,
             apiPath: "/api",
+            uploadPath: "/upload/",
             memberClientPath: '/member-client',
             userClientPath: '/user-client'
         }
     },
+    getUploadEndpoint: function(){
+        if(this.serverMode === 'production'){
+            return this.serverSettings.production.host + ":" + this.serverSettings.production.port + this.serverSettings.production.uploadPath
+        } else {
+            return this.serverSettings.development.host + ":" + this.serverSettings.development.port + this.serverSettings.development.uploadPath
+        }
+    },
     getApiEndpoint: function(){
         if(this.serverMode === 'production'){
             return this.serverSettings.production.host + ":" + this.serverSettings.production.port + this.serverSettings.production.apiPath

public/user-client/css/styles.css

@@ -94,3 +94,71 @@ footer {
 [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
   display: none !important;
 }
+
+/* https://stackoverflow.com/a/41078668 */
+.checkmark__circle {
+  stroke-dasharray: 166;
+  stroke-dashoffset: 166;
+  stroke-width: 2;
+  stroke-miterlimit: 10;
+  stroke: #7ac142;
+  fill: none;
+  animation: stroke 1.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+  animation-iteration-count:infinite;
+}
+
+.checkmark__fill_green {
+animation: fill_green .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
+}
+.checkmark__fill_red {
+animation: fill_red .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
+}
+
+.checkmark__template {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  display: block;
+  stroke-width: 2;
+  stroke: #fff;
+  stroke-miterlimit: 10;
+  margin: 10% auto;
+}
+
+.checkmark__template_red {
+  box-shadow: inset 0px 0px 0px #f64408;
+}
+.checkmark__template_green {
+  box-shadow: inset 0px 0px 0px #7ac142;
+}
+
+.checkmark__check {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 90;
+  stroke-dashoffset: 100;
+  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+}
+
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes scale {
+  0%, 100% {
+    transform: none;
+  }
+  50% {
+    transform: scale3d(1.1, 1.1, 1);
+  }
+}
+@keyframes fill_red {
+  100% {
+    box-shadow: inset 0px 0px 0px 30px #f64408;
+  }
+}
+@keyframes fill_green {
+  100% {
+    box-shadow: inset 0px 0px 0px 30px #7ac142;
+  }
+}

public/user-client/index.html

@@ -31,6 +31,8 @@
         <link href="../bower_components/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
 
         <!-- Custom styles -->
+        <link href="..bower_components/angular-upload/src/directives/btnUpload.min.css" rel="stylesheet">
+
         <link href="css/styles.css" rel="stylesheet"/>
 
         <!-- JavaScript dependecies -->
@@ -44,7 +46,7 @@
         <script src="../bower_components/angular-translate/angular-translate.min.js"></script>
         <script src="../bower_components/angular-underscore-module/angular-underscore-module.js"></script>
         <script src="../bower_components/angular-momentjs/angular-momentjs.js"></script>
-
+        <script src="../bower_components/angular-upload/angular-upload.min.js"></script>
     </head>
 
     <body class="ng-cloak">

public/user-client/js/app.js

@@ -14,6 +14,7 @@ var app = angular.module("ethics-app", [
     "pascalprecht.translate",
     "angular-momentjs",
     "underscore",
+    "lr.upload",
 
     // Import own modules
     "filters",
@@ -55,6 +56,38 @@ app.config(function($logProvider, $translateProvider, en_US, de_DE, pt_PT, confi
     $translateProvider.useSanitizeValueStrategy('sanitize');
 });
 
+app.directive('validFile',function(){
+  return {
+    restrict: 'A',
+    require:'ngModel',
+    link:function(scope,el,attrs,ngModel){
+      //change event is fired when file is selected
+      el.bind('change',function(){
+        scope.$apply(function(){
+          scope[attrs['fileChange']](element[0].files);
+          ngModel.$setViewValue(el.val());
+          ngModel.$render();
+        })
+      })
+    }
+  }
+})
+
+//
+// fileChange directive because ng-change doesn't work for file inputs.
+//
+app.directive('fileChange', function() {
+return {
+  restrict: 'A',
+  link: function(scope, element, attrs) {
+    element.bind('change', function() {
+      scope.$apply(function() {
+        scope[attrs['fileChange']](element[0].files);
+      })
+    })
+  },
+}
+})
 
 /**
  * Start application