[CLOSED] File Dialog on Image Click

  1. #1

    [CLOSED] File Dialog on Image Click

    I have this setup:


    <script runat="server">
      [DirectMethod]
      public void Banner_Click(object sender, DirectEventArgs e)
      {
        FileUpload1.Show();                
      }
    </script>
    <ext:Panel runat="server" ID="tabBanner" Title="Banner" Height="300" Padding="5">
        <Items>
            <ext:Image runat="server" ID="imgBanner" ImageUrl="~/Images/BannerItemBlank.png" StyleSpec="cursor: pointer;">
                <DirectEvents>
                    <Click OnEvent="Banner_Click" />
                </DirectEvents>
            </ext:Image>
        </Items>
    </ext:Panel>
    <ext:FileUploadField runat="server" ID="FileUpload1" Name="file" />
    I have two issues.

    1) File Upload Dialog does not open
    2) IE displays a loading green progress bar at the bottom of the page, reminiscent of the postback behaviors AJAX was supposed to do away with. I'm guessing it's something about the way I set up my click event, but if this can be avoided please let me know.

    Thanks!

    - jwf
    Last edited by Daniil; May 31, 2011 at 11:40 AM. Reason: [CLOSED]
  2. #2
    Sorry, one more thing - FileUploadField should be hidden (display:none). The idea is to have the user click the image to open the dialog directly.
  3. #3
    After examining the DOM elements rendered by the ext:FileUpload control, I was able to achieve the effect I wanted as such:

    <script type="text/javascript">
        function test() {
            $lw("#FileUpload1-file").click(); // note $lw is an alias for jQuery on my system
        }
    </script>
    <ext:Panel runat="server" ID="tabBanner" Title="Banner" Height="300" Padding="5">
        <Items>
            <ext:Image runat="server" ID="imgBanner" ImageUrl="~/Images/BannerItemBlank.png" StyleSpec="cursor: pointer;">
                <Listeners>
                    <Click Handler="test();" />
                </Listeners>
            </ext:Image>
        </Items>
    </ext:Panel>
    So followup: Is this legit? Is the "FileUploadID-file" pattern consistent? Or is this a hack that may break in future updates?
  4. #4
    Hi,

    I'd suggest you to use .fileInput porperty.

    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 ID="FileUploadField1" runat="server" Hidden="true" />
        <ext:Image ID="Image1" runat="server" ImageUrl="someUrl">
            <Listeners>
                <Click Handler="FileUploadField1.fileInput.dom.click();" />
            </Listeners>
        </ext:Image>
        </form>
    </body>
    </html>

Similar Threads

  1. File Upload Dialog
    By davidhoyt in forum User Extensions and Plugins
    Replies: 39
    Last Post: May 27, 2013, 7:19 PM
  2. Replies: 1
    Last Post: Nov 02, 2012, 5:07 AM
  3. [CLOSED] ext:Image - How I can show a menu when click in ext:Image?
    By supera in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: May 10, 2012, 9:56 PM
  4. Save as dialog on client side for image
    By vishal.jhala@gmail.com in forum 1.x Help
    Replies: 0
    Last Post: Aug 06, 2011, 9:02 PM
  5. [CLOSED] Download image file
    By skyone in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 04, 2010, 1:08 PM

Tags for this Thread

Posting Permissions