Skip to content

Commit 38d6248

Browse files
soomtongsoomtong
committed
check this
1 parent fa6b5b9 commit 38d6248

File tree

7 files changed

+615
-0
lines changed

7 files changed

+615
-0
lines changed

‎examples/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,8 @@
33
to run
44

55
```
6+
project/examples > npm insatll
67
project/examples > node app.js
78
```
9+
10+
- to image resize : need imagemagick `http://www.imagemagick.org/script/binary-releases.php`

‎examples/app.js

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
/*
2+
* to run :
3+
* node app.js
4+
* */
5+
6+
/*
7+
* dependencies
8+
* */
9+
var express = require('express'),
10+
http = require('http'),
11+
upload = require('jquery-file-upload-middleware');
12+
13+
var cons = require('consolidate'),
14+
swig = require('swig');
15+
16+
17+
// configuration
18+
var resizeConf = require('./config').resizeVersion;
19+
var dirs = require('./config').directors;
20+
21+
22+
23+
// express setup
24+
var app = express();
25+
26+
27+
// set template engine
28+
app.engine('html', cons.swig);
29+
swig.init({
30+
root: __dirname + '/views',
31+
allowErrors: true,
32+
cache: false
33+
});
34+
35+
36+
37+
// jquery-file-upload helper
38+
app.use('/upload/default', function (req, res, next) {
39+
upload.fileHandler({
40+
tmpDir: dirs.temp,
41+
uploadDir: __dirname + dirs.default,
42+
uploadUrl: dirs.default_url,
43+
imageVersions: resizeConf.default
44+
})(req, res, next);
45+
});
46+
47+
app.use('/upload/location', upload.fileHandler({
48+
tmpDir: dirs.temp,
49+
uploadDir: __dirname + dirs.location,
50+
uploadUrl: dirs.location_url,
51+
imageVersions: resizeConf.location
52+
}));
53+
54+
app.use('/upload/location/list', function (req, res, next) {
55+
upload.fileManager({
56+
uploadDir: function () {
57+
return __dirname + dirs.location;
58+
},
59+
uploadUrl: function () {
60+
return dirs.location_url;
61+
}
62+
}).getFiles(function (files) {
63+
res.json(files);
64+
});
65+
});
66+
67+
// bind event
68+
upload.on('end', function (fileInfo) {
69+
// insert file info
70+
console.log("files upload complete");
71+
console.log(fileInfo);
72+
});
73+
74+
upload.on('delete', function (fileName) {
75+
// remove file info
76+
console.log(fileName);
77+
});
78+
79+
upload.on('error', function (e) {
80+
console.log(e.message);
81+
});
82+
83+
84+
85+
// Configuration
86+
app.configure(function () {
87+
app.set('port', process.env.PORT || 3001);
88+
app.set('view engine', 'html');
89+
app.set('view options', { layout: false });
90+
app.set('views', __dirname + '/views');
91+
92+
app.use(express.bodyParser());
93+
app.use(express.methodOverride());
94+
app.use(express.cookieParser('token'));
95+
app.use(express.session({ secret: 'secret' }));
96+
app.use(express.favicon());
97+
app.use(express.static(__dirname + '/public'));
98+
});
99+
100+
app.configure('development', function () {
101+
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
102+
app.set('view cache', false);
103+
});
104+
105+
app.configure('production', function () {
106+
app.use(express.errorHandler());
107+
app.set('view cache', true);
108+
});
109+
110+
111+
112+
/*
113+
* routes
114+
* */
115+
app.get('/', function (req, res) {
116+
res.send('Call this url in browser : http://localhost:3001/location/input');
117+
});
118+
119+
120+
app.get('/location/input', function (req, res) {
121+
var params = {
122+
title: "jquery file upload example"
123+
};
124+
125+
res.render('form', params);
126+
});
127+
128+
app.post('/location/input', function (req, res) {
129+
console.log(req.body, req.files);
130+
res.send('<p>' + req.body + '</p>' + '<p>' + req.files + '</p>');
131+
});
132+
133+
134+
135+
/*
136+
* start server
137+
* */
138+
http.createServer(app).listen(app.get('port'), function () {
139+
console.log("Express server listening on port " + app.get('port'));
140+
console.log("access url /location/input");
141+
});

