basic setup with web page setup and need db connection

.gitignore

@@ -0,0 +1,73 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless

app.js

@@ -0,0 +1,25 @@
+var express = require("express");
+var app = express();
+var port = 3000;
+
+app.use(express.static('assets'));
+console.log("Finished Building static files for web page!");
+
+
+var MongoClient = require('mongodb').MongoClient;
+var url = "mongodb://heroku_rg3dpg4f:3trhj8bvk2g9lp3ocvtbltgvp9@ds259711.mlab.com:59711/heroku_rg3dpg4f";
+var db;
+
+MongoClient.connect(url, function (err, client) {
+  if (err) return console.log(err);
+  console.log('Connected!');
+  db = client.db('heroku_rg3dpg4f')
+  app.listen(port, () => {
+   console.log("Server listening on port " + port);
+  });
+  db.close();
+});
+
+app.use("/", (req, res) => {
+ res.sendFile(__dirname + "/assets/upload.html");
+});

assets/main.js

@@ -0,0 +1,35 @@
+/*
+  * By: Arjun Patel
+  * Date: 7/30/18
+  *
+  */
+
+/*
+  * jQuery function call on DOM loading
+  */
+$(function() {
+
+  // Event Handlers
+    $("#inputFile").change(function(e) {
+      onChangeInput(e);
+      $('#inputFile').css("background-color", "#0d7aa5");
+    });
+
+
+  // Helper Function to read/load specific file
+    function onChangeInput(event) {
+        var reader = new FileReader();
+        reader.onload = onReaderLoad;
+        reader.readAsText(event.target.files[0]);
+    }
+
+  // General function to parse JSON
+    function onReaderLoad(event) {
+        var obj = JSON.parse(event.target.result);
+        console.log(obj.orders);
+        obj.orders.map((order) => {
+          console.log(order);
+          $('#table').append("<div class='flexBasicRow'><p class='col'>" + order.customer_id + "</p><p class='col'>" + order.order_no + "</p><p class='col'>" + order.part_id + "</p><p class='col'>" + order.parent_part + "</p><p class='col'>" + order.price + "</p><p class='col'>" + order.qty + "</p></p><p class='col'>" + order.paid + "</p></div>").fadeIn();
+        });
+    }
+});

assets/sample_data.json

@@ -0,0 +1,58 @@
+{
+	"orders" :
+		[{
+			"customer_id" : 1,
+			"order_no" : 1,
+			"part_id" : 1111,
+			"parent_part" : 1111,
+			"price" : 1000,
+			"qty" : 2,
+			"paid" : 2000
+		},
+		{
+			"customer_id" : 1,
+			"order_no" : 2,
+			"part_id" : 2321,
+			"parent_part" : 1111,
+			"price" : 500,
+			"qty" : 2,
+			"paid" : 1000
+		},
+		{
+			"customer_id" : 2,
+			"order_no" : 3,
+			"part_id" : 1232,
+			"parent_part" : 2222,
+			"price" : 200,
+			"qty" : 1,
+			"paid" : 200
+		},
+		{
+			"customer_id" : 3,
+			"order_no" : 4,
+			"part_id" : 12321,
+			"parent_part" : 3333,
+			"price" : 100,
+			"qty" : 1,
+			"paid" : 100
+		},
+		{
+			"customer_id" : 3,
+			"order_no" : 5,
+			"part_id" : 3331,
+			"parent_part" : 1111,
+			"price" : 500,
+			"qty" : 1,
+			"paid" : 500
+		},
+		{
+			"customer_id" : 4,
+			"order_no" : 6,
+			"part_id" : 2343,
+			"parent_part" : 1222,
+			"price" : 150,
+			"qty" : 1,
+			"paid" : 150
+		}
+		]
+}

assets/styles.css

@@ -0,0 +1,79 @@
+html {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  font-family: 'Montserrat', sans-serif;
+}
+body {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #eff3f4;
+}
+.flexBasicRow {
+  flex: 1;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  align-self: stretch;
+  min-width: 800px;
+}
+.flexBasicCol {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  align-self: stretch;
+}
+.flex-1 {
+  flex: 1;
+}
+.pageHeader {
+  font-size: 1.5em;
+  font-weight: bold;
+  background-color: #0d7aa5;
+  padding: 1em;
+  color: white;
+  margin: 0;
+  align-self: stretch;
+  text-align: center;
+}
+#inputFile {
+  text-align: center;
+  padding: 1em;
+  margin: 1em;
+  background:#d0d4db;
+  border: none;
+  position:relative;
+  color:#fff;
+  border-radius:2px;
+  text-align:center;
+  float:left;
+  cursor:pointer;
+  transition: 1s;
+  -webkit-transition: 1s;
+}
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  margin: 2em;
+}
+#table {
+  display: none;
+}
+.headRow {
+  background-color: #0d7aa5;
+  color: white;
+  align-self: stretch;
+}
+.col {
+  flex: 1;
+  margin: 0;
+  padding: 5px;
+  border-right: 1px solid white;
+  text-align: center;
+  text-overflow: ellipsis;
+    overflow: hidden;
+}

assets/upload.html

@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Data Flow</title>
+
+    <!-- Package/dependencies -->
+    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
+    <link type="text/css" rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+  </head>
+
+<body>
+  <div class="flexBasicCol">
+    <div class="flexBasicCol card">
+      <p class="pageHeader">Input a JSON file with order details</p>
+      <input type="file" id="inputFile" value="Import" />
+    </div>
+
+    <div class="flexBasicCol card" id="table">
+      <div class="flexBasicRow headRow">
+        <p class="col">customer_id</p>
+        <p class="col">order_no</p>
+        <p class="col">part_id</p>
+        <p class="col">parent_part</p>
+        <p class="col">price</p>
+        <p class="col">qty</p>
+        <p class="col">paid</p>
+      </div>
+    </div>
+
+  </div>
+
+  <!-- Importing JS files after for efficient render -->
+  <script src="main.js"></script>
+</body>
+</html>

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "file-upload-server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/talksik/file-upload-server.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/talksik/file-upload-server/issues"
+  },
+  "homepage": "https://github.com/talksik/file-upload-server#readme",
+  "dependencies": {
+    "express": "^4.16.3",
+    "mongodb": "^3.1.1"
+  },
+  "devDependencies": {
+    "nodemon": "^1.18.3"
+  }
+}