Question

This code (linke to playground: http://tinyurl.com/6ed9dyv)

var label = new qx.ui.basic.Label('<input type="file" id="files" name="files[]"/>').set({width: 250, rich:true, wrap:true});

var doc = this.getRoot();
doc.setLayout(new qx.ui.layout.VBox(10));

doc.add(label);

var button1 = new qx.ui.form.Button("Test");
doc.add(button1);

button1.addListener("execute", function(e) {
  var obj = document.getElementById('files');
  if (obj)
    alert(obj.files.length);
});

doesn’t work for me. obj.files is always undefined. Strangely it does work in an application with multiple tabs when I switch to another tab and then back to the one containing this code.

Answer 1

I think the problem is that you are adding HTML code in a way it is not thought. I think the qx queue does some stuff which doesn’t work like your example shows. I done a small example to show how it can be done with a own widget:

qx.Class.define("my.Upload",
{
  extend : qx.ui.core.Widget,

  members :
  {
    _createContentElement : function()
    {
      return new qx.html.Element(
        "input",
        {
          overflowX: "hidden",
          overflowY: "hidden"
        },
        {
          type: "file"
        }
      );
    }, 

    getFiles : function() {
      return this.getContentElement().getDomElement().files;
    }
  }
});

var upload = new my.Upload();

var doc = this.getRoot();
doc.setLayout(new qx.ui.layout.VBox(10));

doc.add(upload);

var button1 = new qx.ui.form.Button("Test");
doc.add(button1);

button1.addListener("execute", function(e) {
  alert(upload.getFiles().length);
});

Here a link to a running playground example:
http://tinyurl.com/6xwxfq8