qooxview 1.9.9

data/lib/qooxview/frontend/UploadMgr/source/class/com/zenesis/qx/upload/FormHandler.js

@@ -0,0 +1,192 @@
+/* ***********************************************************************
+
+   UploadMgr - provides an API for uploading one or multiple files
+   with progress feedback (on modern browsers), does not block the user 
+   interface during uploads, supports cancelling uploads.
+
+   http://qooxdoo.org
+
+   Copyright:
+     2011 Zenesis Limited, http://www.zenesis.com
+
+   License:
+     LGPL: http://www.gnu.org/licenses/lgpl.html
+     EPL: http://www.eclipse.org/org/documents/epl-v10.php
+     
+     This software is provided under the same licensing terms as Qooxdoo,
+     please see the LICENSE file in the Qooxdoo project's top-level directory 
+     for details.
+     
+     Parts of this code is based on the work by Andrew Valums (andrew@valums.com)
+     and is covered by the GNU GPL and GNU LGPL2 licenses; please see
+     http://valums.com/ajax-upload/.
+
+   Authors:
+     * John Spackman (john.spackman@zenesis.com)
+
+************************************************************************/
+
+/**
+ * Implementation of AbstractHandler that uses iframe and form DOM elements
+ * to send the file.
+ */
+
+qx.Class.define("com.zenesis.qx.upload.FormHandler", {
+	extend: com.zenesis.qx.upload.AbstractHandler,
+	
+	members: {
+		
+		/*
+		 * @Override
+		 */
+		_createFile: function(input) {
+		    var id = "upload-" + this._getUniqueFileId(),
+		    	filename = input.value.replace(/.*(\/|\\)/, ""),
+		    	file = new com.zenesis.qx.upload.File(input, filename, id);
+			return file;
+		},
+		
+		/*
+		 * @Override
+		 */
+		_doUpload: function(file) {
+		    var iframe = this._createIframe(file.getId()),
+		    	form = this._createForm(iframe, file);
+		    
+		    form.appendChild(file.getBrowserObject());
+		    
+		    var self = this;
+		    
+		    qx.bom.Event.addNativeListener(iframe, "load", function(evt) { 
+		        // when we remove iframe from dom the request stops, but in IE load event fires
+		        if (!iframe.parentNode)
+		            return;
+		
+		        // fixing Opera 10.53
+		        try {
+			        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;
+			        }
+		        }catch(e) {
+		        	// IE fix
+		        }
+		        
+		        //self.debug('iframe loaded');
+		        
+		        var response = self._getIframeContent(iframe);
+		
+		        self._onCompleted(file, response);
+		        
+		        // timeout added to fix busy state in FF3.6
+		        setTimeout(function(){
+		        	iframe.parentNode.removeChild(iframe);
+		        	form.parentNode.removeChild(form);
+		        }, 1);
+		    });
+			form.submit();
+		},
+		
+		/*
+		 * @Override
+		 */
+		_doCancel: function(file) {
+			var data = file.getUserData("com.zenesis.qx.upload.FormHandler");
+			if (!data)
+				return;
+			var iframe = document.getElementById("upload-iframe-" + file.getId()),
+				form = document.getElementById("upload-form-" + file.getId());
+			
+			if (iframe != null) {
+	            // 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;');
+	        	iframe.parentNode.removeChild(iframe);
+			}
+			if (form != null)
+				form.parentNode.removeChild(form);
+		},
+		
+		/**
+		 * Returns text received by iframe from server.
+		 * @return {String}
+		 */
+		_getIframeContent: function(iframe){
+			try {
+			    // iframe.contentWindow.document - for IE<7
+			    var doc = iframe.contentDocument ? iframe.contentDocument: iframe.contentWindow.document,
+			        response = doc.body.innerHTML;
+			    //this.debug("response=" + response);
+			    return response;
+			}catch(e) {
+				// IE will throw an exception if the upload is cross domain and we try to access the iframe's content
+				return null;
+			}
+		},
+		
+		/**
+		 * Creates iframe with unique name
+		 * @return {DOMElement} the iframe
+		 */
+		_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 = qx.dom.Element.create("iframe", { 
+		    	src: "javascript:false;", // src="javascript:false;" removes ie6 prompt on https 
+		    	name: id, 
+		    	id: "upload-iframe-" + id 
+	    	});
+		
+		    qx.bom.element.Style.setStyles(iframe, {
+		    	display: 'none'
+		    });
+		    document.body.appendChild(iframe);
+		
+		    return iframe;
+		},
+		
+		/**
+		 * Creates form, that will be submitted to iframe
+		 * @return {DOMElement} the form
+		 */
+		_createForm: function(iframe, file){
+		    // We can't use the following code in IE6
+		    // var form = document.createElement('form');
+		    // form.setAttribute('method', 'post');
+		    // form.setAttribute('enctype', 'multipart/form-data');
+		    // Because in this case file won't be attached to request
+		    var form = qx.dom.Element.create("form", { 
+		    	enctype: "multipart/form-data",
+		    	encoding: "multipart/form-data",
+		    	action: this._getUploader().getUploadUrl(),
+		    	method: "POST",
+		    	target: iframe.name,
+		    	id: "upload-form-" + file.getId()
+			});
+		
+		    qx.bom.element.Style.setStyles(form, {
+		    	display: 'none'
+		    });
+		    var params = this._getMergedParams(file);
+		    for (var name in params) {
+		    	var el = qx.dom.Element.create('input', {
+		    		type: "hidden",
+		    		name: name,
+		    		value: params[name]
+		    	});
+		    	form.appendChild(el);
+		    }
+		    document.body.appendChild(form);
+		
+		    return form;
+		}
+
+	}
+});

