diff options
| author | Kyle K <kylek389@gmail.com> | 2017-03-01 00:33:22 -0600 |
|---|---|---|
| committer | Kyle K <kylek389@gmail.com> | 2017-03-01 00:48:26 -0600 |
| commit | c2bb74ac0096a03438d7eb4ab79ee4b5d5b7ddf0 (patch) | |
| tree | b986c76b848b8ce77f276d2be4e6cf5aac769a57 | |
| parent | 2c93e51b32cb68d4d828648903408299b6dc7cc7 (diff) | |
| download | express-upload-c2bb74ac0096a03438d7eb4ab79ee4b5d5b7ddf0.tar.gz express-upload-c2bb74ac0096a03438d7eb4ab79ee4b5d5b7ddf0.tar.bz2 express-upload-c2bb74ac0096a03438d7eb4ab79ee4b5d5b7ddf0.zip | |
implement and display a list of uploaded files
- adds a /api/filenames RESTful API
- adds a cute nyancat banner
| -rw-r--r-- | README.md | 9 | ||||
| -rw-r--r-- | nodejs-express-uploader.jpg | bin | 0 -> 37142 bytes | |||
| -rw-r--r-- | package.json | 7 | ||||
| -rw-r--r-- | server.js | 29 | ||||
| -rw-r--r-- | static/img/nyancat.gif | bin | 0 -> 22528 bytes | |||
| -rw-r--r-- | static/index.html | 13 | ||||
| -rw-r--r-- | static/js/upload.js | 17 |
7 files changed, 44 insertions, 31 deletions
@@ -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 + -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 Binary files differnew file mode 100644 index 0000000..76ca980 --- /dev/null +++ b/nodejs-express-uploader.jpg 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 @@ -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 Binary files differnew file mode 100644 index 0000000..fc230a1 --- /dev/null +++ b/static/img/nyancat.gif 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(); +}); + + |
