replace the "File" button with a fileuploadbutton

deluge/ui/web/css/deluge.css

@@ -95,6 +95,15 @@ input {
 	background: url('/icons/add.png') no-repeat 2px;
 }
 
+.x-deluge-add-file {
+	background: url('/icons/add_file.png');
+	padding-left: 20px;
+}
+
+.x-form-file-wrap, .x-form-file {
+	cursor: pointer;
+}
+
 /* Add Url Window */
 .x-deluge-add-url-window-icon {
 	background: url('/icons/add_url.png') no-repeat 2px;

deluge/ui/web/css/ext-all.css

@@ -48,4 +48,32 @@ html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,bloc
     overflow:hidden;
     border-left:1px solid #eee;
     border-right:1px solid #d0d0d0;
+}
+
+/*
+ * FileUploadField component styles
+ */
+.x-form-file-wrap {
+    position: relative;
+    height: 22px;
+}
+.x-form-file-wrap .x-form-file {
+	position: absolute;
+	right: 0;
+	-moz-opacity: 0;
+	filter:alpha(opacity: 0);
+	opacity: 0;
+	z-index: 2;
+    height: 22px;
+}
+.x-form-file-wrap .x-form-file-btn {
+	position: absolute;
+	right: 0;
+	z-index: 1;
+}
+.x-form-file-wrap .x-form-file-text {
+    position: absolute;
+    left: 0;
+    z-index: 3;
+    color: #777;
 }

deluge/ui/web/js/deluge-add.js

@@ -151,12 +151,15 @@ Deluge.Add.Grid = new Ext.grid.GridPanel({
 	margins: '5 5 5 5',
 	bbar: new Ext.Toolbar({
 		items: [
-			{
+			new Ext.form.FileUploadField({
 				id: 'file',
-				cls: 'x-btn-text-icon',
-				text: _('File'),
-				icon: '/icons/add_file.png'
-			}, {
+				buttonOnly: true,
+				buttonCfg: {
+					cls: 'x-btn-text-icon',
+					icon: '/icons/add_file.png',
+					text: _('File')
+				}
+			}), {
 				id: 'url',
 				cls: 'x-btn-text-icon',
 				text: _('Url'),

deluge/ui/web/js/deluge-ext.js

@@ -137,4 +137,124 @@ Ext.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
         this.anchor = cs[3];
         this.textNode = cs[3].firstChild;
     }
-});
+});
+
+Ext.form.FileUploadField = Ext.extend(Ext.form.TextField,  {
+    /**
+     * @cfg {String} buttonText The button text to display on the upload button (defaults to
+     * 'Browse...').  Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.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 TextField members will still be available.
+     */
+    buttonOnly: false,
+    /**
+     * @cfg {Number} buttonOffset 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.
+     */
+    buttonOffset: 3,
+    /**
+     * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.
+     */
+
+    // private
+    readOnly: true,
+    
+    /**
+     * @hide 
+     * @method autoSize
+     */
+    autoSize: Ext.emptyFn,
+    
+    // private
+    initComponent: function(){
+        Ext.form.FileUploadField.superclass.initComponent.call(this);
+        
+        this.addEvents(
+            /**
+             * @event fileselected
+             * 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.form.FileUploadField} this
+             * @param {String} value The file value returned by the underlying file input field
+             */
+            'fileselected'
+        );
+    },
+    
+    // private
+    onRender : function(ct, position){
+        Ext.form.FileUploadField.superclass.onRender.call(this, ct, position);
+        
+        this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});
+        this.el.addClass('x-form-file-text');
+        this.el.dom.removeAttribute('name');
+        
+        this.fileInput = this.wrap.createChild({
+            id: this.getFileInputId(),
+            name: this.name||this.getId(),
+            cls: 'x-form-file',
+            tag: 'input', 
+            type: 'file',
+            size: 1
+        });
+        
+        var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
+            text: this.buttonText
+        });
+        this.button = new Ext.Button(Ext.apply(btnCfg, {
+            renderTo: this.wrap
+        }));
+        
+        if(this.buttonOnly){
+            this.el.hide();
+            this.wrap.setWidth(this.button.getEl().getWidth());
+        }
+        
+        this.fileInput.on('change', function(){
+            var v = this.fileInput.dom.value;
+            this.setValue(v);
+            this.fireEvent('fileselected', this, v);
+        }, this);
+    },
+    
+    // private
+    getFileInputId: function(){
+        return this.id+'-file';
+    },
+    
+    // private
+    onResize : function(w, h){
+        Ext.form.FileUploadField.superclass.onResize.call(this, w, h);
+        
+        this.wrap.setWidth(w);
+        
+        if(!this.buttonOnly){
+            var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
+            this.el.setWidth(w);
+        }
+    },
+    
+    // private
+    preFocus : Ext.emptyFn,
+    
+    // private
+    getResizeEl : function(){
+        return this.wrap;
+    },
+
+    // private
+    getPositionEl : function(){
+        return this.wrap;
+    },
+
+    // private
+    alignErrorIcon : function(){
+        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
+    }
+    
+});
+Ext.reg('fileuploadfield', Ext.form.FileUploadField);