data/lib/qooxview/frontend/UploadMgr/source/class/com/zenesis/qx/upload/InputElement.js

@@ -0,0 +1,68 @@
+qx.Class.define("com.zenesis.qx.upload.InputElement", {
+	extend: qx.html.Element,
+	
+	construct: function(widget, multiple, name) {
+        // styling the input[type=file]
+        // element is a bit tricky. Some browsers just ignore the normal
+        // css style input. Firefox is especially tricky in this regard.
+        // since we are providing our one look via the underlying qooxdoo
+        // button anyway, all we have todo is position the ff upload
+        // button over the button element. This is tricky in itself
+        // as the ff upload button consists of a text and a button element
+        // which are not css accessible themselfes. So the best we can do,
+        // is align to the top right corner of the upload widget and set its
+        // font so large that it will cover even realy large underlying buttons.
+        var css = {
+              position  : "absolute", 
+              cursor    : "pointer",
+              hideFocus : "true",
+              zIndex: widget.getZIndex() + 11,
+              opacity: 0,
+              // align to the top right hand corner
+              top: '0px',
+              right: '0px',
+              // ff ignores the width setting pick a realy large font size to get
+              // a huge button that covers the area of the upload button
+              fontFamily: 'Arial',
+              // from valums.com/ajax-upload: 4 persons reported this, the max values that worked for them were 243, 236, 236, 118
+              fontSize: '118px'
+        };
+        if ((qx.core.Environment && qx.core.Environment.get('browser.name') == 'ie' && qx.core.Environment.get('browser.version') < 9 )
+              || ( ! qx.core.Environment && qx.bom.client.Engine.MSHTML && qx.bom.client.Engine.VERSION < 9.0)) {
+        	css.filter = 'alpha(opacity=0)';
+            css.width = '200%';
+            css.height = '100%';
+        }
+        
+		this.base(arguments, 'input', css, {
+    			type : 'file',
+		      	name : name,
+		      	title: ' '
+	        });
+		this.__widget = widget;
+		this.setMultiple(!!multiple);
+	},
+	
+	properties: {
+		multiple: {
+			init: false,
+			check: "Boolean",
+			apply: "_applyMultiple"
+		}
+	},
+	
+	members: {
+		__widget: null,
+		
+		getWidget: function() {
+			return this.__widget;
+		},
+		
+		_applyMultiple: function(value, oldValue) {
+			if (value)
+				this.setAttribute("multiple", "multiple");
+			else
+				this.removeAttribute("multiple");
+		}
+	}
+});

data/lib/qooxview/frontend/UploadMgr/source/class/com/zenesis/qx/upload/MParameters.js

