Hi Frederic,I don't know if this widget will make its way into official qooxdoo. The classes are not widely tested but they work for me.
And yes, if someone wants to adopt them to qooxdoo ore asks me if I want to do this the answer is yes and yes.
I've attached a zip archive containing all four files again and changed the extension to zi_ so you have to change it back to zip.
I hope it finds its way to you now. frederic schrieb:
Hello Dietrich, Thanks for this widget ! I use Nabble forum to read the mailinglist (http://www.nabble.com/Experimental-file-upload-implementation-tf2630085.html) and the test file Upload_1.html was not included in the forum. Please, could you send the source code of Upload_1.html in an email to the mailinglist ? Is it planned to include your widget natively in Qooxdoo soon or this widget will stay as an third-party ? cheers, frederic Dietrich Streifert wrote:Hello List! I created a file upload widget built of three classesUploadForm: creates a form tag of and a hidden iframe which is the target for the form submission UploadButton: highly inspired from David Gerlich which creates a qx.ui.form.button which overlays an input tag of type file and allows a file selection button which is a normal qooxdoo button. UploadFile: combines a readonly textfield which holds the selected filepath and a uploadbutton in a horizontal layout widget.UploadForm: fires a sending and completed event while UploadFile fires a changeValue event on file selection. There is a setParameter method which creates hidden input tags as childs of the form tag.I'm using this for a single file upload manager who automatically starts uploading after file selection. This is done by attaching an eventlistener of type changeValue to UploadFile which then calls UploadForm.send().The three classes and a testfile is attached to this mail.Please copy all the files to the qooxdoo/frontend/demo/source/html/test directory.You have to provide the url to your upload cgi script in the testfile Upload_1.htmlOne known Problem is that the form tag which is created by UploadForm is not well stylable so there are some browser independant height and top position placement problems.-- Mit freundlichen Grüßen Dietrich Streifert Visionet GmbHqooxdoo » DemoExperimental UploadForm and UploadFile Implementation. The class UploadForm creates a hidden iframe which is used as a target for the form submit. An event of type qx.constant.Event.SENDING is fired after submit. On completion (iframe completed loading) a qx.constant.Event.COMPLETED event is fired. Upload form implements the methods getIframeTextContent,getIframeHtmlContentand getIframeXmlContent to get the content of the iframe UploadFile fires a "changeValue" event after the selection thruogh theOS fileselector iscompleted Multiple UploadFile instances are possible. The text field is readonly/* ************************************************************************ qooxdoo - the new era of web development http://qooxdoo.org Copyright: 2004-2006 by 1&1 Internet AG, Germany, http://www.1and1.org License: LGPL 2.1: http://www.gnu.org/licenses/lgpl.html Authors: * David Gerlich (dgerlich) * Dietrich Streifert (dietrich) ************************************************************************ */ /* ************************************************************************ #module(ui_io) ************************************************************************ */ qx.OO.defineClass("qx.visionet.ui.io.UploadButton", qx.ui.layout.CanvasLayout, function(vName, vText, vIcon, vIconWidth, vIconHeight, vFlash) { qx.ui.layout.CanvasLayout.call(this); this.set({height:"auto",width:"auto",overflow:"hidden"}); if(vName) { this.setName(vName); } this._button = new qx.ui.form.Button(vText, vIcon, vIconHeight, vFlash); this.add(this._button); this._value = '';this.addEventListener(qx.constant.Event.MOUSEOVER, this._onmouseover);this.addEventListener(qx.constant.Event.MOUSEOUT, this._onmouseout); this.addEventListener(qx.constant.Event.MOUSEDOWN, this._onmousedown); this.addEventListener(qx.constant.Event.MOUSEUP, this._onmouseup); this.addEventListener(qx.constant.Event.APPEAR, this._createInputFileTag); }); /* --------------------------------------------------------------------------- PROPERTIES --------------------------------------------------------------------------- */ qx.OO.addProperty({ name : "name", type : qx.constant.Type.STRING, defaultValue : qx.constant.Core.EMPTY }); qx.OO.addProperty({ name : "value", type : qx.constant.Type.STRING, defaultValue : qx.constant.Core.EMPTY });/*--------------------------------------------------------------------------- MODIFIERS --------------------------------------------------------------------------- */ qx.Proto._modifyValue = function(propValue, propOldValue, propData) { if(this._valueInputOnChange) { delete this._valueInputOnChange; } else { if (!propValue || propValue == '') { if (qx.sys.Client.getInstance().isMshtml()) { this._createInputFileTag(); } else { this._input.value = ''; } } else { throw new error("Unable to set value to non null or non empty!");} } return true;}; qx.Proto._modifyName = function(propValue, propOldValue, propData) { if(this._input) { this._input.name = propValue;} return true;}; qx.Proto._modifyElement = function(propValue, propOldValue, propData) {if (propValue) { try { var element = this.getElement();this.setStyleProperty(qx.ui.core.Widget.TAB_PROPERTY_MOZUSERFOCUS, qx.ui.core.Widget.TAB_VALUE_IGNORE);this.setStyleProperty("cursor","pointer"); this.setStyleProperty("cursor","hand"); this.setStyleProperty("left","0px"); }catch (ex) { this.error("error: ", ex); } } qx.ui.form.Button.prototype._modifyElement.call(this, propValue, propOldValue, propData);return true;}; /* --------------------------------------------------------------------------- EVENT-HANDLER --------------------------------------------------------------------------- */ qx.Proto._onmouseover = function(e) { this._button.addState(qx.ui.core.Widget.STATE_OVER); return this._button._onmouseover.call(this, e); }; qx.Proto._onmouseup = function(e) { return qx.ui.form.Button.prototype._onmouseup.call(this, e); }; qx.Proto._onmousedown = function(e) { return qx.ui.form.Button.prototype._onmousedown.call(this, e); }; qx.Proto._onmouseout = function(e) { this._button.removeState(qx.ui.core.Widget.STATE_OVER); return qx.ui.form.Button.prototype._onmouseout.call(this, e); }; qx.Proto._createInputFileTag = function(e) { if(this._input) {this._input.name += "_tmp_"; this._input.parentNode.removeChild(this._input);this._input = null; } var input = this._input = document.createElement("input"); input.type = "file"; input.name = this.getName(); input.style.position = "absolute"; input.style.left = "-860px"; input.style.height = "27px"; input.style.fontSize = "60px"; input.style.clip = "rect(auto, " + 860 + this._button.getWidthValue() + "px, auto, 860px)"; input.style.zIndex = "100"; input.style.cursor = "hand"; input.style.cursor = "pointer"; input.style.filter = "alpha(opacity=0)"; input.style.opacity = "0";input.style.MozOutlinestyle = "none"; input.style.hidefocus = "true";var _this = this; input.onchange = function(e) { return _this._onchange(e); }; this.getElement().appendChild(input); }; qx.Proto._onchange = function(e) { this._valueInputOnChange = true;this.setValue(this._input.value); };/* --------------------------------------------------------------------------- DISPOSER --------------------------------------------------------------------------- */ qx.Proto.dispose = function() { if (this.getDisposed()) { return; } this.removeEventListener(qx.constant.Event.MOUSEOVER, this._onmouseover); this.removeEventListener(qx.constant.Event.MOUSEOUT, this._onmouseout); this.removeEventListener(qx.constant.Event.MOUSEDOWN, this._onmousedown); this.removeEventListener(qx.constant.Event.MOUSEUP, this._onmouseup); this.removeEventListener(qx.constant.Event.APPEAR, this._createInputFileTag); if(this._input) { this._input.parentNode.removeChild(this._input); this._input.onchange = null; this._input = null; }this._button.dispose();this._button = null; qx.ui.layout.CanvasLayout.prototype.dispose.call(this); }; /* ************************************************************************ qooxdoo - the new era of web development http://qooxdoo.org Copyright: 2004-2006 by 1&1 Internet AG, Germany, http://www.1and1.org License: LGPL 2.1: http://www.gnu.org/licenses/lgpl.html Authors: * David Gerlich (dgerlich) * Dietrich Streifert (dietrich) ****************
-- Mit freundlichen Grüßen Dietrich Streifert Visionet GmbH
qooxdoo_file_upload.zi_
Description: Binary data
------------------------------------------------------------------------- Take Surveys. Earn Cash. Influence the Future of IT Join SourceForge.net's Techsay panel and you'll get the chance to share your opinions on IT & business topics through brief surveys - and earn cash http://www.techsay.com/default.php?page=join.php&p=sourceforge&CID=DEVDEV
_______________________________________________ qooxdoo-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
