From de8da7c8473305f95929e1853cb73bd51420af91 Mon Sep 17 00:00:00 2001
From: soomtong
Date: Tue, 1 Jan 2013 23:05:34 +0900
Subject: [PATCH 01/51] make readme.md
---
examples/README.md | 7 +++++++
1 file changed, 7 insertions(+)
create mode 100644 examples/README.md
diff --git a/examples/README.md b/examples/README.md
new file mode 100644
index 0000000..f5e2c64
--- /dev/null
+++ b/examples/README.md
@@ -0,0 +1,7 @@
+## YET ANATHER JQUERY FILE UPLOAD MIDDLEWARE EXAMPLES
+
+# to run
+
+```
+project/examples > node app.js
+```
From fa6b5b92e188615a3ca6a7db0690cb09fdb254eb Mon Sep 17 00:00:00 2001
From: soomtong
Date: Tue, 1 Jan 2013 23:07:10 +0900
Subject: [PATCH 02/51] make readme.md
---
examples/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/examples/README.md b/examples/README.md
index f5e2c64..30a705f 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -1,6 +1,6 @@
## YET ANATHER JQUERY FILE UPLOAD MIDDLEWARE EXAMPLES
-# to run
+to run
```
project/examples > node app.js
From 38d6248984d4a490cd5a7291435ef25aa78298b4 Mon Sep 17 00:00:00 2001
From: soomtong
Date: Wed, 2 Jan 2013 22:53:29 +0900
Subject: [PATCH 03/51] check this
---
examples/README.md | 3 +
examples/app.js | 141 ++++++++++++++++++++
examples/config.js | 56 ++++++++
examples/package.json | 10 ++
examples/public/scripts/file_upload.js | 174 +++++++++++++++++++++++++
examples/public/styles/style.css | 151 +++++++++++++++++++++
examples/views/form.html | 80 ++++++++++++
7 files changed, 615 insertions(+)
create mode 100644 examples/app.js
create mode 100644 examples/config.js
create mode 100644 examples/package.json
create mode 100644 examples/public/scripts/file_upload.js
create mode 100644 examples/public/styles/style.css
create mode 100644 examples/views/form.html
diff --git a/examples/README.md b/examples/README.md
index 30a705f..d94f76a 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -3,5 +3,8 @@
to run
```
+project/examples > npm insatll
project/examples > node app.js
```
+
+- to image resize : need imagemagick `http://www.imagemagick.org/script/binary-releases.php`
\ No newline at end of file
diff --git a/examples/app.js b/examples/app.js
new file mode 100644
index 0000000..dcdc23b
--- /dev/null
+++ b/examples/app.js
@@ -0,0 +1,141 @@
+/*
+* to run :
+* node app.js
+* */
+
+/*
+* dependencies
+* */
+var express = require('express'),
+ http = require('http'),
+ upload = require('jquery-file-upload-middleware');
+
+var cons = require('consolidate'),
+ swig = require('swig');
+
+
+// configuration
+var resizeConf = require('./config').resizeVersion;
+var dirs = require('./config').directors;
+
+
+
+// express setup
+var app = express();
+
+
+// set template engine
+app.engine('html', cons.swig);
+swig.init({
+ root: __dirname + '/views',
+ allowErrors: true,
+ cache: false
+});
+
+
+
+// jquery-file-upload helper
+app.use('/upload/default', function (req, res, next) {
+ upload.fileHandler({
+ tmpDir: dirs.temp,
+ uploadDir: __dirname + dirs.default,
+ uploadUrl: dirs.default_url,
+ imageVersions: resizeConf.default
+ })(req, res, next);
+});
+
+app.use('/upload/location', upload.fileHandler({
+ tmpDir: dirs.temp,
+ uploadDir: __dirname + dirs.location,
+ uploadUrl: dirs.location_url,
+ imageVersions: resizeConf.location
+}));
+
+app.use('/upload/location/list', function (req, res, next) {
+ upload.fileManager({
+ uploadDir: function () {
+ return __dirname + dirs.location;
+ },
+ uploadUrl: function () {
+ return dirs.location_url;
+ }
+ }).getFiles(function (files) {
+ res.json(files);
+ });
+});
+
+// bind event
+upload.on('end', function (fileInfo) {
+ // insert file info
+ console.log("files upload complete");
+ console.log(fileInfo);
+});
+
+upload.on('delete', function (fileName) {
+ // remove file info
+ console.log(fileName);
+});
+
+upload.on('error', function (e) {
+ console.log(e.message);
+});
+
+
+
+// Configuration
+app.configure(function () {
+ app.set('port', process.env.PORT || 3001);
+ app.set('view engine', 'html');
+ app.set('view options', { layout: false });
+ app.set('views', __dirname + '/views');
+
+ app.use(express.bodyParser());
+ app.use(express.methodOverride());
+ app.use(express.cookieParser('token'));
+ app.use(express.session({ secret: 'secret' }));
+ app.use(express.favicon());
+ app.use(express.static(__dirname + '/public'));
+});
+
+app.configure('development', function () {
+ app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
+ app.set('view cache', false);
+});
+
+app.configure('production', function () {
+ app.use(express.errorHandler());
+ app.set('view cache', true);
+});
+
+
+
+/*
+* routes
+* */
+app.get('/', function (req, res) {
+ res.send('Call this url in browser : http://localhost:3001/location/input');
+});
+
+
+app.get('/location/input', function (req, res) {
+ var params = {
+ title: "jquery file upload example"
+ };
+
+ res.render('form', params);
+});
+
+app.post('/location/input', function (req, res) {
+ console.log(req.body, req.files);
+ res.send('' + req.body + '
' + '' + req.files + '
');
+});
+
+
+
+/*
+ * start server
+ * */
+http.createServer(app).listen(app.get('port'), function () {
+ console.log("Express server listening on port " + app.get('port'));
+ console.log("access url /location/input");
+});
diff --git a/examples/config.js b/examples/config.js
new file mode 100644
index 0000000..129c04e
--- /dev/null
+++ b/examples/config.js
@@ -0,0 +1,56 @@
+exports.resizeVersion = {
+ default: {
+ thumbnail:{
+ width:80,
+ height:"80!"
+ },
+ small: {
+ width:200,
+ height:"150!"
+ },
+ medium:{
+ width:400,
+ height:300
+ },
+ large: {
+ width: 800,
+ height: 600
+ }
+ },
+ location : {
+ thumbnail:{
+ width:80,
+ height:"80^",
+ imageArgs: [
+ "-gravity", "center",
+ "-extent", "80x80"
+ ]
+ },
+ small: {
+ width:"200",
+ height:"150^",
+ imageArgs: [
+ "-gravity", "center",
+ "-extent", "200x150"
+ ]
+ },
+ medium:{
+ width:400,
+ height:300
+ },
+ large: {
+ width: 800,
+ height: 600
+ }
+ }
+};
+
+exports.directors = {
+ temp: './public/tmp',
+
+ default: '/public/uploads/default',
+ default_url: '/uploads/default',
+
+ location: '/public/uploads/location',
+ location_url: '/uploads/location'
+};
\ No newline at end of file
diff --git a/examples/package.json b/examples/package.json
new file mode 100644
index 0000000..68a668c
--- /dev/null
+++ b/examples/package.json
@@ -0,0 +1,10 @@
+{
+ "name":"examples",
+ "version":"0.0.1",
+ "dependencies":{
+ "express":">= 3.0.0",
+ "consolidate":">= 0.4.0",
+ "swig":">= 0.12.0",
+ "jquery-file-upload-middleware": ">= 0.0.8"
+ }
+}
\ No newline at end of file
diff --git a/examples/public/scripts/file_upload.js b/examples/public/scripts/file_upload.js
new file mode 100644
index 0000000..ea8d49d
--- /dev/null
+++ b/examples/public/scripts/file_upload.js
@@ -0,0 +1,174 @@
+$('#location_gallery').fileupload({
+ dataType:'json',
+ url:'/upload/location',
+ autoUpload: true,
+ sequentialUploads:true,
+ acceptFileTypes:/(\.|\/)(gif|jpe?g|png)$/i,
+ process:[
+ {
+ action:'load',
+ fileTypes:/^image\/(gif|jpeg|png)$/,
+ maxFileSize: 20000000 // 20MB
+ },
+ {
+ action:'resize',
+ maxWidth:1200,
+ maxHeight:800
+ },
+ {
+ action:'save'
+ }
+ ],
+ dropZone: $('#gallery_dropzone'),
+ progressall:function (e, data) {
+ var progress = parseInt(data.loaded / data.total * 100, 10);
+ $('#gallery_progress .bar').css('width', progress + '%');
+ },
+ filesContainer:$('#upload_gallery_files'),
+ uploadTemplate:function (o) {
+ var rows = $();
+ $.each(o.files, function (index, file) {
+ var row = $('' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ (file.error ? '
Error' :
+ '
' +
+ '
') +
+ '
' +
+ (file.error ? '
' +
+ '
' :
+ '
' +
+ '
' +
+ ' [
]') +
+ '
![]()
')
+ .find('img').prop('src', file.small_url);
+ row.find('a').prop('rel', 'gallery');
+ }
+ row.find('a').prop('href', file.url);
+ row.find('.delete button')
+ .attr('data-type', file.delete_type)
+ .attr('data-url', file.delete_url);
+ // add file data input
+ row.append('')
+ .find('input[name="galleryImage[]"]').val(file.name);
+ row.find('img').data('fileinfo',file);
+ }
+ rows = rows.add(row);
+ });
+ return rows;
+ }
+});
+
+$('#location_cover').fileupload({
+ dataType:'json',
+ url:'/upload/location',
+ autoUpload: true,
+ acceptFileTypes:/(\.|\/)(gif|jpe?g|png)$/i,
+ process:[
+ {
+ action:'load',
+ fileTypes:/^image\/(gif|jpeg|png)$/,
+ maxFileSize: 20000000 // 20MB
+ },
+ {
+ action:'resize',
+ maxWidth:1200,
+ maxHeight:600
+ },
+ {
+ action:'save'
+ }
+ ],
+ dropZone: $('#cover_dropzone'),
+ progressall:function (e, data) {
+ var progress = parseInt(data.loaded / data.total * 100, 10);
+ $('#cover_progress .bar').css('width', progress + '%');
+ },
+ filesContainer:$('#upload_cover_files'),
+ uploadTemplate:function (o) {
+ var rows = $();
+ $.each(o.files, function (index, file) {
+ var row = $('' +
+ '
' +
+ '
' +
+ '
' +
+ '
' +
+ (file.error ? '
Error' :
+ '
' +
+ '
') +
+ '
' +
+ (file.error ? '
' +
+ '
' :
+ '
' +
+ '
' +
+ '
') +
+ '
![]()
')
+ .find('img').prop('src', file.medium_url);
+ row.find('a').prop('rel', 'gallery');
+ }
+ row.find('a').prop('href', file.url);
+ row.find('.delete button')
+ .attr('data-type', file.delete_type)
+ .attr('data-url', file.delete_url);
+ // add file data input
+ row.append('')
+ .find('input[name="excerptImage"]').val(file.name);
+ row.find('img').data('fileinfo',file);
+ }
+ rows = rows.add(row);
+ });
+ return rows;
+ }
+});
+
+$(document).bind('drop dragover', function (e) {
+ e.preventDefault();
+});
diff --git a/examples/public/styles/style.css b/examples/public/styles/style.css
new file mode 100644
index 0000000..6ece518
--- /dev/null
+++ b/examples/public/styles/style.css
@@ -0,0 +1,151 @@
+/* custom css for location upload form */
+.form-location {
+ border: 1px solid #dddddd;
+ padding: 1em;
+ margin: 1em auto;
+}
+
+.form-location legend {
+ font-size: 1.45em;
+ color: #858585;
+ padding: 0 0.5em;
+}
+
+.form-location label {
+ font-size: 1.45em;
+ padding: 0 0.35em;
+ display: inline;
+ float: left;
+}
+.form-location input {
+ vertical-align: baseline;
+}
+
+.form-location .step1 p {
+ padding: 4px 0;
+}
+.form-location .step1 input[type=text] {
+ display: inline;
+ width: 98%;
+ padding: 3px;
+}
+
+.form-location .step2 textarea {
+ font-size: 1.8em;
+ line-height: 160%;
+ width: 98%;
+ padding: 2px;
+}
+
+.form-location .step3 input[type="range"] {
+ display: inline;
+ width: 98%;
+}
+
+.fileupload-buttonbar {
+ display: block;
+}
+
+.btn {
+ font-size: 14px;
+ line-height: 20px;
+ text-align: center;
+ display: inline-block;
+ padding: 4px 12px;
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: 14px;
+ line-height: 20px;
+ color: #333333;
+ text-align: center;
+ text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+ vertical-align: middle;
+ cursor: pointer;
+ background-color: #f5f5f5;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+ background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+ background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+ background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+ background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+ background-repeat: repeat-x;
+ border: 1px solid #bbbbbb;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+ border-bottom-color: #a2a2a2;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+ filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.fileinput-button {
+ color: #ffffff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ background-color: #5bb75b;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
+ background-image: -webkit-linear-gradient(top, #62c462, #51a351);
+ background-image: -o-linear-gradient(top, #62c462, #51a351);
+ background-image: linear-gradient(to bottom, #62c462, #51a351);
+ background-image: -moz-linear-gradient(top, #62c462, #51a351);
+ background-repeat: repeat-x;
+ border-color: #51a351 #51a351 #387038;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+ filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
+ filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+}
+
+.progressbar {
+ clear: both;
+}
+.progressbar, .bar {
+ height: 16px;
+}
+
+.template-upload, .template-download {
+ width: 25%;
+ float: left;
+ list-style-type: none;
+}
+
+#upload_cover_files .template-upload, #upload_cover_files .template-download {
+ width: 50%;
+}
+
+.template-upload button, .template-download button {
+ border: 1px solid #696969;
+ background: #f5f5f5;
+}
+
+.template-upload .outer {
+ position: relative;
+ border: 1px solid #dcdcdc;
+ margin: 2px;
+ padding: 2px;
+}
+.template-upload .outer span.cancel {
+ position: absolute;
+ top:0;
+ right: 0;
+}
+.template-download .outer {
+ position: relative;
+ border: 1px solid #dcdcdc;
+ margin: 2px;
+ padding: 2px;
+}
+.template-download .outer span.delete {
+ position: absolute;
+ top:0;
+ right: 0;
+}
+
+#location_upload label.error {
+ display: none;
+ position: relative;
+ margin-top: -1.7em;
+ color: #cd5c5c;
+}
\ No newline at end of file
diff --git a/examples/views/form.html b/examples/views/form.html
new file mode 100644
index 0000000..4a6b78d
--- /dev/null
+++ b/examples/views/form.html
@@ -0,0 +1,80 @@
+
+
+ {{title}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+