├── .gitignore
├── README.md
├── package.json
├── server.js
└── static
├── index.html
├── js
└── upload.js
└── uploads
└── .gitignore
/.gitignore:
--------------------------------------------------------------------------------
1 | # .gitignore
2 | .DS_Store
3 |
4 | # Node.js #
5 | ###########
6 | node_modules/
7 |
8 | # IDE #
9 | #######
10 | *.iml
11 | .idea
12 |
13 | # AWS #
14 | #######
15 | .elasticbeanstalk/
16 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | express-upload
2 | ==============
3 |
4 | express-upload: node.js, express, multer, easyimage, html5 progress upload example
5 |
6 | ##Image Handling
7 |
8 | Uses node module easyimage for thumbnail creation to demonstrate resize upon upload
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "express-upload",
3 | "description": "express-upload: node.js, express, multer, easyimage, html5 progress upload example",
4 | "version": "0.0.1",
5 | "engines": {
6 | "node": ">= 0.10.x"
7 | },
8 | "private": true,
9 | "dependencies": {
10 | "express": "3.x",
11 | "multer": "0.x",
12 | "easyimage": "0.x"
13 | }
14 | }
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | var express = require('express'),
2 | app = express(),
3 | multer = require('multer'),
4 | img = require('easyimage');
5 |
6 | var imgs = ['png', 'jpg', 'jpeg', 'gif', 'bmp']; // only make thumbnail for these
7 |
8 | function getExtension(fn) {
9 | return fn.split('.').pop();
10 | }
11 |
12 | function fnAppend(fn, insert) {
13 | var arr = fn.split('.');
14 | var ext = arr.pop();
15 | insert = (insert !== undefined) ? insert : new Date().getTime();
16 | return arr + '.' + insert + '.' + ext;
17 | }
18 |
19 | app.configure(function () {
20 | app.use(multer({
21 | dest: './static/uploads/',
22 | rename: function (fieldname, filename) {
23 | return filename.replace(/\W+/g, '-').toLowerCase();
24 | }
25 | }));
26 | app.use(express.static(__dirname + '/static'));
27 | });
28 |
29 | app.post('/api/upload', function (req, res) {
30 | if (imgs.indexOf(getExtension(req.files.userFile.name)) != -1)
31 | img.info(req.files.userFile.path, function (err, stdout, stderr) {
32 | if (err) throw err;
33 | // console.log(stdout); // could determine if resize needed here
34 | img.rescrop(
35 | {
36 | src: req.files.userFile.path, dst: fnAppend(req.files.userFile.path, 'thumb'),
37 | width: 50, height: 50
38 | },
39 | function (err, image) {
40 | if (err) throw err;
41 | res.send({image: true, file: req.files.userFile.originalname, savedAs: req.files.userFile.name, thumb: fnAppend(req.files.userFile.name, 'thumb')});
42 | }
43 | );
44 | });
45 | else
46 | res.send({image: false, file: req.files.userFile.originalname, savedAs: req.files.userFile.name});
47 | });
48 |
49 | var server = app.listen(3000, function () {
50 | console.log('listening on port %d', server.address().port);
51 | });
--------------------------------------------------------------------------------
/static/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Upload Example
4 |
23 |
24 |
25 |
31 |
32 |
33 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/static/js/upload.js:
--------------------------------------------------------------------------------
1 | $(function () {
2 | status('choose a file');
3 | var timerId;
4 |
5 | function setTimer() {
6 | timerId = setInterval(function () {
7 | if ($('#userFileInput').val() !== '') {
8 | clearInterval(timerId);
9 | $('#uploadForm').submit();
10 | }
11 | }, 500);
12 | }
13 |
14 | function setProgress(percent) {
15 | $('#percent').html(percent + '%');
16 | $('#bar').css('width', percent + '%');
17 | }
18 |
19 | setTimer();
20 | $('#uploadForm').submit(function () {
21 | status('0%');
22 | var formData = new FormData();
23 | var file = document.getElementById('userFileInput').files[0];
24 | formData.append('userFile', file);
25 | var xhr = new XMLHttpRequest();
26 | xhr.overrideMimeType('application/json');
27 | xhr.open('post', '/api/upload', true);
28 | xhr.upload.onprogress = function (e) {
29 | if (e.lengthComputable)
30 | setProgress(Math.round((e.loaded / e.total) * 100));
31 | };
32 | xhr.onerror = function (e) {
33 | status('error while trying to upload');
34 | };
35 | xhr.onload = function () {
36 | $('#userFileInput').val('');
37 | setProgress(0);
38 | var resJson = JSON.parse(xhr.responseText);
39 | status(resJson.file + ' done, choose a file');
40 | setTimer();
41 | if (resJson.image)
42 | window.open('./uploads/' + resJson.savedAs, 'upload', 'status=1, height = 300, width = 300, resizable = 0');
43 | else
44 | console.log('not an image');
45 | };
46 | xhr.send(formData);
47 | return false; // no refresh
48 | });
49 | function status(message) {
50 | $('#status').text(message);
51 | }
52 | });
--------------------------------------------------------------------------------
/static/uploads/.gitignore:
--------------------------------------------------------------------------------
1 | # Ignore everything in this directory
2 | *
3 | # Except this file
4 | !.gitignore
--------------------------------------------------------------------------------