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
    Use FileSelected event
  3. #3
    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.
  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?

    <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
    Please use .IconCls.

    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">
            .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>
  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
    Please use the .buttonCfg config option.

    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">
            .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>
  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 Legacy Premium Help
    Replies: 24
    Last Post: Dec 15, 2014, 5:44 AM
  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 Legacy Premium Help
    Replies: 2
    Last Post: May 11, 2011, 8:06 PM

Tags for this Thread

Posting Permissions