‎examples/config.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
exports.resizeVersion = {
2+
default: {
3+
thumbnail:{
4+
width:80,
5+
height:"80!"
6+
},
7+
small: {
8+
width:200,
9+
height:"150!"
10+
},
11+
medium:{
12+
width:400,
13+
height:300
14+
},
15+
large: {
16+
width: 800,
17+
height: 600
18+
}
19+
},
20+
location : {
21+
thumbnail:{
22+
width:80,
23+
height:"80^",
24+
imageArgs: [
25+
"-gravity", "center",
26+
"-extent", "80x80"
27+
]
28+
},
29+
small: {
30+
width:"200",
31+
height:"150^",
32+
imageArgs: [
33+
"-gravity", "center",
34+
"-extent", "200x150"
35+
]
36+
},
37+
medium:{
38+
width:400,
39+
height:300
40+
},
41+
large: {
42+
width: 800,
43+
height: 600
44+
}
45+
}
46+
};
47+
48+
exports.directors = {
49+
temp: './public/tmp',
50+
51+
default: '/public/uploads/default',
52+
default_url: '/uploads/default',
53+
54+
location: '/public/uploads/location',
55+
location_url: '/uploads/location'
56+
};

‎examples/package.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"name":"examples",
3+
"version":"0.0.1",
4+
"dependencies":{
5+
"express":">= 3.0.0",
6+
"consolidate":">= 0.4.0",
7+
"swig":">= 0.12.0",
8+
"jquery-file-upload-middleware": ">= 0.0.8"
9+
}
10+
}

‎examples/public/scripts/file_upload.js

