From 2fc89deaeae0341aa12b6b811927e793011055d1 Mon Sep 17 00:00:00 2001 From: Friendika Date: Wed, 26 Jan 2011 00:34:39 -0800 Subject: work in progress js_uploader plugin, turn java uploader into plugin - not done yet --- addon/js_upload/file-uploader/client/demo.htm | 38 + .../js_upload/file-uploader/client/do-nothing.htm | 1 + .../file-uploader/client/fileuploader.css | 31 + .../js_upload/file-uploader/client/fileuploader.js | 1247 +++++++++++++++++ addon/js_upload/file-uploader/client/loading.gif | Bin 0 -> 1688 bytes addon/js_upload/file-uploader/gpl-2.0.txt | 339 +++++ addon/js_upload/file-uploader/license.txt | 24 + addon/js_upload/file-uploader/readme.md | 152 +++ .../file-uploader/server/OctetStreamReader.java | 125 ++ .../file-uploader/server/coldfusion/coldfusion.cfc | 1 + .../file-uploader/server/coldfusion/demo.cfm | 1 + .../file-uploader/server/coldfusion/readme.txt | 9 + addon/js_upload/file-uploader/server/perl.cgi | 62 + addon/js_upload/file-uploader/server/php.php | 162 +++ addon/js_upload/file-uploader/server/readme.txt | 18 + .../file-uploader/server/uploads/.gitignore | 2 + .../file-uploader/tests/action-acceptance.php | 46 + .../tests/action-handler-queue-test.php | 31 + .../file-uploader/tests/action-handler-test.php | 31 + .../file-uploader/tests/action-slow-response.php | 2 + .../tests/browser-bugs/safari-bug1.htm | 9 + .../tests/browser-bugs/safari-bug2.htm | 19 + .../application-javascript.php | 1 + .../iframe-content-tests/application-json.php | 1 + .../tests/iframe-content-tests/header-404.php | 2 + .../tests/iframe-content-tests/somepage.php | 1 + .../tests/iframe-content-tests/text-html-large.php | 6 + .../tests/iframe-content-tests/text-html.php | 7 + .../tests/iframe-content-tests/text-javascript.php | 1 + .../tests/iframe-content-tests/text-plain.php | 2 + .../file-uploader/tests/jquery-1.4.2.min.js | 154 +++ .../tests/jquery-ui/jquery-ui-1.8.4.custom.min.js | 200 +++ .../ui-bg_diagonals-thick_18_b81900_40x40.png | Bin 0 -> 260 bytes .../ui-bg_diagonals-thick_20_666666_40x40.png | Bin 0 -> 251 bytes .../images/ui-bg_flat_10_000000_40x100.png | Bin 0 -> 178 bytes .../images/ui-bg_glass_100_f6f6f6_1x400.png | Bin 0 -> 104 bytes .../images/ui-bg_glass_100_fdf5ce_1x400.png | Bin 0 -> 125 bytes .../images/ui-bg_glass_65_ffffff_1x400.png | Bin 0 -> 105 bytes .../images/ui-bg_gloss-wave_35_f6a828_500x100.png | Bin 0 -> 4427 bytes .../ui-bg_highlight-soft_100_eeeeee_1x100.png | Bin 0 -> 90 bytes .../ui-bg_highlight-soft_75_ffe45c_1x100.png | Bin 0 -> 129 bytes .../images/ui-icons_222222_256x240.png | Bin 0 -> 4369 bytes .../images/ui-icons_228ef1_256x240.png | Bin 0 -> 4369 bytes .../images/ui-icons_ef8c08_256x240.png | Bin 0 -> 4369 bytes .../images/ui-icons_ffd27a_256x240.png | Bin 0 -> 4369 bytes .../images/ui-icons_ffffff_256x240.png | Bin 0 -> 4369 bytes .../ui-lightness/jquery-ui-1.8.4.custom.css | 334 +++++ .../file-uploader/tests/qunit/package.json | 21 + .../file-uploader/tests/qunit/qunit/qunit.css | 119 ++ .../file-uploader/tests/qunit/qunit/qunit.js | 1069 +++++++++++++++ .../file-uploader/tests/qunit/test/index.html | 17 + .../file-uploader/tests/qunit/test/same.js | 1423 ++++++++++++++++++++ .../file-uploader/tests/qunit/test/test.js | 171 +++ .../1imagelonglonglonglonglonglongname.gif | Bin 0 -> 1688 bytes .../file-uploader/tests/sample-files/2larger.txt | 1 + .../file-uploader/tests/sample-files/3empty.txt | 0 .../file-uploader/tests/sample-files/4text.txt | 1 + .../file-uploader/tests/sample-files/5text.txt | 1 + .../file-uploader/tests/sample-files/6text.txt | 1 + .../file-uploader/tests/sample-files/7small.txt | 1 + .../file-uploader/tests/sample-files/8text.txt | 1 + .../file-uploader/tests/separate-file-list.htm | 24 + .../file-uploader/tests/test-acceptance.htm | 106 ++ .../file-uploader/tests/test-drop-zone.htm | 48 + .../file-uploader/tests/test-handler-queue.htm | 81 ++ .../file-uploader/tests/test-upload-handlers.htm | 382 ++++++ 66 files changed, 6526 insertions(+) create mode 100644 addon/js_upload/file-uploader/client/demo.htm create mode 100644 addon/js_upload/file-uploader/client/do-nothing.htm create mode 100644 addon/js_upload/file-uploader/client/fileuploader.css create mode 100644 addon/js_upload/file-uploader/client/fileuploader.js create mode 100644 addon/js_upload/file-uploader/client/loading.gif create mode 100644 addon/js_upload/file-uploader/gpl-2.0.txt create mode 100644 addon/js_upload/file-uploader/license.txt create mode 100644 addon/js_upload/file-uploader/readme.md create mode 100644 addon/js_upload/file-uploader/server/OctetStreamReader.java create mode 100644 addon/js_upload/file-uploader/server/coldfusion/coldfusion.cfc create mode 100644 addon/js_upload/file-uploader/server/coldfusion/demo.cfm create mode 100644 addon/js_upload/file-uploader/server/coldfusion/readme.txt create mode 100644 addon/js_upload/file-uploader/server/perl.cgi create mode 100644 addon/js_upload/file-uploader/server/php.php create mode 100644 addon/js_upload/file-uploader/server/readme.txt create mode 100644 addon/js_upload/file-uploader/server/uploads/.gitignore create mode 100644 addon/js_upload/file-uploader/tests/action-acceptance.php create mode 100644 addon/js_upload/file-uploader/tests/action-handler-queue-test.php create mode 100644 addon/js_upload/file-uploader/tests/action-handler-test.php create mode 100644 addon/js_upload/file-uploader/tests/action-slow-response.php create mode 100644 addon/js_upload/file-uploader/tests/browser-bugs/safari-bug1.htm create mode 100644 addon/js_upload/file-uploader/tests/browser-bugs/safari-bug2.htm create mode 100644 addon/js_upload/file-uploader/tests/iframe-content-tests/application-javascript.php create mode 100644 addon/js_upload/file-uploader/tests/iframe-content-tests/application-json.php create mode 100644 addon/js_upload/file-uploader/tests/iframe-content-tests/header-404.php create mode 100644 addon/js_upload/file-uploader/tests/iframe-content-tests/somepage.php create mode 100644 addon/js_upload/file-uploader/tests/iframe-content-tests/text-html-large.php create mode 100644 addon/js_upload/file-uploader/tests/iframe-content-tests/text-html.php create mode 100644 addon/js_upload/file-uploader/tests/iframe-content-tests/text-javascript.php create mode 100644 addon/js_upload/file-uploader/tests/iframe-content-tests/text-plain.php create mode 100644 addon/js_upload/file-uploader/tests/jquery-1.4.2.min.js create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/jquery-ui-1.8.4.custom.min.js create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-bg_flat_10_000000_40x100.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-icons_222222_256x240.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-icons_228ef1_256x240.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-icons_ef8c08_256x240.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-icons_ffd27a_256x240.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/images/ui-icons_ffffff_256x240.png create mode 100644 addon/js_upload/file-uploader/tests/jquery-ui/ui-lightness/jquery-ui-1.8.4.custom.css create mode 100644 addon/js_upload/file-uploader/tests/qunit/package.json create mode 100644 addon/js_upload/file-uploader/tests/qunit/qunit/qunit.css create mode 100644 addon/js_upload/file-uploader/tests/qunit/qunit/qunit.js create mode 100644 addon/js_upload/file-uploader/tests/qunit/test/index.html create mode 100644 addon/js_upload/file-uploader/tests/qunit/test/same.js create mode 100644 addon/js_upload/file-uploader/tests/qunit/test/test.js create mode 100644 addon/js_upload/file-uploader/tests/sample-files/1imagelonglonglonglonglonglongname.gif create mode 100644 addon/js_upload/file-uploader/tests/sample-files/2larger.txt create mode 100644 addon/js_upload/file-uploader/tests/sample-files/3empty.txt create mode 100644 addon/js_upload/file-uploader/tests/sample-files/4text.txt create mode 100644 addon/js_upload/file-uploader/tests/sample-files/5text.txt create mode 100644 addon/js_upload/file-uploader/tests/sample-files/6text.txt create mode 100644 addon/js_upload/file-uploader/tests/sample-files/7small.txt create mode 100644 addon/js_upload/file-uploader/tests/sample-files/8text.txt create mode 100644 addon/js_upload/file-uploader/tests/separate-file-list.htm create mode 100644 addon/js_upload/file-uploader/tests/test-acceptance.htm create mode 100644 addon/js_upload/file-uploader/tests/test-drop-zone.htm create mode 100644 addon/js_upload/file-uploader/tests/test-handler-queue.htm create mode 100644 addon/js_upload/file-uploader/tests/test-upload-handlers.htm (limited to 'addon/js_upload/file-uploader') diff --git a/addon/js_upload/file-uploader/client/demo.htm b/addon/js_upload/file-uploader/client/demo.htm new file mode 100644 index 000000000..2a0cd6d30 --- /dev/null +++ b/addon/js_upload/file-uploader/client/demo.htm @@ -0,0 +1,38 @@ + + + + + + + + +

