').prop('href', options.postMessage)[0],
62 | target = loc.protocol + '//' + loc.host,
63 | xhrUpload = options.xhr().upload;
64 | return {
65 | send: function (_, completeCallback) {
66 | counter += 1;
67 | var message = {
68 | id: 'postmessage-transport-' + counter
69 | },
70 | eventName = 'message.' + message.id;
71 | iframe = $(
72 | ''
75 | ).bind('load', function () {
76 | $.each(names, function (i, name) {
77 | message[name] = options[name];
78 | });
79 | message.dataType = message.dataType.replace('postmessage ', '');
80 | $(window).bind(eventName, function (e) {
81 | e = e.originalEvent;
82 | var data = e.data,
83 | ev;
84 | if (e.origin === target && data.id === message.id) {
85 | if (data.type === 'progress') {
86 | ev = document.createEvent('Event');
87 | ev.initEvent(data.type, false, true);
88 | $.extend(ev, data);
89 | xhrUpload.dispatchEvent(ev);
90 | } else {
91 | completeCallback(
92 | data.status,
93 | data.statusText,
94 | {postmessage: data.result},
95 | data.headers
96 | );
97 | iframe.remove();
98 | $(window).unbind(eventName);
99 | }
100 | }
101 | });
102 | iframe[0].contentWindow.postMessage(
103 | message,
104 | target
105 | );
106 | }).appendTo(document.body);
107 | },
108 | abort: function () {
109 | if (iframe) {
110 | iframe.remove();
111 | }
112 | }
113 | };
114 | }
115 | });
116 |
117 | }));
118 |
--------------------------------------------------------------------------------
/js/jquery.fileupload-validate.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery File Upload Validation Plugin 1.1.2
3 | * https://github.com/blueimp/jQuery-File-Upload
4 | *
5 | * Copyright 2013, Sebastian Tschan
6 | * https://blueimp.net
7 | *
8 | * Licensed under the MIT license:
9 | * http://www.opensource.org/licenses/MIT
10 | */
11 |
12 | /* global define, window */
13 |
14 | (function (factory) {
15 | 'use strict';
16 | if (typeof define === 'function' && define.amd) {
17 | // Register as an anonymous AMD module:
18 | define([
19 | 'jquery',
20 | './jquery.fileupload-process'
21 | ], factory);
22 | } else {
23 | // Browser globals:
24 | factory(
25 | window.jQuery
26 | );
27 | }
28 | }(function ($) {
29 | 'use strict';
30 |
31 | // Append to the default processQueue:
32 | $.blueimp.fileupload.prototype.options.processQueue.push(
33 | {
34 | action: 'validate',
35 | // Always trigger this action,
36 | // even if the previous action was rejected:
37 | always: true,
38 | // Options taken from the global options map:
39 | acceptFileTypes: '@',
40 | maxFileSize: '@',
41 | minFileSize: '@',
42 | maxNumberOfFiles: '@',
43 | disabled: '@disableValidation'
44 | }
45 | );
46 |
47 | // The File Upload Validation plugin extends the fileupload widget
48 | // with file validation functionality:
49 | $.widget('blueimp.fileupload', $.blueimp.fileupload, {
50 |
51 | options: {
52 | /*
53 | // The regular expression for allowed file types, matches
54 | // against either file type or file name:
55 | acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
56 | // The maximum allowed file size in bytes:
57 | maxFileSize: 10000000, // 10 MB
58 | // The minimum allowed file size in bytes:
59 | minFileSize: undefined, // No minimal file size
60 | // The limit of files to be uploaded:
61 | maxNumberOfFiles: 10,
62 | */
63 |
64 | // Function returning the current number of files,
65 | // has to be overriden for maxNumberOfFiles validation:
66 | getNumberOfFiles: $.noop,
67 |
68 | // Error and info messages:
69 | messages: {
70 | maxNumberOfFiles: 'Maximum number of files exceeded',
71 | acceptFileTypes: 'File type not allowed',
72 | maxFileSize: 'File is too large',
73 | minFileSize: 'File is too small'
74 | }
75 | },
76 |
77 | processActions: {
78 |
79 | validate: function (data, options) {
80 | if (options.disabled) {
81 | return data;
82 | }
83 | var dfd = $.Deferred(),
84 | settings = this.options,
85 | file = data.files[data.index],
86 | fileSize;
87 | if (options.minFileSize || options.maxFileSize) {
88 | fileSize = file.size;
89 | }
90 | if ($.type(options.maxNumberOfFiles) === 'number' &&
91 | (settings.getNumberOfFiles() || 0) + data.files.length >
92 | options.maxNumberOfFiles) {
93 | file.error = settings.i18n('maxNumberOfFiles');
94 | } else if (options.acceptFileTypes && !(options.acceptFileTypes.test(file.type) ||
95 | options.acceptFileTypes.test(file.name))) {
96 | file.error = settings.i18n('acceptFileTypes');
97 | } else if (fileSize > options.maxFileSize) {
98 | file.error = settings.i18n('maxFileSize');
99 | } else if ($.type(fileSize) === 'number' &&
100 | fileSize < options.minFileSize) {
101 | file.error = settings.i18n('minFileSize');
102 | } else {
103 | delete file.error;
104 | }
105 | if (file.error || data.files.error) {
106 | data.files.error = true;
107 | dfd.rejectWith(this, [data]);
108 | } else {
109 | dfd.resolveWith(this, [data]);
110 | }
111 | return dfd.promise();
112 | }
113 |
114 | }
115 |
116 | });
117 |
118 | }));
119 |
--------------------------------------------------------------------------------
/templates/fileform.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/js/app.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery File Upload Plugin Angular JS Example 1.2.1
3 | * https://github.com/blueimp/jQuery-File-Upload
4 | *
5 | * Copyright 2013, Sebastian Tschan
6 | * https://blueimp.net
7 | *
8 | * Licensed under the MIT license:
9 | * http://www.opensource.org/licenses/MIT
10 | */
11 |
12 | /* jshint nomen:false */
13 | /* global angular */
14 |
15 | (function () {
16 | 'use strict';
17 | var app = angular.module('uploadModule', [
18 | 'blueimp.fileupload'
19 | ]);
20 |
21 | app.directive('ngUploadForm', [function () {
22 | return {
23 | restrict: 'E',
24 | templateUrl: './templates/fileform.html',
25 | scope: {
26 | allowed: '@',
27 | url: '@',
28 | autoUpload: '@',
29 | sizeLimit: '@',
30 | ngModel: '=',
31 | name: '@'
32 | },
33 | controller: ['$scope', '$element', 'fileUpload', function (
34 | $scope, $element, fileUpload) {
35 | $scope.$on('fileuploaddone', function (e, data) {
36 | fileUpload.addFieldData($scope.name, data._response.result.files[0].result);
37 | });
38 |
39 | $scope.options = {
40 | url: $scope.url,
41 | dropZone: $element,
42 | maxFileSize: $scope.sizeLimit,
43 | autoUpload: $scope.autoUpload
44 | };
45 | $scope.loadingFiles = false;
46 |
47 | if (!$scope.queue) {
48 | $scope.queue = [];
49 | }
50 |
51 | var generateFileObject = function generateFileObjects(objects) {
52 | angular.forEach(objects, function (value, key) {
53 | var fileObject = {
54 | name: value.filename,
55 | size: value.length,
56 | url: value.url,
57 | thumbnailUrl: value.url,
58 | deleteUrl: value.url,
59 | deleteType: 'DELETE',
60 | result: value
61 | };
62 |
63 | if (fileObject.url && fileObject.url.charAt(0) !== '/') {
64 | fileObject.url = '/' + fileObject.url;
65 | }
66 |
67 | if (fileObject.deleteUrl && fileObject.deleteUrl.charAt(0) !== '/') {
68 | fileObject.deleteUrl = '/' + fileObject.deleteUrl;
69 | }
70 |
71 | if (fileObject.thumbnailUrl && fileObject.thumbnailUrl.charAt(0) !== '/') {
72 | fileObject.thumbnailUrl = '/' + fileObject.thumbnailUrl;
73 | }
74 |
75 | $scope.queue[key] = fileObject;
76 | });
77 | };
78 | fileUpload.registerField($scope.name);
79 | $scope.filequeue = fileUpload.fieldData[$scope.name];
80 |
81 | $scope.$watchCollection('filequeue', function (newval) {
82 | generateFileObject(newval);
83 | });
84 | }]
85 | };
86 | }])
87 | .controller('FileDestroyController', ['$scope', '$http', 'fileUpload', function (
88 | $scope, $http, fileUpload) {
89 | var file = $scope.file,
90 | state;
91 |
92 | if ($scope.$parent && $scope.$parent.$parent && $scope.$parent.$parent.$parent.name) {
93 | $scope.fieldname = $scope.$parent.$parent.$parent.name;
94 | }
95 |
96 | if (!fileUpload.fieldData[$scope.name]) {
97 | fileUpload.fieldData[$scope.name] = [];
98 | }
99 |
100 | $scope.filequeue = fileUpload.fieldData;
101 |
102 | if (file.url) {
103 | file.$state = function () {
104 | return state;
105 | };
106 | file.$destroy = function () {
107 | state = 'pending';
108 | return $http({
109 | url: file.deleteUrl,
110 | method: file.deleteType
111 | }).then(
112 | function () {
113 | state = 'resolved';
114 | fileUpload.removeFieldData($scope.fieldname, file.result._id);
115 | $scope.clear(file);
116 | },
117 | function () {
118 | state = 'rejected';
119 | fileUpload.removeFieldData($scope.fieldname, file.result._id);
120 | $scope.clear(file);
121 | }
122 | );
123 |
124 |
125 | };
126 | } else if (!file.$cancel && !file._index) {
127 | file.$cancel = function () {
128 | $scope.clear(file);
129 | };
130 | }
131 | }
132 | ]);
133 | })();
--------------------------------------------------------------------------------
/js/jquery.fileupload-jquery-ui.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery File Upload jQuery UI Plugin 8.7.1
3 | * https://github.com/blueimp/jQuery-File-Upload
4 | *
5 | * Copyright 2013, Sebastian Tschan
6 | * https://blueimp.net
7 | *
8 | * Licensed under the MIT license:
9 | * http://www.opensource.org/licenses/MIT
10 | */
11 |
12 | /* jshint nomen:false */
13 | /* global define, window */
14 |
15 | (function (factory) {
16 | 'use strict';
17 | if (typeof define === 'function' && define.amd) {
18 | // Register as an anonymous AMD module:
19 | define(['jquery', './jquery.fileupload-ui'], factory);
20 | } else {
21 | // Browser globals:
22 | factory(window.jQuery);
23 | }
24 | }(function ($) {
25 | 'use strict';
26 |
27 | $.widget('blueimp.fileupload', $.blueimp.fileupload, {
28 |
29 | options: {
30 | processdone: function (e, data) {
31 | data.context.find('.start').button('enable');
32 | },
33 | progress: function (e, data) {
34 | if (data.context) {
35 | data.context.find('.progress').progressbar(
36 | 'option',
37 | 'value',
38 | parseInt(data.loaded / data.total * 100, 10)
39 | );
40 | }
41 | },
42 | progressall: function (e, data) {
43 | var $this = $(this);
44 | $this.find('.fileupload-progress')
45 | .find('.progress').progressbar(
46 | 'option',
47 | 'value',
48 | parseInt(data.loaded / data.total * 100, 10)
49 | ).end()
50 | .find('.progress-extended').each(function () {
51 | $(this).html(
52 | ($this.data('blueimp-fileupload') ||
53 | $this.data('fileupload'))
54 | ._renderExtendedProgress(data)
55 | );
56 | });
57 | }
58 | },
59 |
60 | _renderUpload: function (func, files) {
61 | var node = this._super(func, files),
62 | showIconText = $(window).width() > 480;
63 | node.find('.progress').empty().progressbar();
64 | node.find('.start').button({
65 | icons: {primary: 'ui-icon-circle-arrow-e'},
66 | text: showIconText
67 | });
68 | node.find('.cancel').button({
69 | icons: {primary: 'ui-icon-cancel'},
70 | text: showIconText
71 | });
72 | if (node.hasClass('fade')) {
73 | node.hide();
74 | }
75 | return node;
76 | },
77 |
78 | _renderDownload: function (func, files) {
79 | var node = this._super(func, files),
80 | showIconText = $(window).width() > 480;
81 | node.find('.delete').button({
82 | icons: {primary: 'ui-icon-trash'},
83 | text: showIconText
84 | });
85 | if (node.hasClass('fade')) {
86 | node.hide();
87 | }
88 | return node;
89 | },
90 |
91 | _startHandler: function (e) {
92 | $(e.currentTarget).button('disable');
93 | this._super(e);
94 | },
95 |
96 | _transition: function (node) {
97 | var deferred = $.Deferred();
98 | if (node.hasClass('fade')) {
99 | node.fadeToggle(
100 | this.options.transitionDuration,
101 | this.options.transitionEasing,
102 | function () {
103 | deferred.resolveWith(node);
104 | }
105 | );
106 | } else {
107 | deferred.resolveWith(node);
108 | }
109 | return deferred;
110 | },
111 |
112 | _create: function () {
113 | this._super();
114 | this.element
115 | .find('.fileupload-buttonbar')
116 | .find('.fileinput-button').each(function () {
117 | var input = $(this).find('input:file').detach();
118 | $(this)
119 | .button({icons: {primary: 'ui-icon-plusthick'}})
120 | .append(input);
121 | })
122 | .end().find('.start')
123 | .button({icons: {primary: 'ui-icon-circle-arrow-e'}})
124 | .end().find('.cancel')
125 | .button({icons: {primary: 'ui-icon-cancel'}})
126 | .end().find('.delete')
127 | .button({icons: {primary: 'ui-icon-trash'}})
128 | .end().find('.progress').progressbar();
129 | },
130 |
131 | _destroy: function () {
132 | this.element
133 | .find('.fileupload-buttonbar')
134 | .find('.fileinput-button').each(function () {
135 | var input = $(this).find('input:file').detach();
136 | $(this)
137 | .button('destroy')
138 | .append(input);
139 | })
140 | .end().find('.start')
141 | .button('destroy')
142 | .end().find('.cancel')
143 | .button('destroy')
144 | .end().find('.delete')
145 | .button('destroy')
146 | .end().find('.progress').progressbar('destroy');
147 | this._super();
148 | }
149 |
150 | });
151 |
152 | }));
153 |
--------------------------------------------------------------------------------
/js/jquery.fileupload-process.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery File Upload Processing Plugin 1.3.0
3 | * https://github.com/blueimp/jQuery-File-Upload
4 | *
5 | * Copyright 2012, Sebastian Tschan
6 | * https://blueimp.net
7 | *
8 | * Licensed under the MIT license:
9 | * http://www.opensource.org/licenses/MIT
10 | */
11 |
12 | /* jshint nomen:false */
13 | /* global define, window */
14 |
15 | (function (factory) {
16 | 'use strict';
17 | if (typeof define === 'function' && define.amd) {
18 | // Register as an anonymous AMD module:
19 | define([
20 | 'jquery',
21 | './jquery.fileupload'
22 | ], factory);
23 | } else {
24 | // Browser globals:
25 | factory(
26 | window.jQuery
27 | );
28 | }
29 | }(function ($) {
30 | 'use strict';
31 |
32 | var originalAdd = $.blueimp.fileupload.prototype.options.add;
33 |
34 | // The File Upload Processing plugin extends the fileupload widget
35 | // with file processing functionality:
36 | $.widget('blueimp.fileupload', $.blueimp.fileupload, {
37 |
38 | options: {
39 | // The list of processing actions:
40 | processQueue: [
41 | /*
42 | {
43 | action: 'log',
44 | type: 'debug'
45 | }
46 | */
47 | ],
48 | add: function (e, data) {
49 | var $this = $(this);
50 | data.process(function () {
51 | return $this.fileupload('process', data);
52 | });
53 | originalAdd.call(this, e, data);
54 | }
55 | },
56 |
57 | processActions: {
58 | /*
59 | log: function (data, options) {
60 | console[options.type](
61 | 'Processing "' + data.files[data.index].name + '"'
62 | );
63 | }
64 | */
65 | },
66 |
67 | _processFile: function (data, originalData) {
68 | var that = this,
69 | dfd = $.Deferred().resolveWith(that, [data]),
70 | chain = dfd.promise();
71 | this._trigger('process', null, data);
72 | $.each(data.processQueue, function (i, settings) {
73 | var func = function (data) {
74 | if (originalData.errorThrown) {
75 | return $.Deferred()
76 | .rejectWith(that, [originalData]).promise();
77 | }
78 | return that.processActions[settings.action].call(
79 | that,
80 | data,
81 | settings
82 | );
83 | };
84 | chain = chain.pipe(func, settings.always && func);
85 | });
86 | chain
87 | .done(function () {
88 | that._trigger('processdone', null, data);
89 | that._trigger('processalways', null, data);
90 | })
91 | .fail(function () {
92 | that._trigger('processfail', null, data);
93 | that._trigger('processalways', null, data);
94 | });
95 | return chain;
96 | },
97 |
98 | // Replaces the settings of each processQueue item that
99 | // are strings starting with an "@", using the remaining
100 | // substring as key for the option map,
101 | // e.g. "@autoUpload" is replaced with options.autoUpload:
102 | _transformProcessQueue: function (options) {
103 | var processQueue = [];
104 | $.each(options.processQueue, function () {
105 | var settings = {},
106 | action = this.action,
107 | prefix = this.prefix === true ? action : this.prefix;
108 | $.each(this, function (key, value) {
109 | if ($.type(value) === 'string' &&
110 | value.charAt(0) === '@') {
111 | settings[key] = options[
112 | value.slice(1) || (prefix ? prefix +
113 | key.charAt(0).toUpperCase() + key.slice(1) : key)
114 | ];
115 | } else {
116 | settings[key] = value;
117 | }
118 |
119 | });
120 | processQueue.push(settings);
121 | });
122 | options.processQueue = processQueue;
123 | },
124 |
125 | // Returns the number of files currently in the processsing queue:
126 | processing: function () {
127 | return this._processing;
128 | },
129 |
130 | // Processes the files given as files property of the data parameter,
131 | // returns a Promise object that allows to bind callbacks:
132 | process: function (data) {
133 | var that = this,
134 | options = $.extend({}, this.options, data);
135 | if (options.processQueue && options.processQueue.length) {
136 | this._transformProcessQueue(options);
137 | if (this._processing === 0) {
138 | this._trigger('processstart');
139 | }
140 | $.each(data.files, function (index) {
141 | var opts = index ? $.extend({}, options) : options,
142 | func = function () {
143 | if (data.errorThrown) {
144 | return $.Deferred()
145 | .rejectWith(that, [data]).promise();
146 | }
147 | return that._processFile(opts, data);
148 | };
149 | opts.index = index;
150 | that._processing += 1;
151 | that._processingQueue = that._processingQueue.pipe(func, func)
152 | .always(function () {
153 | that._processing -= 1;
154 | if (that._processing === 0) {
155 | that._trigger('processstop');
156 | }
157 | });
158 | });
159 | }
160 | return this._processingQueue;
161 | },
162 |
163 | _create: function () {
164 | this._super();
165 | this._processing = 0;
166 | this._processingQueue = $.Deferred().resolveWith(this)
167 | .promise();
168 | }
169 |
170 | });
171 |
172 | }));
173 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "bitwise" : true, // true: Prohibit bitwise operators (&, |, ^, etc.)
3 | "camelcase" : true, // true: Identifiers must be in camelCase
4 | "curly" : true, // true: Require {} for every new block or scope
5 | "eqeqeq" : true, // true: Require triple equals (===) for comparison
6 | "forin" : true, // true: Require filtering for..in loops with obj.hasOwnProperty()
7 | "immed" : true, // true: Require immediate invocations to be wrapped in parens
8 | // e.g. `(function () { } ());`
9 | "indent" : 2, // {int} Number of spaces to use for indentation
10 | "latedef" : true, // true: Require variables/functions to be defined before being used
11 | "newcap" : true, // true: Require capitalization of all constructor functions e.g. `new F()`
12 | "noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee`
13 | "noempty" : true, // true: Prohibit use of empty blocks
14 | "nonew" : true, // true: Prohibit use of constructors for side-effects (without assignment)
15 | "plusplus" : false, // true: Prohibit use of `++` & `--`
16 | "quotmark" : "single", // Quotation mark consistency:
17 | // false : do nothing (default)
18 | // true : ensure whatever is used is consistent
19 | // "single" : require single quotes
20 | // "double" : require double quotes
21 | "undef" : true, // true: Require all non-global variables to be declared (prevents global leaks)
22 | "unused" : true, // true: Require all defined variables be used
23 | "strict" : true, // true: Requires all functions run in ES5 Strict Mode
24 | "trailing" : true, // true: Prohibit trailing whitespaces
25 | "maxparams" : false, // {int} Max number of formal params allowed per function
26 | "maxdepth" : false, // {int} Max depth of nested blocks (within functions)
27 | "maxstatements" : false, // {int} Max number statements per function
28 | "maxcomplexity" : false, // {int} Max cyclomatic complexity per function
29 | "maxlen" : false, // {int} Max number of characters per line
30 |
31 | // Relaxing
32 | "asi" : false, // true: Tolerate Automatic Semicolon Insertion (no semicolons)
33 | "boss" : false, // true: Tolerate assignments where comparisons would be expected
34 | "debug" : false, // true: Allow debugger statements e.g. browser breakpoints.
35 | "eqnull" : false, // true: Tolerate use of `== null`
36 | "es5" : false, // true: Allow ES5 syntax (ex: getters and setters)
37 | "esnext" : false, // true: Allow ES.next (ES6) syntax (ex: `const`)
38 | "moz" : false, // true: Allow Mozilla specific syntax (extends and overrides esnext features)
39 | // (ex: `for each`, multiple try/catch, function expression…)
40 | "evil" : false, // true: Tolerate use of `eval` and `new Function()`
41 | "expr" : false, // true: Tolerate `ExpressionStatement` as Programs
42 | "funcscope" : false, // true: Tolerate defining variables inside control statements"
43 | "globalstrict" : false, // true: Allow global "use strict" (also enables 'strict')
44 | "iterator" : false, // true: Tolerate using the `__iterator__` property
45 | "lastsemic" : false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block
46 | "laxbreak" : false, // true: Tolerate possibly unsafe line breakings
47 | "laxcomma" : false, // true: Tolerate comma-first style coding
48 | "loopfunc" : false, // true: Tolerate functions being defined in loops
49 | "multistr" : false, // true: Tolerate multi-line strings
50 | "proto" : false, // true: Tolerate using the `__proto__` property
51 | "scripturl" : false, // true: Tolerate script-targeted URLs
52 | "smarttabs" : false, // true: Tolerate mixed tabs/spaces when used for alignment
53 | "shadow" : false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
54 | "sub" : false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation
55 | "supernew" : false, // true: Tolerate `new function () { ... };` and `new Object;`
56 | "validthis" : false, // true: Tolerate using this in a non-constructor function
57 |
58 | // Environments
59 | "browser" : false, // Web Browser (window, document, etc)
60 | "couch" : false, // CouchDB
61 | "devel" : false, // Development/debugging (alert, confirm, etc)
62 | "dojo" : false, // Dojo Toolkit
63 | "jquery" : false, // jQuery
64 | "mootools" : false, // MooTools
65 | "node" : false, // Node.js
66 | "nonstandard" : false, // Widely adopted globals (escape, unescape, etc)
67 | "prototypejs" : false, // Prototype and Scriptaculous
68 | "rhino" : false, // Rhino
69 | "worker" : false, // Web Workers
70 | "wsh" : false, // Windows Scripting Host
71 | "yui" : false, // Yahoo User Interface
72 |
73 | // Legacy
74 | "nomen" : true, // true: Prohibit dangling `_` in variables
75 | "onevar" : false, // true: Allow only one `var` statement per function
76 | "passfail" : false, // true: Stop on first error
77 | "white" : true, // true: Check against strict whitespace and indentation rules
78 |
79 | // Custom Globals
80 | "globals" : {} // additional predefined global variables
81 | }
82 |
--------------------------------------------------------------------------------
/server/gae-python/main.py:
--------------------------------------------------------------------------------
1 | # -*- coding: utf-8 -*-
2 | #
3 | # jQuery File Upload Plugin GAE Python Example 2.1.1
4 | # https://github.com/blueimp/jQuery-File-Upload
5 | #
6 | # Copyright 2011, Sebastian Tschan
7 | # https://blueimp.net
8 | #
9 | # Licensed under the MIT license:
10 | # http://www.opensource.org/licenses/MIT
11 | #
12 |
13 | from __future__ import with_statement
14 | from google.appengine.api import files, images
15 | from google.appengine.ext import blobstore, deferred
16 | from google.appengine.ext.webapp import blobstore_handlers
17 | import json
18 | import re
19 | import urllib
20 | import webapp2
21 |
22 | WEBSITE = 'http://blueimp.github.io/jQuery-File-Upload/'
23 | MIN_FILE_SIZE = 1 # bytes
24 | MAX_FILE_SIZE = 5000000 # bytes
25 | IMAGE_TYPES = re.compile('image/(gif|p?jpeg|(x-)?png)')
26 | ACCEPT_FILE_TYPES = IMAGE_TYPES
27 | THUMBNAIL_MODIFICATOR = '=s80' # max width / height
28 | EXPIRATION_TIME = 300 # seconds
29 |
30 |
31 | def cleanup(blob_keys):
32 | blobstore.delete(blob_keys)
33 |
34 |
35 | class UploadHandler(webapp2.RequestHandler):
36 |
37 | def initialize(self, request, response):
38 | super(UploadHandler, self).initialize(request, response)
39 | self.response.headers['Access-Control-Allow-Origin'] = '*'
40 | self.response.headers[
41 | 'Access-Control-Allow-Methods'
42 | ] = 'OPTIONS, HEAD, GET, POST, PUT, DELETE'
43 | self.response.headers[
44 | 'Access-Control-Allow-Headers'
45 | ] = 'Content-Type, Content-Range, Content-Disposition'
46 |
47 | def validate(self, file):
48 | if file['size'] < MIN_FILE_SIZE:
49 | file['error'] = 'File is too small'
50 | elif file['size'] > MAX_FILE_SIZE:
51 | file['error'] = 'File is too big'
52 | elif not ACCEPT_FILE_TYPES.match(file['type']):
53 | file['error'] = 'Filetype not allowed'
54 | else:
55 | return True
56 | return False
57 |
58 | def get_file_size(self, file):
59 | file.seek(0, 2) # Seek to the end of the file
60 | size = file.tell() # Get the position of EOF
61 | file.seek(0) # Reset the file position to the beginning
62 | return size
63 |
64 | def write_blob(self, data, info):
65 | blob = files.blobstore.create(
66 | mime_type=info['type'],
67 | _blobinfo_uploaded_filename=info['name']
68 | )
69 | with files.open(blob, 'a') as f:
70 | f.write(data)
71 | files.finalize(blob)
72 | return files.blobstore.get_blob_key(blob)
73 |
74 | def handle_upload(self):
75 | results = []
76 | blob_keys = []
77 | for name, fieldStorage in self.request.POST.items():
78 | if type(fieldStorage) is unicode:
79 | continue
80 | result = {}
81 | result['name'] = re.sub(
82 | r'^.*\\',
83 | '',
84 | fieldStorage.filename
85 | )
86 | result['type'] = fieldStorage.type
87 | result['size'] = self.get_file_size(fieldStorage.file)
88 | if self.validate(result):
89 | blob_key = str(
90 | self.write_blob(fieldStorage.value, result)
91 | )
92 | blob_keys.append(blob_key)
93 | result['deleteType'] = 'DELETE'
94 | result['deleteUrl'] = self.request.host_url +\
95 | '/?key=' + urllib.quote(blob_key, '')
96 | if (IMAGE_TYPES.match(result['type'])):
97 | try:
98 | result['url'] = images.get_serving_url(
99 | blob_key,
100 | secure_url=self.request.host_url.startswith(
101 | 'https'
102 | )
103 | )
104 | result['thumbnailUrl'] = result['url'] +\
105 | THUMBNAIL_MODIFICATOR
106 | except: # Could not get an image serving url
107 | pass
108 | if not 'url' in result:
109 | result['url'] = self.request.host_url +\
110 | '/' + blob_key + '/' + urllib.quote(
111 | result['name'].encode('utf-8'), '')
112 | results.append(result)
113 | deferred.defer(
114 | cleanup,
115 | blob_keys,
116 | _countdown=EXPIRATION_TIME
117 | )
118 | return results
119 |
120 | def options(self):
121 | pass
122 |
123 | def head(self):
124 | pass
125 |
126 | def get(self):
127 | self.redirect(WEBSITE)
128 |
129 | def post(self):
130 | if (self.request.get('_method') == 'DELETE'):
131 | return self.delete()
132 | result = {'files': self.handle_upload()}
133 | s = json.dumps(result, separators=(',', ':'))
134 | redirect = self.request.get('redirect')
135 | if redirect:
136 | return self.redirect(str(
137 | redirect.replace('%s', urllib.quote(s, ''), 1)
138 | ))
139 | if 'application/json' in self.request.headers.get('Accept'):
140 | self.response.headers['Content-Type'] = 'application/json'
141 | self.response.write(s)
142 |
143 | def delete(self):
144 | key = self.request.get('key') or ''
145 | blobstore.delete(key)
146 | s = json.dumps({key: True}, separators=(',', ':'))
147 | if 'application/json' in self.request.headers.get('Accept'):
148 | self.response.headers['Content-Type'] = 'application/json'
149 | self.response.write(s)
150 |
151 |
152 | class DownloadHandler(blobstore_handlers.BlobstoreDownloadHandler):
153 | def get(self, key, filename):
154 | if not blobstore.get(key):
155 | self.error(404)
156 | else:
157 | # Prevent browsers from MIME-sniffing the content-type:
158 | self.response.headers['X-Content-Type-Options'] = 'nosniff'
159 | # Cache for the expiration time:
160 | self.response.headers['Cache-Control'] = 'public,max-age=%d' % EXPIRATION_TIME
161 | # Send the file forcing a download dialog:
162 | self.send_blob(key, save_as=filename, content_type='application/octet-stream')
163 |
164 | app = webapp2.WSGIApplication(
165 | [
166 | ('/', UploadHandler),
167 | ('/([^/]+)/([^/]+)', DownloadHandler)
168 | ],
169 | debug=True
170 | )
171 |
--------------------------------------------------------------------------------
/angularjs.html:
--------------------------------------------------------------------------------
1 |
2 |
14 |
15 |
16 |
17 |
20 | jQuery File Upload Demo - AngularJS version
22 |
65 |
jQuery File Upload Demo
66 |
AngularJS version
67 |
74 |
75 |
76 | File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for AngularJS.
79 |
80 |
81 |
82 |
83 |
86 |
87 |
88 |
Demo Notes
89 |
90 |
91 |
92 | The maximum file size for uploads in this demo is 5 MB (default file size is unlimited).
93 | Only image files (JPG, GIF, PNG ) are allowed in this demo (by default there is no file type restriction).
94 | Uploaded files will be deleted automatically after 5 minutes (demo setting).
95 | You can drag & drop files from your desktop on this webpage (see Browser support ).
96 | Please refer to the project website and documentation for more information.
97 | Built with Twitter's Bootstrap CSS framework and Icons from Glyphicons .
98 |
99 |
100 |
101 |
104 |
105 |
106 |
‹
107 |
›
108 |
×
109 |
110 |
111 |
jQuery File Upload Demo - Basic version
20 |
51 |
jQuery File Upload Demo
52 |
Basic version
53 |
60 |
61 |
62 | File Upload widget with multiple file selection, drag&drop support and progress bar for jQuery.
65 |
66 |
67 |
68 |
69 | Select files...
71 |
72 |
74 |
75 |
76 |
77 |
80 |
81 |
82 |
83 |
84 |
85 |
Demo Notes
86 |
87 |
88 |
89 | The maximum file size for uploads in this demo is 5 MB (default file size is unlimited).
90 | Only image files (JPG, GIF, PNG ) are allowed in this demo (by default there is no file type restriction).
91 | Uploaded files will be deleted automatically after 5 minutes (demo setting).
92 | You can drag & drop files from your desktop on this webpage (see Browser support ).
93 | Please refer to the project website and documentation for more information.
94 | Built with Twitter's Bootstrap CSS framework and Icons from Glyphicons .
95 |
96 |
97 |
98 |
jQuery File Upload Plugin Test
22 |
31 | jQuery File Upload Demo - Basic Plus version
20 |
51 |
jQuery File Upload Demo
52 |
Basic Plus version
53 |
60 |
61 |
62 | File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery.
65 |
66 |
67 |
68 |
69 | Add files...
71 |
72 |
74 |
75 |
76 |
77 |
80 |
81 |
82 |
83 |
84 |
85 |
Demo Notes
86 |
87 |
88 |
89 | The maximum file size for uploads in this demo is 5 MB (default file size is unlimited).
90 | Only image files (JPG, GIF, PNG ) are allowed in this demo (by default there is no file type restriction).
91 | Uploaded files will be deleted automatically after 5 minutes (demo setting).
92 | You can drag & drop files from your desktop on this webpage (see Browser support ).
93 | Please refer to the project website and documentation for more information.
94 | Built with Twitter's Bootstrap CSS framework and Icons from Glyphicons .
95 |
96 |
97 |
98 |
jQuery File Upload Demo - jQuery UI version
22 | jQuery File Upload Demo
55 | jQuery UI version
56 |
85 |
92 |
93 | File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery UI.
96 |
97 |
98 |
127 | Demo Notes
129 |
130 | The maximum file size for uploads in this demo is 5 MB (default file size is unlimited).
131 | Only image files (JPG, GIF, PNG ) are allowed in this demo (by default there is no file type restriction).
132 | Uploaded files will be deleted automatically after 5 minutes (demo setting).
133 | You can drag & drop files from your desktop on this webpage (see Browser support ).
134 | Please refer to the project website and documentation for more information.
135 | Built with jQuery UI .
136 |
137 |
138 |
139 |
140 |
141 |
‹
142 |
›
143 |
×
144 |
145 |
146 |
jQuery File Upload Demo
22 |
59 |
jQuery File Upload Demo
60 |
Basic Plus UI version
61 |
68 |
69 |
70 | File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery.
73 |
74 |
75 |
76 |
117 |
118 |
119 |
120 |
Demo Notes
121 |
122 |
123 |
124 | The maximum file size for uploads in this demo is 5 MB (default file size is unlimited).
125 | Only image files (JPG, GIF, PNG ) are allowed in this demo (by default there is no file type restriction).
126 | Uploaded files will be deleted automatically after 5 minutes (demo setting).
127 | You can drag & drop files from your desktop on this webpage (see Browser support ).
128 | Please refer to the project website and documentation for more information.
129 | Built with Twitter's Bootstrap CSS framework and Icons from Glyphicons .
130 |
131 |
132 |
133 |
136 |
137 |
138 |
‹
139 |
›
140 |
×
141 |
142 |
143 |
",
229 | options: {
230 | disabled: false,
231 |
232 | // callbacks
233 | create: null
234 | },
235 | _createWidget: function (options, element) {
236 | element = $(element || this.defaultElement || this)[ 0 ];
237 | this.element = $(element);
238 | this.uuid = uuid++;
239 | this.eventNamespace = "." + this.widgetName + this.uuid;
240 | this.options = $.widget.extend({},
241 | this.options,
242 | this._getCreateOptions(),
243 | options);
244 |
245 | this.bindings = $();
246 | this.hoverable = $();
247 | this.focusable = $();
248 |
249 | if (element !== this) {
250 | $.data(element, this.widgetFullName, this);
251 | this._on(true, this.element, {
252 | remove: function (event) {
253 | if (event.target === element) {
254 | this.destroy();
255 | }
256 | }
257 | });
258 | this.document = $(element.style ?
259 | // element within the document
260 | element.ownerDocument :
261 | // element is window or document
262 | element.document || element);
263 | this.window = $(this.document[0].defaultView || this.document[0].parentWindow);
264 | }
265 |
266 | this._create();
267 | this._trigger("create", null, this._getCreateEventData());
268 | this._init();
269 | },
270 | _getCreateOptions: $.noop,
271 | _getCreateEventData: $.noop,
272 | _create: $.noop,
273 | _init: $.noop,
274 |
275 | destroy: function () {
276 | this._destroy();
277 | // we can probably remove the unbind calls in 2.0
278 | // all event bindings should go through this._on()
279 | this.element
280 | .unbind(this.eventNamespace)
281 | // 1.9 BC for #7810
282 | // TODO remove dual storage
283 | .removeData(this.widgetName)
284 | .removeData(this.widgetFullName)
285 | // support: jquery <1.6.3
286 | // http://bugs.jquery.com/ticket/9413
287 | .removeData($.camelCase(this.widgetFullName));
288 | this.widget()
289 | .unbind(this.eventNamespace)
290 | .removeAttr("aria-disabled")
291 | .removeClass(
292 | this.widgetFullName + "-disabled " +
293 | "ui-state-disabled");
294 |
295 | // clean up events and states
296 | this.bindings.unbind(this.eventNamespace);
297 | this.hoverable.removeClass("ui-state-hover");
298 | this.focusable.removeClass("ui-state-focus");
299 | },
300 | _destroy: $.noop,
301 |
302 | widget: function () {
303 | return this.element;
304 | },
305 |
306 | option: function (key, value) {
307 | var options = key,
308 | parts,
309 | curOption,
310 | i;
311 |
312 | if (arguments.length === 0) {
313 | // don't return a reference to the internal hash
314 | return $.widget.extend({}, this.options);
315 | }
316 |
317 | if (typeof key === "string") {
318 | // handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
319 | options = {};
320 | parts = key.split(".");
321 | key = parts.shift();
322 | if (parts.length) {
323 | curOption = options[ key ] = $.widget.extend({}, this.options[ key ]);
324 | for (i = 0; i < parts.length - 1; i++) {
325 | curOption[ parts[ i ] ] = curOption[ parts[ i ] ] || {};
326 | curOption = curOption[ parts[ i ] ];
327 | }
328 | key = parts.pop();
329 | if (arguments.length === 1) {
330 | return curOption[ key ] === undefined ? null : curOption[ key ];
331 | }
332 | curOption[ key ] = value;
333 | } else {
334 | if (arguments.length === 1) {
335 | return this.options[ key ] === undefined ? null : this.options[ key ];
336 | }
337 | options[ key ] = value;
338 | }
339 | }
340 |
341 | this._setOptions(options);
342 |
343 | return this;
344 | },
345 | _setOptions: function (options) {
346 | var key;
347 |
348 | for (key in options) {
349 | this._setOption(key, options[ key ]);
350 | }
351 |
352 | return this;
353 | },
354 | _setOption: function (key, value) {
355 | this.options[ key ] = value;
356 |
357 | if (key === "disabled") {
358 | this.widget()
359 | .toggleClass(this.widgetFullName + "-disabled ui-state-disabled", !!value)
360 | .attr("aria-disabled", value);
361 | this.hoverable.removeClass("ui-state-hover");
362 | this.focusable.removeClass("ui-state-focus");
363 | }
364 |
365 | return this;
366 | },
367 |
368 | enable: function () {
369 | return this._setOption("disabled", false);
370 | },
371 | disable: function () {
372 | return this._setOption("disabled", true);
373 | },
374 |
375 | _on: function (suppressDisabledCheck, element, handlers) {
376 | var delegateElement,
377 | instance = this;
378 |
379 | // no suppressDisabledCheck flag, shuffle arguments
380 | if (typeof suppressDisabledCheck !== "boolean") {
381 | handlers = element;
382 | element = suppressDisabledCheck;
383 | suppressDisabledCheck = false;
384 | }
385 |
386 | // no element argument, shuffle and use this.element
387 | if (!handlers) {
388 | handlers = element;
389 | element = this.element;
390 | delegateElement = this.widget();
391 | } else {
392 | // accept selectors, DOM elements
393 | element = delegateElement = $(element);
394 | this.bindings = this.bindings.add(element);
395 | }
396 |
397 | $.each(handlers, function (event, handler) {
398 | function handlerProxy() {
399 | // allow widgets to customize the disabled handling
400 | // - disabled as an array instead of boolean
401 | // - disabled class as method for disabling individual parts
402 | if (!suppressDisabledCheck &&
403 | ( instance.options.disabled === true ||
404 | $(this).hasClass("ui-state-disabled") )) {
405 | return;
406 | }
407 | return ( typeof handler === "string" ? instance[ handler ] : handler )
408 | .apply(instance, arguments);
409 | }
410 |
411 | // copy the guid so direct unbinding works
412 | if (typeof handler !== "string") {
413 | handlerProxy.guid = handler.guid =
414 | handler.guid || handlerProxy.guid || $.guid++;
415 | }
416 |
417 | var match = event.match(/^(\w+)\s*(.*)$/),
418 | eventName = match[1] + instance.eventNamespace,
419 | selector = match[2];
420 | if (selector) {
421 | delegateElement.delegate(selector, eventName, handlerProxy);
422 | } else {
423 | element.bind(eventName, handlerProxy);
424 | }
425 | });
426 | },
427 |
428 | _off: function (element, eventName) {
429 | eventName = (eventName || "").split(" ").join(this.eventNamespace + " ") + this.eventNamespace;
430 | element.unbind(eventName).undelegate(eventName);
431 | },
432 |
433 | _delay: function (handler, delay) {
434 | function handlerProxy() {
435 | return ( typeof handler === "string" ? instance[ handler ] : handler )
436 | .apply(instance, arguments);
437 | }
438 |
439 | var instance = this;
440 | return setTimeout(handlerProxy, delay || 0);
441 | },
442 |
443 | _hoverable: function (element) {
444 | this.hoverable = this.hoverable.add(element);
445 | this._on(element, {
446 | mouseenter: function (event) {
447 | $(event.currentTarget).addClass("ui-state-hover");
448 | },
449 | mouseleave: function (event) {
450 | $(event.currentTarget).removeClass("ui-state-hover");
451 | }
452 | });
453 | },
454 |
455 | _focusable: function (element) {
456 | this.focusable = this.focusable.add(element);
457 | this._on(element, {
458 | focusin: function (event) {
459 | $(event.currentTarget).addClass("ui-state-focus");
460 | },
461 | focusout: function (event) {
462 | $(event.currentTarget).removeClass("ui-state-focus");
463 | }
464 | });
465 | },
466 |
467 | _trigger: function (type, event, data) {
468 | var prop, orig,
469 | callback = this.options[ type ];
470 |
471 | data = data || {};
472 | event = $.Event(event);
473 | event.type = ( type === this.widgetEventPrefix ?
474 | type :
475 | this.widgetEventPrefix + type ).toLowerCase();
476 | // the original event may come from any element
477 | // so we need to reset the target on the new event
478 | event.target = this.element[ 0 ];
479 |
480 | // copy original event properties over to the new event
481 | orig = event.originalEvent;
482 | if (orig) {
483 | for (prop in orig) {
484 | if (!( prop in event )) {
485 | event[ prop ] = orig[ prop ];
486 | }
487 | }
488 | }
489 |
490 | this.element.trigger(event, data);
491 | return !( $.isFunction(callback) &&
492 | callback.apply(this.element[0], [ event ].concat(data)) === false ||
493 | event.isDefaultPrevented() );
494 | }
495 | };
496 |
497 | $.each({ show: "fadeIn", hide: "fadeOut" }, function (method, defaultEffect) {
498 | $.Widget.prototype[ "_" + method ] = function (element, options, callback) {
499 | if (typeof options === "string") {
500 | options = { effect: options };
501 | }
502 | var hasOptions,
503 | effectName = !options ?
504 | method :
505 | options === true || typeof options === "number" ?
506 | defaultEffect :
507 | options.effect || defaultEffect;
508 | options = options || {};
509 | if (typeof options === "number") {
510 | options = { duration: options };
511 | }
512 | hasOptions = !$.isEmptyObject(options);
513 | options.complete = callback;
514 | if (options.delay) {
515 | element.delay(options.delay);
516 | }
517 | if (hasOptions && $.effects && $.effects.effect[ effectName ]) {
518 | element[ method ](options);
519 | } else if (effectName !== method && element[ effectName ]) {
520 | element[ effectName ](options.duration, options.easing, callback);
521 | } else {
522 | element.queue(function (next) {
523 | $(this)[ method ]();
524 | if (callback) {
525 | callback.call(element[ 0 ]);
526 | }
527 | next();
528 | });
529 | }
530 | };
531 | });
532 |
533 | }));
534 |
--------------------------------------------------------------------------------