source: Dev/trunk/src/client/dojox/form/FileInput.js

define([
        "dojo/_base/declare",
        "dojo/_base/kernel",
        "dojo/_base/fx",
        "dojo/dom-attr",
        "dojo/dom-class",
        "dojo/text!./resources/FileInput.html",
        "dijit/form/_FormWidget",
        "dijit/_Templated"
],
function(declare, kernel, fx, domAttr, domClass, template, FormWidget, Templated){
kernel.experimental("dojox.form.FileInput");

return declare("dojox.form.FileInput", FormWidget,
        {
        // summary:
        //              A styled input type="file"
        //
        // description:
        //              A input type="file" form widget, with a button for uploading to be styled via css,
        //              a cancel button to clear selection, and FormWidget mixin to provide standard dijit.form.Form
        //              support (FIXME: maybe not fully implemented)

        // label: String
        //              the title text of the "Browse" button
        label: "Browse ...",

        // cancelText: String
        //              the title of the "Cancel" button
        cancelText: "Cancel",

        // name: String
        //              ugh, this should be pulled from this.domNode
        name: "uploadFile",

        templateString: template,

        startup: function(){
                // summary:
                //              listen for changes on our real file input
                this._listener = this.connect(this.fileInput,"onchange","_matchValue");
                this._keyListener = this.connect(this.fileInput,"onkeyup","_matchValue");
        },

        //get rid of the this.connect in _FormWidget.postCreate to allow IE to show
        //the file picker dialog properly
        postCreate: function(){},

        _matchValue: function(){
                // summary:
                //              set the content of the upper input based on the semi-hidden file input
                this.inputNode.value = this.fileInput.value;
                if(this.inputNode.value){
                        this.cancelNode.style.visibility = "visible";
                        fx.fadeIn({ node: this.cancelNode, duration:275 }).play();
                }
        },

        setLabel: function(/*String*/ label, /*String?*/ cssClass){
                // summary:
                //              method to allow use to change button label
                this.titleNode.innerHTML = label;
        },

        reset: function(/*Event*/ e){
                // summary:
                //              on click of cancel button, since we can't clear the input because of
                //              security reasons, we destroy it, and add a new one in it's place.
                this.disconnect(this._listener);
                this.disconnect(this._keyListener);
                if(this.fileInput){
                        this.domNode.removeChild(this.fileInput);
                }
                fx.fadeOut({ node: this.cancelNode, duration:275 }).play();

                // should we use cloneNode()? can we?
                this.fileInput = document.createElement('input');
                // domAttr.set(this.fileInput,{
                //              "type":"file", "id":this.id, "name": this.name
                //});
                this.fileInput.setAttribute("type","file");
                this.fileInput.setAttribute("id", this.id);
                this.fileInput.setAttribute("name", this.name);
                domClass.add(this.fileInput,"dijitFileInputReal");
                this.domNode.appendChild(this.fileInput);

                this._keyListener = this.connect(this.fileInput, "onkeyup", "_matchValue");
                this._listener = this.connect(this.fileInput, "onchange", "_matchValue");
                this.inputNode.value = "";
        }

});

});