From c2bb74ac0096a03438d7eb4ab79ee4b5d5b7ddf0 Mon Sep 17 00:00:00 2001
From: Kyle K <kylek389@gmail.com>
Date: Wed, 1 Mar 2017 00:33:22 -0600
Subject: implement and display a list of uploaded files

- adds a /api/filenames RESTful API
- adds a cute nyancat banner
---
 README.md                   |   9 +++++----
 nodejs-express-uploader.jpg | Bin 0 -> 37142 bytes
 package.json                |   7 +++----
 server.js                   |  29 +++++++++--------------------
 static/img/nyancat.gif      | Bin 0 -> 22528 bytes
 static/index.html           |  13 +++++++++++--
 static/js/upload.js         |  17 ++++++++++++++++-
 7 files changed, 44 insertions(+), 31 deletions(-)
 create mode 100644 nodejs-express-uploader.jpg
 create mode 100644 static/img/nyancat.gif

diff --git a/README.md b/README.md
index 71a8b0d..8121d7d 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,9 @@
-express-upload
+nodejs-express-uploader
 ==============
 
-express-upload: node.js, express, multer, easyimage, html5 progress upload example
+express-upload: node.js, express, multer, html5 progress file upload app
 
-##Image Handling
+![c1](https://raw.githubusercontent.com/fatalhalt/express-upload/master/nodejs-express-uploader.jpg?raw=true)
 
-Uses node module easyimage for thumbnail creation to demonstrate resize upon upload
\ No newline at end of file
+##Forked
+from: https://github.com/jonjenkins/express-upload
diff --git a/nodejs-express-uploader.jpg b/nodejs-express-uploader.jpg
new file mode 100644
index 0000000..76ca980
Binary files /dev/null and b/nodejs-express-uploader.jpg differ
diff --git a/package.json b/package.json
index dcaa4e5..6c67f56 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-    "name": "express-upload",
-    "description": "express-upload: node.js, express, multer, easyimage, html5 progress upload example",
+    "name": "nodejs express file uploader",
+    "description": "nodejs-express-uploader: node.js, express, multer, html5 progress file upload app",
     "version": "0.0.1",
     "engines": {
         "node": ">= 0.10.x"
@@ -8,7 +8,6 @@
     "private": true,
     "dependencies": {
         "express": "3.x",
-        "multer": "0.x",
-        "easyimage": "0.x"
+        "multer": "0.x"
     }
 }
\ No newline at end of file
diff --git a/server.js b/server.js
index 51e2608..6945fbc 100644
--- a/server.js
+++ b/server.js
@@ -1,7 +1,7 @@
 var express = require('express'),
     app = express(),
-    multer = require('multer'),
-    img = require('easyimage');
+    multer = require('multer');
+var fs = require('fs');
 
 var imgs = ['png', 'jpg', 'jpeg', 'gif', 'bmp']; // only make thumbnail for these
 
@@ -27,25 +27,14 @@ app.configure(function () {
 });
 
 app.post('/api/upload', function (req, res) {
-    if (imgs.indexOf(getExtension(req.files.userFile.name)) != -1)
-        img.info(req.files.userFile.path, function (err, stdout, stderr) {
-            if (err) throw err;
-//        console.log(stdout); // could determine if resize needed here
-            img.rescrop(
-                {
-                    src: req.files.userFile.path, dst: fnAppend(req.files.userFile.path, 'thumb'),
-                    width: 50, height: 50
-                },
-                function (err, image) {
-                    if (err) throw err;
-                    res.send({image: true, file: req.files.userFile.originalname, savedAs: req.files.userFile.name, thumb: fnAppend(req.files.userFile.name, 'thumb')});
-                }
-            );
-        });
-    else
-        res.send({image: false, file: req.files.userFile.originalname, savedAs: req.files.userFile.name});
+    res.send({image: false, file: req.files.userFile.originalname, savedAs: req.files.userFile.name});
+});
+app.get('/api/filenames', function (req, res) { // this is the RESTful API that will send json reply to browser with filenames list
+    var fnames = fs.readdir('./static/uploads', function (err, files) {
+        res.send(JSON.stringify(files));
+    });
 });
 
-var server = app.listen(3000, function () {
+var server = app.listen(8081, function () {
     console.log('listening on port %d', server.address().port);
 });
\ No newline at end of file
diff --git a/static/img/nyancat.gif b/static/img/nyancat.gif
new file mode 100644
index 0000000..fc230a1
Binary files /dev/null and b/static/img/nyancat.gif differ
diff --git a/static/index.html b/static/index.html
index d790e64..57d8ea0 100644
--- a/static/index.html
+++ b/static/index.html
@@ -1,6 +1,6 @@
-<html>
+<!DOCTYPE html>
 <head>
-    <title>Upload Example</title>
+    <title>fatalhalt file upload</title>
     <style type="text/css" media="screen">
         #progress {
             width: 500px;
@@ -22,6 +22,8 @@
     </style>
 </head>
 <body>
+<img src="./img/nyancat.gif" width="200px" height="140px" />
+<h1>Upload File</h1>
 <form id="uploadForm"
       enctype="multipart/form-data"
       action="/api/upload"
@@ -35,6 +37,13 @@
 
     <div id="bar"></div>
 </div>
+
+<div id="uploadedlist" style="padding-top: 20px">
+    <h2>Uploaded Files</h2>
+    <span id="filenames">
+    </span>
+</div>
+
 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 <script src="./js/upload.js"></script>
 </body>
diff --git a/static/js/upload.js b/static/js/upload.js
index a8a0e5a..da60c13 100644
--- a/static/js/upload.js
+++ b/static/js/upload.js
@@ -49,4 +49,19 @@ $(function () {
     function status(message) {
         $('#status').text(message);
     }
-});
\ No newline at end of file
+
+    function uploadedFilenameList() {
+        var xhr = new XMLHttpRequest();
+        xhr.open('get', '/api/filenames', true);
+        xhr.onload = function () {
+            var fnames = JSON.parse(xhr.response);
+            fnames.forEach(function (element) {
+                $("#filenames").append("<a href=\"./uploads/" + element + "\" style=\"display: block\">" + element + "</a>");
+            });
+        }
+        xhr.send();
+    }
+    uploadedFilenameList();
+});
+
+
-- 
cgit v1.2.3