]> git.argeo.org Git - lgpl/argeo-commons.git/blobdiff - eclipse/rap/org.eclipse.rwt.widgets.upload/src/org/eclipse/rwt/widgets/internal/resource/qxcontrib/UploadButton.js
Introduce file upload widget
[lgpl/argeo-commons.git] / eclipse / rap / org.eclipse.rwt.widgets.upload / src / org / eclipse / rwt / widgets / internal / resource / qxcontrib / UploadButton.js
diff --git a/eclipse/rap/org.eclipse.rwt.widgets.upload/src/org/eclipse/rwt/widgets/internal/resource/qxcontrib/UploadButton.js b/eclipse/rap/org.eclipse.rwt.widgets.upload/src/org/eclipse/rwt/widgets/internal/resource/qxcontrib/UploadButton.js
new file mode 100644 (file)
index 0000000..e9c70e4
--- /dev/null
@@ -0,0 +1,270 @@
+/* ************************************************************************
+
+   qooxdoo - the new era of web development
+
+   http://qooxdoo.org
+
+   Copyright:
+     2007 Visionet GmbH, http://www.visionet.de
+
+   License:
+     LGPL: http://www.gnu.org/licenses/lgpl.html
+     EPL: http://www.eclipse.org/org/documents/epl-v10.php
+     See the LICENSE file in the project's top-level directory for details.
+
+   Authors:
+     * Dietrich Streifert (level420)
+
+************************************************************************ */
+
+/* ************************************************************************
+
+#module(uploadwidget_ui_io)
+
+************************************************************************ */
+
+/**
+ * An upload button which allows selection of a file through the browser fileselector.
+ *
+ */
+qx.Class.define("uploadwidget.UploadButton",
+{
+  extend : qx.ui.form.Button,
+  
+  /*
+  *****************************************************************************
+     CONSTRUCTOR
+  *****************************************************************************
+  */
+
+  construct : function(name, text, icon, iconWidth, iconHeight, flash)
+  {
+    this.base(arguments, text, icon, iconWidth, iconHeight, flash);
+    // This state is needed for proper button CSS themeing
+    this.addState( "rwt_PUSH" );
+    this.setAppearance( "button" );
+    if(name) {
+      this.setName(name);
+    }
+
+  },
+  
+
+  /*
+  *****************************************************************************
+     PROPERTIES
+  *****************************************************************************
+  */
+
+  properties :
+  {
+    /**
+     * The name which is assigned to the form
+     */
+    name :
+    {
+      check : "String",
+      init : "",
+      apply : "_applyName"
+    },
+
+    /**
+     * The value which is assigned to the form
+     */
+    value :
+    {
+      check : "String",
+      init : "",
+      apply : "_applyValue",
+      event : "changeValue"
+    }
+  }, 
+  
+  /*
+  *****************************************************************************
+     MEMBERS
+  *****************************************************************************
+  */
+
+  members :
+  {
+    /*
+    ---------------------------------------------------------------------------
+      MODIFIERS
+    ---------------------------------------------------------------------------
+    */
+
+    /**
+     * after the button element is present create the input file tag
+     * 
+     * @param value {Object} new dom element
+     * @param old {Object} old one
+     * @type member
+     * @return {void}
+     */
+    _applyElement : function (value, old)
+    {
+      this.base(arguments, value, old);
+      this._createInputFileTag(value);
+    },
+
+
+    /**
+     * Modifies the value property of the hidden input type=file element.
+     * Only an empty string is accepted for clearing out the value of the
+     * selected file.
+     * 
+     * As a special case for IE the hidden input element is recreated because
+     * setting the value is generally not allowed in IE.
+     *
+     * @type member
+     * @param value {var} Current value
+     * @param old {var} Previous value
+     */
+    _applyValue : function(value, old) {
+      if(this._valueInputOnChange) {
+        delete this._valueInputOnChange;
+      }
+      else {
+        if (!value || value == '') {
+          if (qx.core.Variant.isSet("qx.client", "mshtml")) {
+            this._createInputFileTag(this.getElement());
+          }
+          else {
+            this._input.value = '';
+          }
+        }
+        else {
+          throw new Error("Unable to set value to non null or non empty!");
+        }
+      }
+    },
+
+
+    /**
+     * Modifies the name property of the hidden input type=file element.
+     *
+     * @type member
+     * @param value {var} Current value
+     * @param old {var} Previous value
+     */
+    _applyName : function(value, old) {
+      if(this._input) {
+        this._input.name = propValue;
+      }
+    },
+
+
+    /**
+     * Apply the enabled property.
+     *
+     * @type member
+     * @param value {var} Current value
+     * @param old {var} Previous value
+     */
+    _applyEnabled : function(value, old)
+    {
+      if (this._input) {
+        this._input.disabled = value===false;
+      }
+
+      return this.base(arguments, value, old);
+    },
+
+    /*
+    ---------------------------------------------------------------------------
+      EVENT-HANDLER
+    ---------------------------------------------------------------------------
+    */
+    
+    /**
+     * Create an input type=file element, and set the onchange event handler which
+     * fires if the user selected a file with the fileselector.
+     *
+     * @type member
+     * @param e {Event|null} appear event
+     * @return {void}
+     */
+    _createInputFileTag : function(elem)
+    {
+      if(this._input)
+      {
+        this._input.name += "_tmp_";
+        if (this._input.parentNode) {
+               this._input.parentNode.removeChild(this._input);
+        }
+        this._input = null;
+      }
+
+      var input  = this._input = document.createElement("input");
+      input.type = "file";
+      input.name = this.getName();
+      input.size = "1"; // make the text area as small as possible
+      input.style.position  = "absolute";
+      input.style.top          = "-2px"; // make sure to cover the whole area
+      input.style.left      = "-100px";
+      input.style.height    = "27px";
+      input.style.fontSize  = "35px"; // previous value 60 was to small for some systems (depends on used font-family)
+      var clipRight = 300 + this.getWidthValue(); //use variable to avoid string concatenation instead of adding
+      input.style.clip      = "rect(auto, " + clipRight + "px, auto, 100px)";
+      input.style.zIndex    = "100";
+      input.style.cursor    = "pointer";
+      input.style.filter    = "alpha(opacity=0)";
+      input.style.opacity   = "0";
+      input.style.MozOutlinestyle   = "none";
+      input.style.hidefocus         = "true";
+      input.disabled        = this.getEnabled() === false;
+
+      var _this = this;
+      input.onchange = function(ev) { return _this._onChange(ev); };
+
+      elem.appendChild(input);
+    },
+
+
+    /**
+     * Handle the onchange event of the hidden input type=file element
+     *
+     * @type member
+     * @param e {Event} TODOC
+     * @return {void}
+     */
+    _onChange : function(e) {
+      // IE8 returns sth like "C:\fakepath\..." which should not be displayed.
+      // Cut off everyhting before the "\", like Firefox does automatically, to have
+      // an identical behaviour in all browsers.
+      var inputStr = this._input.value;
+      if (inputStr) {
+        if (inputStr.indexOf("\\") != -1) {
+            inputStr = inputStr.substr(inputStr.lastIndexOf("\\") + 1);
+        } else if (inputStr.indexOf("/") != -1) {
+            inputStr = inputStr.substr(inputStr.lastIndexOf("/") + 1);
+        }            
+        
+        this._valueInputOnChange = true;
+           this.setValue(inputStr);
+      }
+    }
+
+  },
+
+
+  /*
+  *****************************************************************************
+     DESTRUCTOR
+  *****************************************************************************
+  */
+
+  destruct : function()
+  {
+    if(this._input) {
+      if (this._input.parentNode) {
+         this._input.parentNode.removeChild(this._input);
+      }          
+      this._input.onchange = null;
+      this._input = null;
+    } 
+  }
+
+});