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 classes > > UploadForm: 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.html > > One 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 GmbH > > > > > > qooxdoo » Demo > > > > > > > > > > > > > Experimental 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, > getIframeHtmlContent > and getIframeXmlContent to get the content of the iframe > UploadFile fires a "changeValue" event after the selection thruogh the > OS fileselector is > completed > 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) > > ************************************************************************ > */ > > /* > ************************************************************************ > > #module(ui_io) > > ************************************************************************ > */ > > qx.OO.defineClass("qx.visionet.ui.io.UploadField", > qx.ui.layout.CanvasLayout, > function(vName, vText, vIcon, vIconHeight, vFlash) > { > qx.ui.layout.CanvasLayout.call(this); > this.set({height:"auto",height:null}); > > this._text = new qx.ui.form.TextField(); > this._text.set({readOnly:true,left:0,marginTop:3}); > this.add(this._text); > > this._button = new qx.visionet.ui.io.UploadButton(vName, vText, vIcon, > vIconHeight, vFlash); > this._button.setRight(0); > this.add(this._button); > > if(vName) { > this.setName(vName); > } > > this._value = ''; > > this._button.addEventListener("changeValue", function(e) { > var value = e.getData(); > this._text.setValue(value); > this.setValue(value); > },this); > > this.addEventListener(qx.constant.Event.APPEAR, function(e) { > this._text.setRight(this._button.getWidthValue()+4); > setTimeout(function(){ qx.ui.core.Widget.flushGlobalQueues(); },1); > }); > > > }); > > > /* > --------------------------------------------------------------------------- > PROPERTIES > --------------------------------------------------------------------------- > */ > > qx.OO.addProperty({ name : "name", type : qx.constant.Type.STRING }); > qx.OO.addProperty({ name : "value", type : qx.constant.Type.STRING, > defaultValue : qx.constant.Core.EMPTY }); > > > > /* > --------------------------------------------------------------------------- > MODIFIERS > --------------------------------------------------------------------------- > */ > > qx.Proto._modifyValue = function(propValue, propOldValue, propData) { > > this._button.setValue(propValue); > this._text.setValue(propValue); > > return (propValue == this._button.getValue()) ? true : false; > }; > > > qx.Proto._modifyName = function(propValue, propOldValue, propData) { > this._button.setName(propValue); > return true; > }; > > > > /* > --------------------------------------------------------------------------- > DISPOSER > --------------------------------------------------------------------------- > */ > > qx.Proto.dispose = function() > { > if (this.getDisposed()) { > return; > } > > this._button.dispose(); > this._button = null; > > this._text.dispose(); > this._text = 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: > * Dietrich Streifert (dietrich) > > ************************************************************************ > */ > > /* > ************************************************************************ > > #module(ui_io) > > ************************************************************************ > */ > > qx.OO.defineClass("qx.visionet.ui.io.UploadForm", > qx.ui.layout.CanvasLayout, > function(vName,vUrl) > { > qx.ui.layout.CanvasLayout.call(this); > this.set({height:22}); > > this._parameters = {}; > this._hidden = {}; > > if (qx.sys.Client.getInstance().isMshtml()) { > this.setTagName('<FORM enctype="multipart/form-data"></FORM>'); > } else { > this.setTagName("FORM"); > } > > this.setHtmlProperty('enctype','multipart/form-data'); > this.setStyleProperty('line-height','0'); > > this.setSelectable(false); > > if (typeof vName === qx.constant.Type.STRING) { > this.setName(vName); > } > if (typeof vUrl === qx.constant.Type.STRING) { > this.setUrl(vUrl); > } > > this.setMethod(qx.constant.Net.METHOD_POST); > > > var vUniqueId = (new Date).valueOf(); > var vFrameName = "frame_" + vUniqueId; > > if (qx.sys.Client.getInstance().isMshtml()) { > this._iframeNode = document.createElement('<iframe name="' + > vFrameName + '"></iframe>'); > } else { > this._iframeNode = document.createElement("iframe"); > } > > this._iframeNode.src = "javascript:void(0)"; > this._iframeNode.id = this._iframeNode.name = vFrameName; > > this._iframeNode.style.display = "none"; > > this.setTarget(vFrameName); > > document.body.appendChild(this._iframeNode); > > var o = this; > this._iframeNode.onload = function(e) { return o._onload(e); } > this._iframeNode.onreadystatechange = function(e) { return > o._onreadystatechange(e); } > }); > > > /* > --------------------------------------------------------------------------- > PROPERTIES > --------------------------------------------------------------------------- > */ > > > qx.OO.addProperty({ name : "name", type : qx.constant.Type.STRING, > defaultValue : qx.constant.Core.EMPTY }); > qx.OO.addProperty({ name : "url", type : qx.constant.Type.STRING, > defaultValue : qx.constant.Core.EMPTY }); > qx.OO.addProperty({ name : "method", type : qx.constant.Type.STRING, > possibleValues : [ qx.constant.Net.METHOD_GET, > qx.constant.Net.METHOD_POST ] }); > > qx.OO.addProperty({ name : "target", type : qx.constant.Type.STRING, > defaultValue : qx.constant.Core.EMPTY }); > > > /* > --------------------------------------------------------------------------- > UTILITIES > --------------------------------------------------------------------------- > */ > > qx.Proto.send = function(e) { > var form = this.getElement(); > if(form) { > this._addFormParameters(); > > form.target = this.getTarget(); > form.action = this.getUrl(); > form.method = this.getMethod(); > > // this.debug("target: " + form.target); > // this.debug("action: " + form.action); > // this.debug("method: " + form.method); > // this.debug("enctype: " + form.enctype); > > > form.submit(); > this._isSent = true; > this.dispatchEvent(new qx.event.type.Event(qx.constant.Event.SENDING), > true); > } > else { > throw new Error("Form element not created! Unable to call form > submit!"); > } > }; > > > qx.Proto._addFormParameters = function() { > var form = this.getElement(); > var hvalue; > var vParameters = this.getParameters(); > > for (var vId in vParameters) { > // this.debug('_addFormParameters name: ' + this._hidden[vId].name + > ', value: ' + this._hidden[vId].value); > form.appendChild(this._hidden[vId]); > } > }; > > > qx.Proto._createHiddenFormField = function(vName,vValue) { > var hvalue = document.createElement("input"); > hvalue.type = "hidden"; > hvalue.name = vName; > hvalue.value = vValue; > > // this.debug('_createHiddenFormField vName: ' + vName + ', vValue: ' + > vValue); > return hvalue; > }; > > > /* > --------------------------------------------------------------------------- > PARAMETERS > --------------------------------------------------------------------------- > */ > /*! > Add a parameter to the request. > > @param vId String identifier of the parameter to add. > @param vValue String Value of parameter. > */ > qx.Proto.setParameter = function(vId, vValue) { > // this.debug('setParameter vId: ' + vId + ', vValue: ' + vValue); > this._parameters[vId] = vValue; > if(this._hidden[vId] && this._hidden[vId].name) { > // this.debug('set old value'); > this._hidden[vId].value = vValue; > } > else { > // this.debug('created new hidden field'); > this._hidden[vId] = this._createHiddenFormField(vId, vValue); > } > }; > > /*! > Remove a parameter from the request. > > @param vId String identifier of the parameter to remove. > */ > qx.Proto.removeParameter = function(vId) { > delete this._parameters[vId]; > if(this._hidden[vId] && this._hidden[vId].parentNode) { > this._hidden[vId].parentNode.removeChild(this._hidden[vId]); > } > delete this._hidden[vId]; > }; > > /*! > Get a parameter in the request. > > @param vId String identifier of the parameter to get. > */ > qx.Proto.getParameter = function(vId) { > return this._parameters[vId] || null; > }; > > /*! > Returns an object containg all parameters for the request. > */ > qx.Proto.getParameters = function() { > return this._parameters; > }; > > > > /* > --------------------------------------------------------------------------- > FRAME UTILITIES > --------------------------------------------------------------------------- > */ > > qx.Proto.getIframeWindow = function() { > return qx.dom.DomIframe.getWindow(this._iframeNode); > }; > > qx.Proto.getIframeDocument = function() { > return qx.dom.DomIframe.getDocument(this._iframeNode); > }; > > qx.Proto.getIframeBody = function() { > return qx.dom.DomIframe.getBody(this._iframeNode); > }; > > qx.Proto.getIframeNode = function() { > return this._iframeNode; > }; > > > /* > --------------------------------------------------------------------------- > RESPONSE DATA SUPPORT > --------------------------------------------------------------------------- > */ > > qx.Proto.getIframeTextContent = function() { > var vBody = this.getIframeBody(); > > if (!vBody) { > return null; > } > > // Mshtml returns the content inside a PRE > // element if we use plain text > if (vBody.firstChild && (vBody.firstChild.tagName == "PRE" || > vBody.firstChild.tagName == "pre")) > { > return vBody.firstChild.innerHTML; > } > else > { > return vBody.innerHTML; > } > }; > > qx.Proto.getIframeHtmlContent = function() { > var vBody = this.getIframeBody(); > return vBody ? vBody.innerHTML : null; > }; > > qx.Proto.getIframeXmlContent = function() { > var responsetext = this.getIframeTextContent(); > > if(!responsetext || responsetext.length == 0) { > return null; > } > > var xmlContent = null; > var newText = responsetext.replace(/</g,"<"); > newText = newText.replace(/>/g, ">"); > > try { > xmlContent = (new DOMParser).parseFromString(newText, "text/xml"); > } > catch(ex) { }; > > return xmlContent; > }; > > /* > --------------------------------------------------------------------------- > EVENT HANDLER > --------------------------------------------------------------------------- > */ > > qx.Proto._onreadystatechange = function() { > if (this.getIframeNode().readyState == "complete" && this._isSent) { > this.dispatchEvent(new > qx.event.type.Event(qx.constant.Event.COMPLETED), true); > delete this._isSent; > } > }; > > qx.Proto._onload = function() { > if(this._isSent) { > this.dispatchEvent(new > qx.event.type.Event(qx.constant.Event.COMPLETED), true); > delete this._isSent; > } > }; > > > /* > --------------------------------------------------------------------------- > DISPOSER > --------------------------------------------------------------------------- > */ > > qx.Proto.dispose = function() > { > if (this.getDisposed()) { > return; > } > > document.body.removeChild(this._iframeNode); > this._iframeNode.onreadystatechange = null; > this._iframeNode.onload = null; > this._iframeNode = null; > > this._parameters = null; > > for (var vId in this._hidden) { > if(this._hidden[vId] && this._hidden[vId].parentNode) { > this._hidden[vId].parentNode.removeChild(this._hidden[vId]); > } > } > > this._hidden = null; > > qx.ui.layout.CanvasLayout.prototype.dispose.call(this); > }; > > > ------------------------------------------------------------------------- > Using Tomcat but need to do more? Need to support web services, security? > Get stuff done quickly with pre-integrated technology to make your job > easier > Download IBM WebSphere Application Server v.1.0.1 based on Apache Geronimo > http://sel.as-us.falkag.net/sel?cmd=lnk&kid=120709&bid=263057&dat=121642 > _______________________________________________ > qooxdoo-devel mailing list > [email protected] > https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel > > -- View this message in context: http://www.nabble.com/Experimental-file-upload-implementation-tf2630085.html#a7367699 Sent from the qooxdoo-devel mailing list archive at Nabble.com. ------------------------------------------------------------------------- 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