Back to project page

+ +

To upload a file, click on the button below. Drag-and-drop is supported in FF, Chrome.

+

Progress-bar is supported in FF3.6+, Chrome6+, Safari4+

+ +
+ +
+ + + + + \ No newline at end of file diff --git a/addon/js_upload/file-uploader/client/do-nothing.htm b/addon/js_upload/file-uploader/client/do-nothing.htm new file mode 100644 index 000000000..0da19059d --- /dev/null +++ b/addon/js_upload/file-uploader/client/do-nothing.htm @@ -0,0 +1 @@ +{success:true} diff --git a/addon/js_upload/file-uploader/client/fileuploader.css b/addon/js_upload/file-uploader/client/fileuploader.css new file mode 100644 index 000000000..0e3f111a9 --- /dev/null +++ b/addon/js_upload/file-uploader/client/fileuploader.css @@ -0,0 +1,31 @@ +.qq-uploader { position:relative; width: 100%;} + +.qq-upload-button { + display:block; /* or inline-block */ + width: 105px; padding: 7px 0; text-align:center; + background:#880000; border-bottom:1px solid #ddd;color:#fff; +} +.qq-upload-button-hover {background:#cc0000;} +.qq-upload-button-focus {outline:1px dotted black;} + +.qq-upload-drop-area { + position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2; + background:#FF9797; text-align:center; +} +.qq-upload-drop-area span { + display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px; +} +.qq-upload-drop-area-active {background:#FF7171;} + +.qq-upload-list {margin:15px 35px; padding:0; list-style:disc;} +.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:12px;} +.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text { + margin-right: 7px; +} + +.qq-upload-file {} +.qq-upload-spinner {display:inline-block; background: url("loading.gif"); width:15px; height:15px; vertical-align:text-bottom;} +.qq-upload-size,.qq-upload-cancel {font-size:11px;} + +.qq-upload-failed-text {display:none;} +.qq-upload-fail .qq-upload-failed-text {display:inline;} \ No newline at end of file diff --git a/addon/js_upload/file-uploader/client/fileuploader.js b/addon/js_upload/file-uploader/client/fileuploader.js new file mode 100644 index 000000000..89c09ebf5 --- /dev/null +++ b/addon/js_upload/file-uploader/client/fileuploader.js @@ -0,0 +1,1247 @@ +/** + * http://github.com/valums/file-uploader + * + * Multiple file upload component with progress-bar, drag-and-drop. + * © 2010 Andrew Valums ( andrew(at)valums.com ) + * + * Licensed under GNU GPL 2 or later, see license.txt. + */ + +// +// Helper functions +// + +var qq = qq || {}; + +/** + * Adds all missing properties from second obj to first obj + */ +qq.extend = function(first, second){ + for (var prop in second){ + first[prop] = second[prop]; + } +}; + +/** + * Searches for a given element in the array, returns -1 if it is not present. + * @param {Number} [from] The index at which to begin the search + */ +qq.indexOf = function(arr, elt, from){ + if (arr.indexOf) return arr.indexOf(elt, from); + + from = from || 0; + var len = arr.length; + + if (from < 0) from += len; + + for (; from < len; from++){ + if (from in arr && arr[from] === elt){ + return from; + } + } + return -1; +}; + +qq.getUniqueId = (function(){ + var id = 0; + return function(){ return id++; }; +})(); + +// +// Events + +qq.attach = function(element, type, fn){ + if (element.addEventListener){ + element.addEventListener(type, fn, false); + } else if (element.attachEvent){ + element.attachEvent('on' + type, fn); + } +}; +qq.detach = function(element, type, fn){ + if (element.removeEventListener){ + element.removeEventListener(type, fn, false); + } else if (element.attachEvent){ + element.detachEvent('on' + type, fn); + } +}; + +qq.preventDefault = function(e){ + if (e.preventDefault){ + e.preventDefault(); + } else{ + e.returnValue = false; + } +}; + +// +// Node manipulations + +/** + * Insert node a before node b. + */ +qq.insertBefore = function(a, b){ + b.parentNode.insertBefore(a, b); +}; +qq.remove = function(element){ + element.parentNode.removeChild(element); +}; + +qq.contains = function(parent, descendant){ + // compareposition returns false in this case + if (parent == descendant) return true; + + if (parent.contains){ + return parent.contains(descendant); + } else { + return !!(descendant.compareDocumentPosition(parent) & 8); + } +}; + +/** + * Creates and returns element from html string + * Uses innerHTML to create an element + */ +qq.toElement = (function(){ + var div = document.createElement('div'); + return function(html){ + div.innerHTML = html; + var element = div.firstChild; + div.removeChild(element); + return element; + }; +})(); + +// +// Node properties and attributes + +/** + * Sets styles for an element. + * Fixes opacity in IE6-8. + */ +qq.css = function(element, styles){ + if (styles.opacity != null){ + if (typeof element.style.opacity != 'string' && typeof(element.filters) != 'undefined'){ + styles.filter = 'alpha(opacity=' + Math.round(100 * styles.opacity) + ')'; + } + } + qq.extend(element.style, styles); +}; +qq.hasClass = function(element, name){ + var re = new RegExp('(^| )' + name + '( |$)'); + return re.test(element.className); +}; +qq.addClass = function(element, name){ + if (!qq.hasClass(element, name)){ + element.className += ' ' + name; + } +}; +qq.removeClass = function(element, name){ + var re = new RegExp('(^| )' + name + '( |$)'); + element.className = element.className.replace(re, ' ').replace(/^\s+|\s+$/g, ""); +}; +qq.setText = function(element, text){ + element.innerText = text; + element.textContent = text; +}; + +// +// Selecting elements + +qq.children = function(element){ + var children = [], + child = element.firstChild; + + while (child){ + if (child.nodeType == 1){ + children.push(child); + } + child = child.nextSibling; + } + + return children; +}; + +qq.getByClass = function(element, className){ + if (element.querySelectorAll){ + return element.querySelectorAll('.' + className); + } + + var result = []; + var candidates = element.getElementsByTagName("*"); + var len = candidates.length; + + for (var i = 0; i < len; i++){ + if (qq.hasClass(candidates[i], className)){ + result.push(candidates[i]); + } + } + return result; +}; + +/** + * obj2url() takes a json-object as argument and generates + * a querystring. pretty much like jQuery.param() + * + * how to use: + * + * `qq.obj2url({a:'b',c:'d'},'http://any.url/upload?otherParam=value');` + * + * will result in: + * + * `http://any.url/upload?otherParam=value&a=b&c=d` + * + * @param Object JSON-Object + * @param String current querystring-part + * @return String encoded querystring + */ +qq.obj2url = function(obj, temp, prefixDone){ + var uristrings = [], + prefix = '&', + add = function(nextObj, i){ + var nextTemp = temp + ? (/\[\]$/.test(temp)) // prevent double-encoding + ? temp + : temp+'['+i+']' + : i; + if ((nextTemp != 'undefined') && (i != 'undefined')) { + uristrings.push( + (typeof nextObj === 'object') + ? qq.obj2url(nextObj, nextTemp, true) + : (Object.prototype.toString.call(nextObj) === '[object Function]') + ? encodeURIComponent(nextTemp) + '=' + encodeURIComponent(nextObj()) + : encodeURIComponent(nextTemp) + '=' + encodeURIComponent(nextObj) + ); + } + }; + + if (!prefixDone && temp) { + prefix = (/\?/.test(temp)) ? (/\?$/.test(temp)) ? '' : '&' : '?'; + uristrings.push(temp); + uristrings.push(qq.obj2url(obj)); + } else if ((Object.prototype.toString.call(obj) === '[object Array]') && (typeof obj != 'undefined') ) { + // we wont use a for-in-loop on an array (performance) + for (var i = 0, len = obj.length; i < len; ++i){ + add(obj[i], i); + } + } else if ((typeof obj != 'undefined') && (obj !== null) && (typeof obj === "object")){ + // for anything else but a scalar, we will use for-in-loop + for (var i in obj){ + add(obj[i], i); + } + } else { + uristrings.push(encodeURIComponent(temp) + '=' + encodeURIComponent(obj)); + } + + return uristrings.join(prefix) + .replace(/^&/, '') + .replace(/%20/g, '+'); +}; + +// +// +// Uploader Classes +// +// + +var qq = qq || {}; + +/** + * Creates upload button, validates upload, but doesn't create file list or dd. + */ +qq.FileUploaderBasic = function(o){ + this._options = { + // set to true to see the server response + debug: false, + action: '/server/upload', + params: {}, + button: null, + multiple: true, + maxConnections: 3, + // validation + allowedExtensions: [], + sizeLimit: 0, + minSizeLimit: 0, + // events + // return false to cancel submit + onSubmit: function(id, fileName){}, + onProgress: function(id, fileName, loaded, total){}, + onComplete: function(id, fileName, responseJSON){}, + onCancel: function(id, fileName){}, + // messages + messages: { + typeError: "{file} has invalid extension. Only {extensions} are allowed.", + sizeError: "{file} is too large, maximum file size is {sizeLimit}.", + minSizeError: "{file} is too small, minimum file size is {minSizeLimit}.", + emptyError: "{file} is empty, please select files again without it.", + onLeave: "The files are being uploaded, if you leave now the upload will be cancelled." + }, + showMessage: function(message){ + alert(message); + } + }; + qq.extend(this._options, o); + + // number of files being uploaded + this._filesInProgress = 0; + this._handler = this._createUploadHandler(); + + if (this._options.button){ + this._button = this._createUploadButton(this._options.button); + } + + this._preventLeaveInProgress(); +}; + +qq.FileUploaderBasic.prototype = { + setParams: function(params){ + this._options.params = params; + }, + getInProgress: function(){ + return this._filesInProgress; + }, + _createUploadButton: function(element){ + var self = this; + + return new qq.UploadButton({ + element: element, + multiple: this._options.multiple && qq.UploadHandlerXhr.isSupported(), + onChange: function(input){ + self._onInputChange(input); + } + }); + }, + _createUploadHandler: function(){ + var self = this, + handlerClass; + + if(qq.UploadHandlerXhr.isSupported()){ + handlerClass = 'UploadHandlerXhr'; + } else { + handlerClass = 'UploadHandlerForm'; + } + + var handler = new qq[handlerClass]({ + debug: this._options.debug, + action: this._options.action, + maxConnections: this._options.maxConnections, + onProgress: function(id, fileName, loaded, total){ + self._onProgress(id, fileName, loaded, total); + self._options.onProgress(id, fileName, loaded, total); + }, + onComplete: function(id, fileName, result){ + self._onComplete(id, fileName, result); + self._options.onComplete(id, fileName, result); + }, + onCancel: function(id, fileName){ + self._onCancel(id, fileName); + self._options.onCancel(id, fileName); + } + }); + + return handler; + }, + _preventLeaveInProgress: function(){ + var self = this; + + qq.attach(window, 'beforeunload', function(e){ + if (!self._filesInProgress){return;} + + var e = e || window.event; + // for ie, ff + e.returnValue = self._options.messages.onLeave; + // for webkit + return self._options.messages.onLeave; + }); + }, + _onSubmit: function(id, fileName){ + this._filesInProgress++; + }, + _onProgress: function(id, fileName, loaded, total){ + }, + _onComplete: function(id, fileName, result){ + this._filesInProgress--; + if (result.error){ + this._options.showMessage(result.error); + } + }, + _onCancel: function(id, fileName){ + this._filesInProgress--; + }, + _onInputChange: function(input){ + if (this._handler instanceof qq.UploadHandlerXhr){ + this._uploadFileList(input.files); + } else { + if (this._validateFile(input)){ + this._uploadFile(input); + } + } + this._button.reset(); + }, + _uploadFileList: function(files){ + for (var i=0; i this._options.sizeLimit){ + this._error('sizeError', name); + return false; + + } else if (size && size < this._options.minSizeLimit){ + this._error('minSizeError', name); + return false; + } + + return true; + }, + _error: function(code, fileName){ + var message = this._options.messages[code]; + function r(name, replacement){ message = message.replace(name, replacement); } + + r('{file}', this._formatFileName(fileName)); + r('{extensions}', this._options.allowedExtensions.join(', ')); + r('{sizeLimit}', this._formatSize(this._options.sizeLimit)); + r('{minSizeLimit}', this._formatSize(this._options.minSizeLimit)); + + this._options.showMessage(message); + }, + _formatFileName: function(name){ + if (name.length > 33){ + name = name.slice(0, 19) + '...' + name.slice(-13); + } + return name; + }, + _isAllowedExtension: function(fileName){ + var ext = (-1 !== fileName.indexOf('.')) ? fileName.replace(/.*[.]/, '').toLowerCase() : ''; + var allowed = this._options.allowedExtensions; + + if (!allowed.length){return true;} + + for (var i=0; i 99); + + return Math.max(bytes, 0.1).toFixed(1) + ['kB', 'MB', 'GB', 'TB', 'PB', 'EB'][i]; + } +}; + + +/** + * Class that creates upload widget with drag-and-drop and file list + * @inherits qq.FileUploaderBasic + */ +qq.FileUploader = function(o){ + // call parent constructor + qq.FileUploaderBasic.apply(this, arguments); + + // additional options + qq.extend(this._options, { + element: null, + // if set, will be used instead of qq-upload-list in template + listElement: null, + + template: '
' + + '
Drop files here to upload
' + + '
Upload a file
' + + '
    ' + + '
    ', + + // template for one item in file list + fileTemplate: '
  • ' + + '' + + '' + + '' + + 'Cancel' + + 'Failed' + + '
    • ', + + classes: { + // used to get elements from templates + button: 'qq-upload-button', + drop: 'qq-upload-drop-area', + dropActive: 'qq-upload-drop-area-active', + list: 'qq-upload-list', + + file: 'qq-upload-file', + spinner: 'qq-upload-spinner', + size: 'qq-upload-size', + cancel: 'qq-upload-cancel', + + // added to list item when upload completes + // used in css to hide progress spinner + success: 'qq-upload-success', + fail: 'qq-upload-fail' + } + }); + // overwrite options with user supplied + qq.extend(this._options, o); + + this._element = this._options.element; + this._element.innerHTML = this._options.template; + this._listElement = this._options.listElement || this._find(this._element, 'list'); + + this._classes = this._options.classes; + + this._button = this._createUploadButton(this._find(this._element, 'button')); + + this._bindCancelEvent(); + this._setupDragDrop(); +}; + +// inherit from Basic Uploader +qq.extend(qq.FileUploader.prototype, qq.FileUploaderBasic.prototype); + +qq.extend(qq.FileUploader.prototype, { + /** + * Gets one of the elements listed in this._options.classes + **/ + _find: function(parent, type){ + var element = qq.getByClass(parent, this._options.classes[type])[0]; + if (!element){ + throw new Error('element not found ' + type); + } + + return element; + }, + _setupDragDrop: function(){ + var self = this, + dropArea = this._find(this._element, 'drop'); + + var dz = new qq.UploadDropZone({ + element: dropArea, + onEnter: function(e){ + qq.addClass(dropArea, self._classes.dropActive); + e.stopPropagation(); + }, + onLeave: function(e){ + e.stopPropagation(); + }, + onLeaveNotDescendants: function(e){ + qq.removeClass(dropArea, self._classes.dropActive); + }, + onDrop: function(e){ + dropArea.style.display = 'none'; + qq.removeClass(dropArea, self._classes.dropActive); + self._uploadFileList(e.dataTransfer.files); + } + }); + + dropArea.style.display = 'none'; + + qq.attach(document, 'dragenter', function(e){ + if (!dz._isValidFileDrag(e)) return; + + dropArea.style.display = 'block'; + }); + qq.attach(document, 'dragleave', function(e){ + if (!dz._isValidFileDrag(e)) return; + + var relatedTarget = document.elementFromPoint(e.clientX, e.clientY); + // only fire when leaving document out + if ( ! relatedTarget || relatedTarget.nodeName == "HTML"){ + dropArea.style.display = 'none'; + } + }); + }, + _onSubmit: function(id, fileName){ + qq.FileUploaderBasic.prototype._onSubmit.apply(this, arguments); + this._addToList(id, fileName); + }, + _onProgress: function(id, fileName, loaded, total){ + qq.FileUploaderBasic.prototype._onProgress.apply(this, arguments); + + var item = this._getItemByFileId(id); + var size = this._find(item, 'size'); + size.style.display = 'inline'; + + var text; + if (loaded != total){ + text = Math.round(loaded / total * 100) + '% from ' + this._formatSize(total); + } else { + text = this._formatSize(total); + } + + qq.setText(size, text); + }, + _onComplete: function(id, fileName, result){ + qq.FileUploaderBasic.prototype._onComplete.apply(this, arguments); + + // mark completed + var item = this._getItemByFileId(id); + qq.remove(this._find(item, 'cancel')); + qq.remove(this._find(item, 'spinner')); + + if (result.success){ + qq.addClass(item, this._classes.success); + } else { + qq.addClass(item, this._classes.fail); + } + }, + _addToList: function(id, fileName){ + var item = qq.toElement(this._options.fileTemplate); + item.qqFileId = id; + + var fileElement = this._find(item, 'file'); + qq.setText(fileElement, this._formatFileName(fileName)); + this._find(item, 'size').style.display = 'none'; + + this._listElement.appendChild(item); + }, + _getItemByFileId: function(id){ + var item = this._listElement.firstChild; + + // there can't be txt nodes in dynamically created list + // and we can use nextSibling + while (item){ + if (item.qqFileId == id) return item; + item = item.nextSibling; + } + }, + /** + * delegate click event for cancel link + **/ + _bindCancelEvent: function(){ + var self = this, + list = this._listElement; + + qq.attach(list, 'click', function(e){ + e = e || window.event; + var target = e.target || e.srcElement; + + if (qq.hasClass(target, self._classes.cancel)){ + qq.preventDefault(e); + + var item = target.parentNode; + self._handler.cancel(item.qqFileId); + qq.remove(item); + } + }); + } +}); + +qq.UploadDropZone = function(o){ + this._options = { + element: null, + onEnter: function(e){}, + onLeave: function(e){}, + // is not fired when leaving element by hovering descendants + onLeaveNotDescendants: function(e){}, + onDrop: function(e){} + }; + qq.extend(this._options, o); + + this._element = this._options.element; + + this._disableDropOutside(); + this._attachEvents(); +}; + +qq.UploadDropZone.prototype = { + _disableDropOutside: function(e){ + // run only once for all instances + if (!qq.UploadDropZone.dropOutsideDisabled ){ + + qq.attach(document, 'dragover', function(e){ + if (e.dataTransfer){ + e.dataTransfer.dropEffect = 'none'; + e.preventDefault(); + } + }); + + qq.UploadDropZone.dropOutsideDisabled = true; + } + }, + _attachEvents: function(){ + var self = this; + + qq.attach(self._element, 'dragover', function(e){ + if (!self._isValidFileDrag(e)) return; + + var effect = e.dataTransfer.effectAllowed; + if (effect == 'move' || effect == 'linkMove'){ + e.dataTransfer.dropEffect = 'move'; // for FF (only move allowed) + } else { + e.dataTransfer.dropEffect = 'copy'; // for Chrome + } + + e.stopPropagation(); + e.preventDefault(); + }); + + qq.attach(self._element, 'dragenter', function(e){ + if (!self._isValidFileDrag(e)) return; + + self._options.onEnter(e); + }); + + qq.attach(self._element, 'dragleave', function(e){ + if (!self._isValidFileDrag(e)) return; + + self._options.onLeave(e); + + var relatedTarget = document.elementFromPoint(e.clientX, e.clientY); + // do not fire when moving a mouse over a descendant + if (qq.contains(this, relatedTarget)) return; + + self._options.onLeaveNotDescendants(e); + }); + + qq.attach(self._element, 'drop', function(e){ + if (!self._isValidFileDrag(e)) return; + + e.preventDefault(); + self._options.onDrop(e); + }); + }, + _isValidFileDrag: function(e){ + var dt = e.dataTransfer, + // do not check dt.types.contains in webkit, because it crashes safari 4 + isWebkit = navigator.userAgent.indexOf("AppleWebKit") > -1; + + // dt.effectAllowed is none in Safari 5 + // dt.types.contains check is for firefox + return dt && dt.effectAllowed != 'none' && + (dt.files || (!isWebkit && dt.types.contains && dt.types.contains('Files'))); + + } +}; + +qq.UploadButton = function(o){ + this._options = { + element: null, + // if set to true adds multiple attribute to file input + multiple: false, + // name attribute of file input + name: 'file', + onChange: function(input){}, + hoverClass: 'qq-upload-button-hover', + focusClass: 'qq-upload-button-focus' + }; + + qq.extend(this._options, o); + + this._element = this._options.element; + + // make button suitable container for input + qq.css(this._element, { + position: 'relative', + overflow: 'hidden', + // Make sure browse button is in the right side + // in Internet Explorer + direction: 'ltr' + }); + + this._input = this._createInput(); +}; + +qq.UploadButton.prototype = { + /* returns file input element */ + getInput: function(){ + return this._input; + }, + /* cleans/recreates the file input */ + reset: function(){ + if (this._input.parentNode){ + qq.remove(this._input); + } + + qq.removeClass(this._element, this._options.focusClass); + this._input = this._createInput(); + }, + _createInput: function(){ + var input = document.createElement("input"); + + if (this._options.multiple){ + input.setAttribute("multiple", "multiple"); + } + + input.setAttribute("type", "file"); + input.setAttribute("name", this._options.name); + + qq.css(input, { + position: 'absolute', + // in Opera only 'browse' button + // is clickable and it is located at + // the right side of the input + right: 0, + top: 0, + fontFamily: 'Arial', + // 4 persons reported this, the max values that worked for them were 243, 236, 236, 118 + fontSize: '118px', + margin: 0, + padding: 0, + cursor: 'pointer', + opacity: 0 + }); + + this._element.appendChild(input); + + var self = this; + qq.attach(input, 'change', function(){ + self._options.onChange(input); + }); + + qq.attach(input, 'mouseover', function(){ + qq.addClass(self._element, self._options.hoverClass); + }); + qq.attach(input, 'mouseout', function(){ + qq.removeClass(self._element, self._options.hoverClass); + }); + qq.attach(input, 'focus', function(){ + qq.addClass(self._element, self._options.focusClass); + }); + qq.attach(input, 'blur', function(){ + qq.removeClass(self._element, self._options.focusClass); + }); + + // IE and Opera, unfortunately have 2 tab stops on file input + // which is unacceptable in our case, disable keyboard access + if (window.attachEvent){ + // it is IE or Opera + input.setAttribute('tabIndex', "-1"); + } + + return input; + } +}; + +/** + * Class for uploading files, uploading itself is handled by child classes + */ +qq.UploadHandlerAbstract = function(o){ + this._options = { + debug: false, + action: '/upload.php', + // maximum number of concurrent uploads + maxConnections: 999, + onProgress: function(id, fileName, loaded, total){}, + onComplete: function(id, fileName, response){}, + onCancel: function(id, fileName){} + }; + qq.extend(this._options, o); + + this._queue = []; + // params for files in queue + this._params = []; +}; +qq.UploadHandlerAbstract.prototype = { + log: function(str){ + if (this._options.debug && window.console) console.log('[uploader] ' + str); + }, + /** + * Adds file or file input to the queue + * @returns id + **/ + add: function(file){}, + /** + * Sends the file identified by id and additional query params to the server + */ + upload: function(id, params){ + var len = this._queue.push(id); + + var copy = {}; + qq.extend(copy, params); + this._params[id] = copy; + + // if too many active uploads, wait... + if (len <= this._options.maxConnections){ + this._upload(id, this._params[id]); + } + }, + /** + * Cancels file upload by id + */ + cancel: function(id){ + this._cancel(id); + this._dequeue(id); + }, + /** + * Cancells all uploads + */ + cancelAll: function(){ + for (var i=0; i= max){ + var nextId = this._queue[max-1]; + this._upload(nextId, this._params[nextId]); + } + } +}; + +/** + * Class for uploading files using form and iframe + * @inherits qq.UploadHandlerAbstract + */ +qq.UploadHandlerForm = function(o){ + qq.UploadHandlerAbstract.apply(this, arguments); + + this._inputs = {}; +}; +// @inherits qq.UploadHandlerAbstract +qq.extend(qq.UploadHandlerForm.prototype, qq.UploadHandlerAbstract.prototype); + +qq.extend(qq.UploadHandlerForm.prototype, { + add: function(fileInput){ + fileInput.setAttribute('name', 'qqfile'); + var id = 'qq-upload-handler-iframe' + qq.getUniqueId(); + + this._inputs[id] = fileInput; + + // remove file input from DOM + if (fileInput.parentNode){ + qq.remove(fileInput); + } + + return id; + }, + getName: function(id){ + // get input value and remove path to normalize + return this._inputs[id].value.replace(/.*(\/|\\)/, ""); + }, + _cancel: function(id){ + this._options.onCancel(id, this.getName(id)); + + delete this._inputs[id]; + + var iframe = document.getElementById(id); + if (iframe){ + // to cancel request set src to something else + // we use src="javascript:false;" because it doesn't + // trigger ie6 prompt on https + iframe.setAttribute('src', 'javascript:false;'); + + qq.remove(iframe); + } + }, + _upload: function(id, params){ + var input = this._inputs[id]; + + if (!input){ + throw new Error('file with passed id was not added, or already uploaded or cancelled'); + } + + var fileName = this.getName(id); + + var iframe = this._createIframe(id); + var form = this._createForm(iframe, params); + form.appendChild(input); + + var self = this; + this._attachLoadEvent(iframe, function(){ + self.log('iframe loaded'); + + var response = self._getIframeContentJSON(iframe); + + self._options.onComplete(id, fileName, response); + self._dequeue(id); + + delete self._inputs[id]; + // timeout added to fix busy state in FF3.6 + setTimeout(function(){ + qq.remove(iframe); + }, 1); + }); + + form.submit(); + qq.remove(form); + + return id; + }, + _attachLoadEvent: function(iframe, callback){ + qq.attach(iframe, 'load', function(){ + // when we remove iframe from dom + // the request stops, but in IE load + // event fires + if (!iframe.parentNode){ + return; + } + + // fixing Opera 10.53 + if (iframe.contentDocument && + iframe.contentDocument.body && + iframe.contentDocument.body.innerHTML == "false"){ + // In Opera event is fired second time + // when body.innerHTML changed from false + // to server response approx. after 1 sec + // when we upload file with iframe + return; + } + + callback(); + }); + }, + /** + * Returns json object received by iframe from server. + */ + _getIframeContentJSON: function(iframe){ + // iframe.contentWindow.document - for IE<7 + var doc = iframe.contentDocument ? iframe.contentDocument: iframe.contentWindow.document, + response; + + this.log("converting iframe's innerHTML to JSON"); + this.log("innerHTML = " + doc.body.innerHTML); + + try { + response = eval("(" + doc.body.innerHTML + ")"); + } catch(err){ + response = {}; + } + + return response; + }, + /** + * Creates iframe with unique name + */ + _createIframe: function(id){ + // We can't use following code as the name attribute + // won't be properly registered in IE6, and new window + // on form submit will open + // var iframe = document.createElement('iframe'); + // iframe.setAttribute('name', id); + + var iframe = qq.toElement('