[CLOSED] Problem with Button Only FileUploadField

  1. #1

    [CLOSED] Problem with Button Only FileUploadField

    Dear Support,

    I have encountered problem when using the FileUploadField, the upload window would not prompt when the leftmost part of the button is pressed (e.g. the icon). However, the button works properly when the Button Text is short (e.g. Upload/Browse).

    <ext:FileUploadField ID="fileADIExcel" runat="server" ButtonOnly="true" Icon="Attach" LabelWidth="120" ButtonText="Press to select file to upload" ButtonOffset="20" 
                                        Hidden="false" HideLabel="true">
                                        <DirectEvents>
                                            <FileSelected OnEvent="UploadClick" Before="if(!checkExtension(value)) { Ext.Msg.alert('Warning','You had submitted a <b>Wrong</b> file format!<br><br>Please submit a <b>.xls</b> file!'); return false; };"
                                                Failure="Ext.Msg.show({ 
                                                            title   : 'Error', 
                                                            msg     : 'Upload Failure!', 
                                                            minWidth: 200, 
                                                            modal   : true, 
                                                            icon    : Ext.Msg.ERROR, 
                                                            buttons : Ext.Msg.OK 
                                                        });">
                                                <ExtraParams>
                                                    <ext:Parameter Name="Values" Value="Ext.encode(#{HAStaffListGrid}.getRowsValues({selectedOnly : true}))"
                                                        Mode="Raw" />
                                                </ExtraParams>
                                                <EventMask ShowMask="true" />
                                            </FileSelected>
                                           
                                        </DirectEvents>
                                    </ext:FileUploadField>
    Please also find the printscreen when the leftmost part of the button is pressed:
    Click image for larger version. 

Name:	printscreen.png 
Views:	25 
Size:	2.8 KB 
ID:	6559
    Last edited by Baidaly; Jul 20, 2013 at 1:20 AM. Reason: [CLOSED]
  2. #2
    Hi @kwcitadmin,

    I cannot reproduce with the latest Ext.NET v1 from SVN and FireFox.

    What are your testing conditions?
  3. #3
    Dear Daniil,

    The problem could be reproduced using IE 8 and Ext.Net v1.5.
    Thanks.
  4. #4
    I was able to reproduce the issue in IE9 with the latest Ext.NET v1 sources. All the left half of that seems do not open a file dialog on click.

    Here is a full test case. We will investigate.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:FileUploadField
                runat="server"
                Width="300"
                ButtonText="Press to select file to upload" />
        </form>
    </body>
    </html>
  5. #5
    Any hints to solve the problem?
  6. #6
    Please try this solution. It appears to be working with IE8, IE9, FireFox and Chrome.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <style type="text/css">
            .ext-ie .x-form-file-wrap .x-form-file {
                z-index: 0;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
     
            <ext:FileUploadField
                ID="FileUploadField1"
                runat="server"
                Width="300"
                ButtonText="Press to select file to upload">
                <Listeners>
                    <AfterRender Handler="if (Ext.isIE) {
                                              this.button.on('click', function () {
                                                  console.log('click');
                                                  this.fileInput.dom.click();
                                              }, this);
                                          }" />
                </Listeners>
            </ext:FileUploadField>
        </form>
    </body>
    </html>
  7. #7
    Dear Daniil,

    Problem fixed. Thank you very much

Similar Threads

  1. [CLOSED] FileUploadField browse button issue
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 28, 2012, 4:44 PM
  2. Replies: 3
    Last Post: May 15, 2012, 8:48 AM
  3. FileUploadField button behaviour
    By Neil_Walters in forum 1.x Help
    Replies: 1
    Last Post: Feb 01, 2010, 10:27 AM
  4. [FIXED] [1.0] FileUploadField button behaviour
    By Neil_Walters in forum Bugs
    Replies: 1
    Last Post: Feb 01, 2010, 10:00 AM
  5. [CLOSED] FileUploadField with upload button
    By pank in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 19, 2009, 2:58 AM

Tags for this Thread

Posting Permissions