@@ -0,0 +1,67 @@
+/* ***********************************************************************
+
+   UploadMgr - provides an API for uploading one or multiple files
+   with progress feedback (on modern browsers), does not block the user 
+   interface during uploads, supports cancelling uploads.
+
+   http://qooxdoo.org
+
+   Copyright:
+     2011 Zenesis Limited, http://www.zenesis.com
+
+   License:
+     LGPL: http://www.gnu.org/licenses/lgpl.html
+     EPL: http://www.eclipse.org/org/documents/epl-v10.php
+     
+     This software is provided under the same licensing terms as Qooxdoo,
+     please see the LICENSE file in the Qooxdoo project's top-level directory 
+     for details.
+
+   Authors:
+     * John Spackman (john.spackman@zenesis.com)
+
+************************************************************************/
+
+/**
+ * This mixin adds get/setParam methods used by UploadManager, AbstractHandler,
+ * and UploadButton
+ */
+qx.Mixin.define("com.zenesis.qx.upload.MParameters", {
+	members: {
+		__params: null,
+		
+		/**
+		 * Sets a parameter value to be sent with the file
+		 * @param name {String} name of the parameter
+		 * @param value {String} the value of the parameter, or null to delete a previous parameter
+		 */
+		setParam: function(name, value) {
+			if (value !== null && typeof value != "string")
+				value ="" + value;
+			if (!this.__params)
+				this.__params = {};
+			this.__params[name] = value;
+		},
+		
+		/**
+		 * Returns a parameter value to be sent with the file
+		 * @param name
+		 * @returns {Boolean}
+		 */
+		getParam: function(name) {
+			return this.__params && this.__params[name];
+		},
+		
+		/**
+		 * Returns a list of parameter names
+		 * @returns {Array}
+		 */
+		getParamNames: function() {
+			var result = [];
+			if (this.__params)
+				for (var name in this.__params)
+					result.push(name);
+			return result;
+		}
+	}
+});

data/lib/qooxview/frontend/UploadMgr/source/class/com/zenesis/qx/upload/MUploadButton.js

@@ -0,0 +1,40 @@
+/* ***********************************************************************
+
+   UploadMgr - provides an API for uploading one or multiple files
+   with progress feedback (on modern browsers), does not block the user 
+   interface during uploads, supports cancelling uploads.
+
+   http://qooxdoo.org
+
+   Copyright:
+     2011 Zenesis Limited, http://www.zenesis.com
+
+   License:
+     LGPL: http://www.gnu.org/licenses/lgpl.html
+     EPL: http://www.eclipse.org/org/documents/epl-v10.php
+     
+     This software is provided under the same licensing terms as Qooxdoo,
+     please see the LICENSE file in the Qooxdoo project's top-level directory 
+     for details.
+
+   Authors:
+     * John Spackman (john.spackman@zenesis.com)
+
+************************************************************************/
+
+/**
+ * This mixin provides a trivial way to make any widget suitable as a widget
+ * for Uploader - the only trick is that the capture and releaseCapture methods 
+ * in qx.ui.core.Widget must not be fired.
+ */
+qx.Mixin.define("com.zenesis.qx.upload.MUploadButton", {
+	include: [ com.zenesis.qx.upload.MParameters ],
+	
+	members: {
+	    // overridden
+	    capture : qx.lang.Function.empty,
+
+	    // overridden
+	    releaseCapture : qx.lang.Function.empty
+	}
+});

data/lib/qooxview/frontend/UploadMgr/source/class/com/zenesis/qx/upload/UploadButton.js

@@ -0,0 +1,35 @@
+/* ***********************************************************************
+
+   UploadMgr - provides an API for uploading one or multiple files
+   with progress feedback (on modern browsers), does not block the user 
+   interface during uploads, supports cancelling uploads.
+
+   http://qooxdoo.org
+
+   Copyright:
+     2011 Zenesis Limited, http://www.zenesis.com
+
+   License:
+     LGPL: http://www.gnu.org/licenses/lgpl.html
+     EPL: http://www.eclipse.org/org/documents/epl-v10.php
+     
+     This software is provided under the same licensing terms as Qooxdoo,
+     please see the LICENSE file in the Qooxdoo project's top-level directory 
+     for details.
+
+   Authors:
+     * John Spackman (john.spackman@zenesis.com)
+
+************************************************************************/
+
+/**
+ * Implementation of an UploadButton
+ */
+qx.Class.define("com.zenesis.qx.upload.UploadButton", {
+	extend: qx.ui.form.Button,
+	include: [ com.zenesis.qx.upload.MUploadButton ],
+	
+	members: {
+		
+	}
+});

data/lib/qooxview/frontend/UploadMgr/source/class/com/zenesis/qx/upload/UploadMgr.js

