Merge branch 'master' into add/refresh-token-request

package.json

@@ -24,15 +24,18 @@
   },
   "homepage": "https://github.com/foundersandcoders/OTP-Data-Entry#readme",
   "dependencies": {
+    "aws-sdk": "^2.186.0",
     "body-parser": "^1.18.0",
     "compression": "^1.7.1",
     "cookie-parser": "^1.4.3",
     "env2": "^2.2.0",
     "express": "^4.15.3",
     "express-handlebars": "^3.0.0",
     "jsonwebtoken": "^8.1.0",
+    "morgan": "^1.9.0",
     "query-string": "^5.0.0",
-    "request": "^2.81.0"
+    "request": "^2.81.0",
+    "uuid": "^3.2.1"
   },
   "devDependencies": {
     "nodemon": "^1.12.0",

public/image-upload.js

@@ -0,0 +1,42 @@
+(function() {
+  var fileInput =
+    document.getElementById('eventFileInput') ||
+    document.getElementById('placeImageInput');
+  var hiddenFileInput = document.getElementById('hiddenFileInput');
+  var fileErrorMessage = document.getElementById('fileErrorMessage');
+  var spinner = document.getElementById('spinner');
+  var imagePreview = document.getElementById('imagePreview');
+
+  fileInput.onchange = function() {
+    var fileInputFiles = fileInput.files;
+    var file = fileInputFiles[0];
+    imagePreview.src = imagePreview.src && '';
+    spinner.classList.toggle('dn');
+    imagePreview.classList.add('dn');
+    getSignedRequest(file)
+      .then(function(res) {
+        imagePreview.src = res.data.url;
+        hiddenFileInput.value = res.data.url;
+        return uploadFile(res.data.signedRequest, file);
+      })
+      .then(function() {
+        spinner.classList.toggle('dn');
+        imagePreview.classList.remove('dn');
+      })
+      .catch(function(err) {
+        imagePreview.src = '';
+        hiddenFileInput.value = '';
+        fileErrorMessage.textContent = 'Could not upload file';
+      });
+
+    function getSignedRequest(file) {
+      return axios.get(
+        '/sign-s3?file-name=' + file.name + '&file-type=' + file.type,
+      );
+    }
+
+    function uploadFile(signedRequest, file) {
+      return axios.put(signedRequest, file);
+    }
+  };
+})();

public/style.css

@@ -1,27 +1,56 @@
 .bg-turquoise {
-  background-color: #409A93;
+  background-color: #409a93;
 }
 
 .bg-main {
-  background-color: #F2F2F2;
+  background-color: #f2f2f2;
 }
 
- .light-text {
-   color: #95989A;
- }
+.light-text {
+  color: #95989a;
+}
+
+.lato {
+  font-family: 'lato', sans-serif;
+}
 
- .lato {
-   font-family: 'lato', sans-serif;
- }
+.dark-text {
+  color: #5c5c5c;
+}
 
- .dark-text {
-   color: #5C5C5C;
- }
+.b--turquoise {
+  border-color: #409a93;
+}
 
- .b--turquoise {
-   border-color: #409A93;
- }
+.text-turquoise {
+  color: #409a93;
+}
 
- .text-turquoise {
-   color: #409A93;
- }
+#spinner {
+  border: 0.2rem solid #f3f3f3;
+  border-radius: 75%;
+  border-top: 0.2rem solid #3498db;
+  width: 2rem;
+  height: 2rem;
+  -webkit-animation: spin 2s linear infinite; /* Safari */
+  animation: spin 2s linear infinite;
+}
+
+/* Safari */
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}