add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / form / field / File.js

/**\r
 * A file upload field which has custom styling and allows control over the button text and other\r
 * features of {@link Ext.form.field.Text text fields} like {@link Ext.form.field.Text#emptyText empty text}.\r
 * It uses a hidden file input element behind the scenes to allow user selection of a file and to\r
 * perform the actual upload during {@link Ext.form.Basic#submit form submit}.\r
 *\r
 * Because there is no secure cross-browser way to programmatically set the value of a file input,\r
 * the standard Field `setValue` method is not implemented. The `{@link #getValue}` method will return\r
 * a value that is browser-dependent; some have just the file name, some have a full path, some use\r
 * a fake path.\r
 *\r
 * **IMPORTANT:** File uploads are not performed using normal 'Ajax' techniques; see the description for\r
 * {@link Ext.form.Basic#hasUpload} for details.\r
 *\r
 * # Example Usage\r
 *\r
 *     @example\r
 *     Ext.create('Ext.form.Panel', {\r
 *         title: 'Upload a Photo',\r
 *         width: 400,\r
 *         bodyPadding: 10,\r
 *         frame: true,\r
 *         renderTo: Ext.getBody(),\r
 *         items: [{\r
 *             xtype: 'filefield',\r
 *             name: 'photo',\r
 *             fieldLabel: 'Photo',\r
 *             labelWidth: 50,\r
 *             msgTarget: 'side',\r
 *             allowBlank: false,\r
 *             anchor: '100%',\r
 *             buttonText: 'Select Photo...'\r
 *         }],\r
 *\r
 *         buttons: [{\r
 *             text: 'Upload',\r
 *             handler: function() {\r
 *                 var form = this.up('form').getForm();\r
 *                 if(form.isValid()){\r
 *                     form.submit({\r
 *                         url: 'photo-upload.php',\r
 *                         waitMsg: 'Uploading your photo...',\r
 *                         success: function(fp, o) {\r
 *                             Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');\r
 *                         }\r
 *                     });\r
 *                 }\r
 *             }\r
 *         }]\r
 *     });\r
 */\r
