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)
****************