@@ -0,0 +1,301 @@
+/* ***********************************************************************
+
+   UploadMgr - provides an API for uploading one or multiple files
+   with progress feedback (on modern browsers), does not block the user 
+   interface during uploads, supports cancelling uploads.
+
+   http://qooxdoo.org
+
+   Copyright:
+     2011 Zenesis Limited, http://www.zenesis.com
+
+   License:
+     LGPL: http://www.gnu.org/licenses/lgpl.html
+     EPL: http://www.eclipse.org/org/documents/epl-v10.php
+     
+     This software is provided under the same licensing terms as Qooxdoo,
+     please see the LICENSE file in the Qooxdoo project's top-level directory 
+     for details.
+
+   Authors:
+     * John Spackman (john.spackman@zenesis.com)
+
+************************************************************************/
+
+/*
+#require(qx.event.handler.Input)
+ */
+
+/**
+ * Manages uploading of files to the server; this class can use any suitable
+ * widget to attach the input[type=file] to, provided the widget includes
+ * com.zenesis.qx.upload.MUploadButton. 
+ * 
+ * Uploader will use XhrHandler to upload via XMLHttpRequest if supported or 
+ * will fall back to FormHandler.
+ */
+qx.Class.define("com.zenesis.qx.upload.UploadMgr", {
+	extend: qx.core.Object,
+	include: [ com.zenesis.qx.upload.MParameters ],
+	
+	construct: function(widget, uploadUrl) {
+		this.base(arguments);
+		this.__widgetsData = {};
+		if (widget)
+			this.addWidget(widget);
+		if (uploadUrl)
+			this.setUploadUrl(uploadUrl);
+	},
+	
+	events: {
+		/**
+		 * Fired when a file is added to the queue; data is the com.zenesis.qx.upload.File
+		 */
+		"addFile": "qx.event.type.Data",
+		
+		/**
+		 * Fired when a file starts to be uploaded; data is the com.zenesis.qx.upload.File
+		 */
+		"beginUpload": "qx.event.type.Data",
+		
+		/**
+		 * Fired when a file has been uploaded; data is the com.zenesis.qx.upload.File
+		 */
+		"completeUpload": "qx.event.type.Data",
+		
+		/**
+		 * Fired when a file upload has been cancelled; data is the com.zenesis.qx.upload.File
+		 */
+		"cancelUpload": "qx.event.type.Data"
+	},
+	
+	properties: {
+		/**
+		 * The URL to upload to
+		 */
+		uploadUrl: {
+			check: "String",
+			nullable: false,
+			init: "",
+			event: "changeUploadUrl"
+		},
+		
+		/**
+		 * Whether to automatically start uploading when a file is added (default=true)
+		 */
+		autoUpload: {
+			check: "Boolean",
+			init: true,
+			nullable: false,
+			event: "changeAutoUpload",
+			apply: "_applyAutoUpload"
+		},
+		
+		/**
+		 * Whether to support multiple files (default=true); this is not supported on
+		 * older browsers
+		 */
+		multiple: {
+			check: "Boolean",
+			init: true,
+			nullable: false,
+			event: "changeMultiple",
+			apply: "_applyMultiple"
+		},
+		
+		/**
+		 * Prefix to apply to the name of input fields
+		 */
+		inputNamePrefix: {
+			check: "String",
+			init: "uploadMgrInput",
+			nullable: false,
+			event: "changeInputNamePrefix"
+		},
+		
+		/**
+		 * Whether the server can only handle multipart/form-data content type
+		 */
+		requireMultipartFormData: {
+			check: "Boolean",
+			init: true,
+			nullable: false,
+			event: "changeRequireMultipartFormData",
+			apply: "_applyRequireMultipartFormData"
+		}
+	},
+	
+	members: {
+		__widgetsData: null,
+		__inputSerial: 0,
+		__uploadHandler: null,
+		
+		/**
+		 * Adds a widget which is to have an input[type=file] attached; this would typically be an 
+		 * instance of com.zenesis.qx.upload.UploadButton (see com.zenesis.qx.upload.MUploadButton
+		 * for implementing for other widgets)
+		 */
+		addWidget: function(widget) {
+			var appearId = widget.addListenerOnce("appear", function(evt) {
+				var data = this.__widgetsData[widget.toHashCode()];
+				if (data) {
+					data.appearId = null;
+                                        if ( widget.getContainerElement ){
+					  var container = widget.getContainerElement();
+					  container.setStyle("overflow", "hidden");
+					  container.addAt(this._createInputElement(widget), 0);
+                                        }
+					this.__fixupSize(widget);
+				}
+			}, this);
+			var keydownId = null;
+			if (qx.core.Environment.get("engine.name") != "gecko") {
+				keydownId = widget.addListener("keydown", function(evt) {
+					var data = this.__widgetsData[widget.toHashCode()];
+					if (data && data.inputElement) {
+						var dom = data.inputElement.getDomElement();
+						if (dom && typeof dom.click == "function") {
+							//dom.focus();
+							dom.click();
+						}
+					}
+				}, this);
+			}
+			this.__widgetsData[widget.toHashCode()] = { appearId: appearId, keydownId: keydownId, widget: widget, inputElement: null };
+			widget.addListener("resize", function(evt) {
+				this.__fixupSize(widget);
+			}, this);
+		},
+		
+		/**
+		 * Removes a widget
+		 * @param widget
+		 */
+		removeWidget: function(widget) {
+			var data = this.__widgetsData[widget.toHashCode()];
+			if (data) {
+				if (data.appearId)
+					widget.removeListener(data.appearId);
+				if (data.keydownId)
+					widget.removeListener(data.keydownId);
+				delete this.__widgetsData[widget.toHashCode()];
+			}
+		},
+		
+		/**
+		 * Helper method that corrects the size of the input element to match the size of the widget
+		 * @param widget
+		 */
+		__fixupSize: function(widget) {
+			var data = this.__widgetsData[widget.toHashCode()];
+			if (data && data.inputElement) {
+				var bounds = widget.getBounds();
+				data.inputElement.setStyles({
+					width: bounds.width + "px",
+					height: bounds.height + "px"
+				});
+			}
+		},
+		
+		/**
+		 * Callback for changes to the autoUpload property
+		 * @param value
+		 * @param oldValue
+		 */
+		_applyAutoUpload: function(value, oldValue) {
+			this.getUploadHandler().beginUploads();
+		},
+		
+		/**
+		 * Callback for changes to the multiple property
+		 * @param value
+		 * @param oldValue
+		 */
+		_applyMultiple: function(value, oldValue) {
+			for (var hash in this.__widgetsData) {
+				var data = this.__widgetsData[hash];
+				if (data.inputElement)
+					data.inputElement.setMultiple(value);
+			}
+		},
+		
+		/**
+		 * Callback for changes to the requireMultipartFormData property
+		 */
+		_applyRequireMultipartFormData: function(value, oldValue) {
+			if (this.__uploadHandler)
+				throw new Error("Changing the requireMultipartFormData property of " + this + " has no effect once uploads have started");
+		},
+		
+		/**
+		 * Cancels a file being uploaded
+		 * @param file
+		 */
+		cancel: function(file) {
+			this.getUploadHandler().cancel(file);
+		},
+		
+		/**
+		 * Cancels all files being uploaded
+		 * @param file
+		 */
+		cancelAll: function() {
+			this.getUploadHandler().cancelAll();
+		},
+		
+		/**
+		 * Creates the input[type=file] element
+		 * @returns
+		 */
+		_createInputElement: function(widget) {
+			var data = this.__widgetsData[widget.toHashCode()],
+				name = this.getInputNamePrefix() + '-' + (++this.__inputSerial);
+			qx.core.Assert.assertNull(data.inputElement);
+			var elem = data.inputElement = new com.zenesis.qx.upload.InputElement(widget, this.getMultiple(), name);
+	        elem.addListenerOnce("change", qx.lang.Function.bind(this._onInputChange, this, elem));
+	
+	        return elem;
+		},
+		
+		/**
+		 * Resets the input element - ie discards the current one (which presumably has already
+		 * been queued for uploading) and creates a new one 
+		 */
+		_resetInputElement: function(widget) {
+			var data = this.__widgetsData[widget.toHashCode()],
+				elem = data.inputElement,
+				container = widget.getContainerElement();
+			data.inputElement = null;
+			container.remove(elem);
+			container.addAt(this._createInputElement(widget), 0);
+		},
+		
+		/**
+		 * Callback for changes to the input[ty=file]'s value, ie this is called when the user
+		 * has selected a file to upload
+		 * @param evt
+		 */
+		_onInputChange: function(elem, evt) {
+			var widget = elem.getWidget();
+			
+			this.getUploadHandler().addFile(elem.getDomElement(), widget);
+			if (this.getAutoUpload())
+				this.getUploadHandler().beginUploads();
+			this._resetInputElement(widget);
+		},
+		
+		/**
+		 * Returns the upload handler
+		 * @returns
+		 */
+		getUploadHandler: function() {
+			if (!this.__uploadHandler) {
+				if (com.zenesis.qx.upload.XhrHandler.isSupported(this.isRequireMultipartFormData()))
+					this.__uploadHandler = new com.zenesis.qx.upload.XhrHandler(this);
+				else
+					this.__uploadHandler = new com.zenesis.qx.upload.FormHandler(this);
+			}
+			return this.__uploadHandler;
+		}
+	}
+});