Results 1 to 8 of 8

Thread: Upload file in one click

  1. #1

    Upload file in one click

    Hello - Does any one have a code snippet how to upload file with single button click.

    Currently I have a fileuploadfield which has browse button. After user selects the file via browse button, he has to click the upload button to actually upload the file.

    Can we do both operations in one single click?

    Thanks
    Vishal.

  2. #2
    Ext.NET - Dev Team Vladimir's Avatar
    Join Date
    Mar 2008
    Location
    Russia
    Posts
    15,356
    Use FileSelected event
    Vladimir Shcheglov
    Ext.NET, Inc.
    Development Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  3. #3
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,498
    Hi @vishal.jhala,

    Please do not duplicate threads:
    http://forums.ext.net/showthread.php?14908

    Please feel free to bump (post a new message) a thread if it leaves non-answered.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  4. #4
    Hello Vladimir - Thank you. Suggestion works. In one single click I am able to upload the file to server and save it.

    Second part of the problem is image button. All other buttons on website are images in specific theme. This browse button from fileinputfield stands out as its a simple button. I tried putting imageurl property in this tab but no success. Do you know how I can replace default browse button with a image?

    Code:
    <ext:FileUploadField hidden="false" ID="FileUploadField1" runat="server" ButtonOnly="true" ImageUrl="./Images/Upload.jpg" >
                                            <DirectEvents>
                                                <FileSelected
                                                    OnEvent="UploadClick"
                                                    Before="
                                                            Ext.Msg.wait('Uploading your photo...', 'Uploading');"
                                                                                    Failure="Ext.Msg.show({ 
                                                        title   : 'Error', 
                                                        msg     : 'Error during uploading', 
                                                        minWidth: 200, 
                                                        modal   : true, 
                                                        icon    : Ext.Msg.ERROR, 
                                                        buttons : Ext.Msg.OK 
                                                    });">
                                                </FileSelected>
                                            </DirectEvents>
                                        </ext:FileUploadField>
    @Daniil - Forgive my ignorance. Still learning the forum rules.

    Regards
    Vishal.

  5. #5
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,498
    Please use .IconCls.

    Example

    Code:
    <%@ 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">
            .my-icon {
                background-image: url("image.jpg");
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:FileUploadField 
                runat="server" 
                ButtonOnly="true" 
                IconCls="my-icon" 
                ButtonText="" />
        </form>
    </body>
    </html>
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  6. #6
    Hello Daniil - Thanks. It partially worked for me.

    Now it does select the image but the size of the button is the smallest size it can be when there is no button text. I tried increasing the button width/height by setting property in fielinputfield. Since it did not work, I also tried the CSS style width/height. However the button size did not increase to fit Image size.

    Thank you.
    Vishal.

  7. #7
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    27,498
    Please use the .buttonCfg config option.

    Example
    Code:
    <%@ 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">
            .my-icon {
                background-image: url("iamge32x32.jpg");
            }
            
            .my-button .x-form-file-wrap {
                height: 32px !important;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:FileUploadField
                runat="server"
                ButtonOnly="true"
                IconCls="my-icon"
                ButtonText=""
                CtCls="my-button">
                <CustomConfig>
                    <ext:ConfigItem 
                        Name="buttonCfg" 
                        Value="{
                            width : 32,
                            height : 32
                        }" 
                        Mode="Raw" />
                </CustomConfig>
            </ext:FileUploadField>
        </form>
    </body>
    </html>
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  8. #8
    Thank You !! It worked well.

Similar Threads

  1. [CLOSED] multiple file upload and file size at client side
    By mirwais in forum 1.x Premium Help
    Replies: 19
    Last Post: Oct 17, 2014, 8:25 PM
  2. File upload design issue and click problem
    By Nagaraju in forum 1.x Help
    Replies: 0
    Last Post: Jan 17, 2012, 10:08 AM
  3. Replies: 1
    Last Post: Jun 23, 2011, 9:37 AM
  4. Upload file
    By Egale in forum 1.x Help
    Replies: 1
    Last Post: May 25, 2011, 10:08 AM
  5. [CLOSED] file upload - file name is empty
    By stoque in forum 1.x Premium Help
    Replies: 2
    Last Post: May 11, 2011, 8:06 PM

Tags for this Thread

Posting Permissions