+174
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
$('#location_gallery').fileupload({
2+
dataType:'json',
3+
url:'/upload/location',
4+
autoUpload: true,
5+
sequentialUploads:true,
6+
acceptFileTypes:/(\.|\/)(gif|jpe?g|png)$/i,
7+
process:[
8+
{
9+
action:'load',
10+
fileTypes:/^image\/(gif|jpeg|png)$/,
11+
maxFileSize: 20000000 // 20MB
12+
},
13+
{
14+
action:'resize',
15+
maxWidth:1200,
16+
maxHeight:800
17+
},
18+
{
19+
action:'save'
20+
}
21+
],
22+
dropZone: $('#gallery_dropzone'),
23+
progressall:function (e, data) {
24+
var progress = parseInt(data.loaded / data.total * 100, 10);
25+
$('#gallery_progress .bar').css('width', progress + '%');
26+
},
27+
filesContainer:$('#upload_gallery_files'),
28+
uploadTemplate:function (o) {
29+
var rows = $();
30+
$.each(o.files, function (index, file) {
31+
var row = $('<li class="template-upload">' +
32+
'<div class="outer"><div class="preview"><span class="fade"></span></div>' +
33+
'<span class="cancel"><button type="button">Delete</button></span>' +
34+
'<span class="name"></span>' +
35+
'<span class="size"></span>' +
36+
(file.error ? '<span class="error">Error</span>' :
37+
'<p><div class="progress">' +
38+
'<div class="bar" style="width:0%;"></div></div></p>' +
39+
'<span class="start"><button type="button">Send</button></span>') +
40+
'</div></li>');
41+
row.find('.name').text(file.name);
42+
row.find('.size').text(o.formatFileSize(file.size));
43+
if (file.error) {
44+
row.find('.error').text(file.error || 'File upload error');
45+
}
46+
rows = rows.add(row);
47+
});
48+
return rows;
49+
},
50+
downloadTemplate: function (o) {
51+
var rows = $();
52+
$.each(o.files, function (index, file) {
53+
var row = $('<li class="template-download">' +
54+
'<div class="outer">' +
55+
(file.error ? '<span class="name"></span>' +
56+
'<span class="size"></span><span class="error"></span>' :
57+
'<div class="preview"></div>' +
58+
'<span class="name"><a></a></span>' +
59+
' [<span class="size"></span>]') +
60+
'<span class="delete"><button type="button">Delete</button></span></div></li>');
61+
row.find('.size').text(o.formatFileSize(file.size));
62+
if (file.error) {
63+
row.find('.name').text(file.name);
64+
row.find('.error').text(file.error || 'File upload error');
65+
} else {
66+
row.find('.name a').text(file.name);
67+
if (file.url) {
68+
row.find('.preview').append('<a><img></a>')
69+
.find('img').prop('src', file.small_url);
70+
row.find('a').prop('rel', 'gallery');
71+
}
72+
row.find('a').prop('href', file.url);
73+
row.find('.delete button')
74+
.attr('data-type', file.delete_type)
75+
.attr('data-url', file.delete_url);
76+
// add file data input
77+
row.append('<input type="hidden" name="galleryImage[]">')
78+
.find('input[name="galleryImage[]"]').val(file.name);
79+
row.find('img').data('fileinfo',file);
80+
}
81+
rows = rows.add(row);
82+
});
83+
return rows;
84+
}
85+
});
86+
87+
$('#location_cover').fileupload({
88+
dataType:'json',
89+
url:'/upload/location',
90+
autoUpload: true,
91+
acceptFileTypes:/(\.|\/)(gif|jpe?g|png)$/i,
92+
process:[
93+
{
94+
action:'load',
95+
fileTypes:/^image\/(gif|jpeg|png)$/,
96+
maxFileSize: 20000000 // 20MB
97+
},
98+
{
99+
action:'resize',
100+
maxWidth:1200,
101+
maxHeight:600
102+
},
103+
{
104+
action:'save'
105+
}
106+
],
107+
dropZone: $('#cover_dropzone'),
108+
progressall:function (e, data) {
109+
var progress = parseInt(data.loaded / data.total * 100, 10);
110+
$('#cover_progress .bar').css('width', progress + '%');
111+
},
112+
filesContainer:$('#upload_cover_files'),
113+
uploadTemplate:function (o) {
114+
var rows = $();
115+
$.each(o.files, function (index, file) {
116+
var row = $('<li class="template-upload">' +
117+
'<div class="outer"><div class="preview"><span class="fade"></span></div>' +
118+
'<span class="cancel"><button type="button">Delete</button></span>' +
119+
'<span class="name"></span>' +
120+
'<span class="size"></span>' +
121+
(file.error ? '<span class="error">Error</span>' :
122+
'<p><div class="progress">' +
123+
'<div class="bar" style="width:0%;"></div></div></p>' +
124+
'<span class="start"><button type="button">Send</button></span>') +
125+
'</div></li>');
126+
row.find('.name').text(file.name);
127+
row.find('.size').text(o.formatFileSize(file.size));
128+
if (file.error) {
129+
row.find('.error').text(file.error || 'File upload error');
130+
}
131+
rows = rows.add(row);
132+
});
133+
return rows;
134+
},
135+
downloadTemplate: function (o) {
136+
var rows = $();
137+
$.each(o.files, function (index, file) {
138+
var row = $('<li class="template-download">' +
139+
'<div class="outer">' +
140+
(file.error ? '<span class="name"></span>' +
141+
'<span class="size"></span><span class="error"></span>' :
142+
'<div class="preview"></div>' +
143+
'<span class="name"><a></a></span>' +
144+
'<span class="size"></span>') +
145+
'<span class="delete"><button type="button">Delete</button></span></div></li>');
146+
row.find('.size').text(o.formatFileSize(file.size));
147+
if (file.error) {
148+
row.find('.name').text(file.name);
149+
row.find('.error').text(file.error || 'File upload error');
150+
} else {
151+
row.find('.name a').text(file.name);
152+
if (file.url) {
153+
row.find('.preview').append('<a><img></a>')
154+
.find('img').prop('src', file.medium_url);
155+
row.find('a').prop('rel', 'gallery');
156+
}
157+
row.find('a').prop('href', file.url);
158+
row.find('.delete button')
159+
.attr('data-type', file.delete_type)
160+
.attr('data-url', file.delete_url);
161+
// add file data input
162+
row.append('<input type="hidden" name="excerptImage">')
163+
.find('input[name="excerptImage"]').val(file.name);
164+
row.find('img').data('fileinfo',file);
165+
}
166+
rows = rows.add(row);
167+
});
168+
return rows;
169+
}
170+
});
171+
172+
$(document).bind('drop dragover', function (e) {
173+
e.preventDefault();
174+
});

0 commit comments

Comments
 (0)