Ext.define('Ext.form.field.File', {\r
    extend: 'Ext.form.field.Text',\r
    alias: ['widget.filefield', 'widget.fileuploadfield'],\r
    alternateClassName: ['Ext.form.FileUploadField', 'Ext.ux.form.FileUploadField', 'Ext.form.File'],\r
    requires: [\r
        'Ext.form.field.FileButton',\r
        'Ext.form.trigger.Component'\r
    ],\r
\r
    /**\r
     * @cfg {String} emptyText\r
     * Overridden to undefined as {@link #emptyText} is not supported with {@link #inputType inputType}:'file' and should be avoided.\r
     * The default text to place into an empty field.\r
     */     \r
    emptyText: undefined,\r
    \r
    needArrowKeys: false,\r
\r
    triggers: {\r
        filebutton: {\r
            type: 'component',\r
            hideOnReadOnly: false,\r
            // Most form fields prevent the default browser action on mousedown of the trigger.\r
            // This is intended to prevent the field's input element from losing focus when\r
            // the trigger is clicked.  File fields disable this behavior because:\r
            // 1. The input element does not receive focus when the field is focused. The button does.\r
            // 2. Preventing the default action of touchstart (translated from mousedown\r
            // on mobile browsers) prevents the browser's file dialog from opening.\r
            preventMouseDown: false\r
        }\r
    },\r
\r
    //<locale>\r
    /**\r
     * @cfg {String} buttonText\r
     * The button text to display on the upload button. Note that if you supply a value for\r
     * {@link #buttonConfig}, the buttonConfig.text value will be used instead if available.\r
     */\r
    buttonText: 'Browse...',\r
    //</locale>\r
\r
    /**\r
     * @cfg {Boolean} buttonOnly\r
     * True to display the file upload field as a button with no visible text field. If true, all\r
     * inherited Text members will still be available.\r
     */\r
    buttonOnly: false,\r
\r
    /**\r
     * @cfg {Number} buttonMargin\r
     * The number of pixels of space reserved between the button and the text field. Note that this only\r
     * applies if {@link #buttonOnly} = false.\r
     */\r
    buttonMargin: 3,\r
    \r
    /**\r
     * @cfg {Boolean} clearOnSubmit\r
     * True to clear the selected file value when the form this field belongs to\r
     * is submitted to the server.\r
     */\r
    clearOnSubmit: true,\r
\r
    /**\r
     * @cfg {Object} buttonConfig\r
     * Specify optional custom button {@link Ext.button.Button} config (eg. iconCls, text) for the upload button\r
     */\r
\r
    /**\r
     * @event change\r
     * Fires when the underlying file input field's value has changed from the user selecting a new file from the system\r
     * file selection dialog.\r
     * @param {Ext.ux.form.FileUploadField} this\r
     * @param {String} value The file value returned by the underlying file input field\r
     */\r
\r
    /**\r
     * @property {Ext.dom.Element} fileInputEl\r
     * A reference to the invisible file input element created for this upload field. Only populated after this\r
     * component is rendered.\r
     */\r
\r
    /**\r
     * @property {Ext.button.Button} button\r
     * A reference to the trigger Button component created for this upload field. Only populated after this component is\r
     * rendered.\r
     */\r
\r
\r
    /**\r
     * @private\r
     */\r
    extraFieldBodyCls: Ext.baseCSSPrefix + 'form-file-wrap',\r
\r
    /**\r
     * @private\r
     */\r
    inputCls: Ext.baseCSSPrefix + 'form-text-file',\r
\r
    /**\r
     * @cfg {Boolean} [readOnly=true]\r
     * Unlike with other form fields, the readOnly config defaults to true in File field.\r
     */\r
    readOnly: true,\r
\r
    /**\r
     * @cfg {Boolean} editable\r
     * @inheritdoc\r
     */\r
    editable: false,\r
\r
    submitValue: false,\r
\r
    /**\r
     * Do not show hand pointer over text field since file choose dialog is only shown when clicking in the button\r
     * @private\r
     */\r
    triggerNoEditCls: '',\r
\r
    /**\r
     * @private\r
     * Extract the file element, button outer element, and button active element.\r
     */\r
    childEls: ['browseButtonWrap'],\r
\r
    /**\r
     * @private\r
     */\r
    applyTriggers: function(triggers) {\r
        var me = this,\r
            triggerCfg = (triggers || {}).filebutton;\r
\r
        if (triggerCfg) {\r
            triggerCfg.component = Ext.apply({\r
                xtype: 'filebutton',\r
                ownerCt: me,\r
                id: me.id + '-button',\r
                ui: me.ui,\r
                disabled: me.disabled,\r
                text: me.buttonText,\r
                style: me.buttonOnly ? '' : me.getButtonMarginProp() + me.buttonMargin + 'px',\r
                inputName: me.getName(),\r
                listeners: {\r
                    scope: me,\r
                    change: me.onFileChange\r
                }\r
            }, me.buttonConfig);\r
\r
            return me.callParent([triggers]);\r
        }\r
        // <debug>\r
        else {\r
            Ext.raise(me.$className + ' requires a valid trigger config containing "filebutton" specification');\r
        }\r
        // </debug>\r
    },\r
    \r
    getSubTplData: function(fieldData) {\r
        var data = this.callParent([fieldData]);\r
        \r
        // Input field itself should not be focusable since it's always decorative;\r
        // however the input element is naturally focusable (and tabbable) so we have to\r
        // deactivate it by setting its tabIndex to -1.\r
        data.tabIdx = -1;\r
        \r
        return data;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    onRender: function() {\r
        var me = this,\r
            inputEl, button, buttonEl, trigger;\r
\r
        me.callParent(arguments);\r
\r
        inputEl = me.inputEl;\r
        //name goes on the fileInput, not the text input\r
        inputEl.dom.name = ''; \r
        \r
        // Some browsers will show a blinking cursor in the field, even if it's readonly. If we do happen\r
        // to receive focus, forward it on to our focusEl. Also note that in IE, the file input is treated as\r
        // 2 elements for tabbing purposes (the text, then the button). So as you tab through, it will take 2\r
        // tabs to get to the next field. As far as I know there's no way around this in any kind of reasonable way.\r
        inputEl.on('focus', me.onInputFocus, me);\r
        inputEl.on('mousedown', me.onInputMouseDown, me);\r
\r
        trigger = me.getTrigger('filebutton');\r
        button = me.button = trigger.component;\r
        me.fileInputEl = button.fileInputEl;\r
        buttonEl = button.el;\r
\r
        if (me.buttonOnly) {\r
            me.inputWrap.setDisplayed(false);\r
            me.shrinkWrap = 3;\r
        }\r
\r
        // Ensure the trigger element is sized correctly upon render\r
        trigger.el.setWidth(buttonEl.getWidth() + buttonEl.getMargin('lr'));\r
        if (Ext.isIE) {\r
            me.button.getEl().repaint();\r
        }\r
    },\r
\r
    /**\r
     * Gets the markup to be inserted into the subTplMarkup.\r
     */\r
    getTriggerMarkup: function() {\r
        return '<td id="' + this.id + '-browseButtonWrap" data-ref="browseButtonWrap" role="presentation"></td>';\r
    },\r
\r
    /**\r
     * @private\r
     * Event handler fired when the user selects a file.\r
     */\r
    onFileChange: function(button, e, value) {\r
        this.duringFileSelect = true;\r
        Ext.form.field.File.superclass.setValue.call(this, value);\r
        delete this.duringFileSelect;\r
    },\r
    \r
    didValueChange: function(){\r
        // In the case of the file field, the change event will only ever fire \r
        // if the value actually changes, so we always want to fire the change event\r
        // This affects Chrome specifically, because hitting the cancel button will\r
        // reset the file upload.\r
        return !!this.duringFileSelect;\r
    },\r
\r
    /**\r
     * @method setEmptyText\r
     * @hide\r
     */\r
    setEmptyText: Ext.emptyFn,\r
\r
    /**\r
     * @method setValue\r
     * @hide\r
     */\r
    setValue: Ext.emptyFn,\r
\r
    reset : function(){\r
        var me = this,\r
            clear = me.clearOnSubmit;\r
        if (me.rendered) {\r
            me.button.reset(clear);\r
            me.fileInputEl = me.button.fileInputEl;\r
            if (clear) {\r
                me.inputEl.dom.value = '';\r
                // Reset the underlying value if we're clearing it\r
                Ext.form.field.File.superclass.setValue.call(this, null);\r
            }\r
        }\r
        me.callParent();\r
    },\r
    \r
    onShow: function(){\r
        this.callParent();\r
        // If we started out hidden, the button may have a messed up layout\r
        // since we don't act like a container\r
        this.button.updateLayout();    \r
    },\r
\r
    onDisable: function(){\r
        this.callParent();\r
        this.button.disable();\r
    },\r
\r
    onEnable: function(){\r
        this.callParent();\r
        this.button.enable();\r
    },\r
\r
    /**\r
     * @method\r
     * @inheritdoc\r
     */\r
    isFileUpload: Ext.returnTrue,\r
\r
    extractFileInput: function() {\r
        var me = this,\r
            fileInput;\r
            \r
        if (me.rendered) {\r
            fileInput = me.button.fileInputEl.dom;\r
            me.reset();\r
        } else {\r
            // Create a fake empty field here so it will still be submitted.\r
            // All other unrendered fields provide a value.\r
            fileInput = document.createElement('input');\r
            fileInput.type = 'file';\r
            fileInput.className = Ext.baseCSSPrefix + 'hidden-display';\r
            fileInput.name = me.getName();\r
        }\r
        return fileInput;\r
    },\r
    \r
    restoreInput: function(el) {\r
        // If we're not rendered we don't need to do anything, it will be created\r
        // when we get flushed to the DOM.\r
        if (this.rendered) {\r
            var button = this.button;\r
            button.restoreInput(el);\r
            this.fileInputEl = button.fileInputEl;\r
        }\r
    },\r
\r
    onDestroy: function(){\r
        this.fileInputEl = this.button = null;\r
        this.callParent();\r
    },\r
\r
    getButtonMarginProp: function() {\r
        return 'margin-left:';\r
    },\r
    \r
    onInputFocus: function(e) {\r
        this.focus();\r
        \r
        // Switching focus from read only input element to file input\r
        // results in incorrect positioning of the file input.\r
        // Adding and removing position: relative helps to fix that.\r
        // See https://sencha.jira.com/browse/EXTJS-18933\r
        if (Ext.isIE9m) {\r
            this.fileInputEl.addCls(Ext.baseCSSPrefix + 'position-relative');\r
            this.fileInputEl.removeCls(Ext.baseCSSPrefix + 'position-relative');\r
        }\r
    },\r
    \r
    onInputMouseDown: function(e) {\r
        // Some browsers will show the cursor even if the input is read only,\r
        // which will be visible in the short instant between inputEl focusing\r
        // and subsequent focus jump to the FileButton. Preventing inputEl from\r
        // focusing eliminates that flicker.\r
        e.preventDefault();\r
        \r
        this.focus();\r
    },\r
    \r
    privates: {\r
        getFocusEl: function() {\r
            return this.button;\r
        },\r
        \r
        getFocusClsEl: Ext.privateFn\r
    }\r
});\r