/**
+ * @class Ext.form.field.File
+ * @extends Ext.form.field.Text
+
+A file upload field which has custom styling and allows control over the button text and other
+features of {@link Ext.form.field.Text text fields} like {@link Ext.form.field.Text#emptyText empty text}.
+It uses a hidden file input element behind the scenes to allow user selection of a file and to
+perform the actual upload during {@link Ext.form.Basic#submit form submit}.
+
+Because there is no secure cross-browser way to programmatically set the value of a file input,
+the standard Field `setValue` method is not implemented. The `{@link #getValue}` method will return
+a value that is browser-dependent; some have just the file name, some have a full path, some use
+a fake path.
+{@img Ext.form.File/Ext.form.File.png Ext.form.File component}
+#Example Usage:#
+
+ Ext.create('Ext.form.Panel', {
+ title: 'Upload a Photo',
+ width: 400,
+ bodyPadding: 10,
+ frame: true,
+ renderTo: Ext.getBody(),
+ items: [{
+ xtype: 'filefield',
+ name: 'photo',
+ fieldLabel: 'Photo',
+ labelWidth: 50,
+ msgTarget: 'side',
+ allowBlank: false,
+ anchor: '100%',
+ buttonText: 'Select Photo...'
+ }],
+
+ buttons: [{
+ text: 'Upload',
+ handler: function() {
+ var form = this.up('form').getForm();
+ if(form.isValid()){
+ form.submit({
+ url: 'photo-upload.php',
+ waitMsg: 'Uploading your photo...',
+ success: function(fp, o) {
+ Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
+ }
+ });
+ }
+ }
+ }]
+ });
+
+ * @constructor
+ * Create a new File field
+ * @param {Object} config Configuration options
+ * @xtype filefield
+ * @markdown
+ * @docauthor Jason Johnston <jason@sencha.com>
+ */
+Ext.define("Ext.form.field.File", {
+ extend: 'Ext.form.field.Text',
+ alias: ['widget.filefield', 'widget.fileuploadfield'],
+ alternateClassName: ['Ext.form.FileUploadField', 'Ext.ux.form.FileUploadField', 'Ext.form.File'],
+ uses: ['Ext.button.Button', 'Ext.layout.component.field.File'],
+
+ /**
+ * @cfg {String} buttonText The button text to display on the upload button (defaults to
+ * 'Browse...'). Note that if you supply a value for {@link #buttonConfig}, the buttonConfig.text
+ * value will be used instead if available.
+ */
+ buttonText: 'Browse...',
+
+ /**
+ * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible
+ * text field (defaults to false). If true, all inherited Text members will still be available.
+ */
+ buttonOnly: false,
+
+ /**
+ * @cfg {Number} buttonMargin The number of pixels of space reserved between the button and the text field
+ * (defaults to 3). Note that this only applies if {@link #buttonOnly} = false.
+ */
+ buttonMargin: 3,
+
+ /**
+ * @cfg {Object} buttonConfig A standard {@link Ext.button.Button} config object.
+ */
+
+ /**
+ * @event change
+ * Fires when the underlying file input field's value has changed from the user
+ * selecting a new file from the system file selection dialog.
+ * @param {Ext.ux.form.FileUploadField} this
+ * @param {String} value The file value returned by the underlying file input field
+ */
+
+ /**
+ * @property fileInputEl
+ * @type {Ext.core.Element}
+ * A reference to the invisible file input element created for this upload field. Only
+ * populated after this component is rendered.
+ */
+
+ /**
+ * @property button
+ * @type {Ext.button.Button}
+ * A reference to the trigger Button component created for this upload field. Only
+ * populated after this component is rendered.
+ */
+
+ /**
+ * @cfg {String} fieldBodyCls
+ * An extra CSS class to be applied to the body content element in addition to {@link #fieldBodyCls}.
+ * Defaults to 'x-form-file-wrap' for file upload field.
+ */
+ fieldBodyCls: Ext.baseCSSPrefix + 'form-file-wrap',
+
+
+ // private
+ readOnly: true,
+ componentLayout: 'filefield',
+
+ // private
+ onRender: function() {
+ var me = this,
+ inputEl;
+
+ me.callParent(arguments);
+
+ me.createButton();
+ me.createFileInput();
+
+ // we don't create the file/button til after onRender, the initial disable() is
+ // called in the onRender of the component.
+ if (me.disabled) {
+ me.disableItems();
+ }
+
+ inputEl = me.inputEl;
+ inputEl.dom.removeAttribute('name'); //name goes on the fileInput, not the text input
+ if (me.buttonOnly) {
+ inputEl.setDisplayed(false);
+ }
+ },
+
+ /**
+ * @private
+ * Creates the custom trigger Button component. The fileInput will be inserted into this.
+ */
+ createButton: function() {
+ var me = this;
+ me.button = Ext.widget('button', Ext.apply({
+ renderTo: me.bodyEl,
+ text: me.buttonText,
+ cls: Ext.baseCSSPrefix + 'form-file-btn',
+ preventDefault: false,
+ ownerCt: me,
+ style: me.buttonOnly ? '' : 'margin-left:' + me.buttonMargin + 'px'
+ }, me.buttonConfig));
+ },
+
+ /**
+ * @private
+ * Creates the file input element. It is inserted into the trigger button component, made
+ * invisible, and floated on top of the button's other content so that it will receive the
+ * button's clicks.
+ */
+ createFileInput : function() {
+ var me = this;
+ me.fileInputEl = me.button.el.createChild({
+ name: me.getName(),
+ cls: Ext.baseCSSPrefix + 'form-file-input',
+ tag: 'input',
+ type: 'file',
+ size: 1
+ }).on('change', me.onFileChange, me);
+ },
+
+ /**
+ * @private Event handler fired when the user selects a file.
+ */
+ onFileChange: function() {
+ this.lastValue = null; // force change event to get fired even if the user selects a file with the same name
+ Ext.form.field.File.superclass.setValue.call(this, this.fileInputEl.dom.value);
+ },
+
+ /**
+ * Overridden to do nothing
+ * @hide
+ */
+ setValue: Ext.emptyFn,
+
+ reset : function(){
+ this.fileInputEl.remove();
+ this.createFileInput();
+ this.callParent();
+ },
+
+ onDisable: function(){
+ this.callParent();
+ this.disableItems();
+ },
+
+ disableItems: function(){
+ var file = this.fileInputEl,
+ button = this.button;
+
+ if (file) {
+ file.dom.disabled = true;
+ }
+ if (button) {
+ button.disable();
+ }
+ },
+
+ onEnable: function(){
+ var me = this;
+ me.callParent();
+ me.fileInputEl.dom.disabled = false;
+ me.button.enable();
+ },
+
+ isFileUpload: function() {
+ return true;
+ },
+
+ extractFileInput: function() {
+ var fileInput = this.fileInputEl.dom;
+ this.reset();
+ return fileInput;
+ },
+
+ onDestroy: function(){
+ Ext.destroyMembers(this, 'fileInputEl', 'button');
+ this.callParent();
+ }
+
+
+});
+