CODEWITHSUNDEEP
c#asp.netbutton
Izabela Wlodarska
Izabela Wlodarska

Reputation: 412

How to change button text in file upload control?

I try to change text of file upload control browse button. I made file upload control visible=false and I added another textbox and button:

.aspx file:

<asp:FileUpload ID="fuUploadPhoto" runat="server" visible="false"/>
<asp:TextBox ID="tbFilePath" runat="server" />
<asp:Button ID="btnChooseFile" runat="server" Text="Choose file from disk" />

next I try to add Attribute to btnChooseFile in PageLoad in .cs. Unfortunately it doesn't work and I don't know why. Where I made a mistake?

.cs file:

protected void Page_Load(object sender, EventArgs e)
    {
        btnChooseFile.Attributes.Add("onclick", "document.getElementById(" + fuUploadPhoto.ClientID + ").click()");
       MultiViewAddPhoto.SetActiveView(viewAddPhotoStepOne);
    }

protected void btnChooseFile_Click(object sender, EventArgs e)
    {

        if (fuUploadPhoto.HasFile)
        {
            tbFilePath.Text = fuUploadPhoto.PostedFile.FileName;
            string filename = Path.GetFileName(fuUploadPhoto.FileName);
            string ext = Path.GetExtension(filename);
            imageGuid = Guid.NewGuid();

            string contenttype = String.Empty;
            switch (ext)
            {
                case ".jpg":
                    contenttype = "image/jpg";

                    break;
                case ".jpeg":
                    contenttype = "image/jpg";

                    break;
                case ".png":
                    contenttype = "image/png";

                    break;
            }


            if (string.IsNullOrEmpty(contenttype))
            {
                ltrErrorMessage.Text = "Nieprawidłowy format pliku!";
            }
            //prawidłowy format pliku
            else
            {

                if (fuUploadPhoto.PostedFile.ContentLength > MyConsts.DAL.SizeOfPhoto)
                {
                    ltrErrorMessage.Text = "Plik może mieć maksymalnie "+ MyConsts.DAL.SizeOfPhoto/1024 + " Mb! Zmniejsz plik i spróbuj ponownie.";
                }
                //jeśli prawidłowy format i rozmiar zdjęcia
                else
                {
                    try
                    {
                        filePath = ConfigurationManager.AppSettings["FilesPath"] + "\\" + Request.QueryString["konkurs"] + "\\" + imageGuid + ext;
                        path = "\\" + Request.QueryString["konkurs"] + "\\" + imageGuid + ext;

                        //zapisujemy plik na dysk
                        fuUploadPhoto.SaveAs(filePath);

                        if (File.Exists(filePath))
                        {
                            imgInspirationPhoto.ImageUrl = filePath;
                            imgInspirationPhoto.Visible = true;
                        }
                        else
                        {
                            imgInspirationPhoto.Visible = false;
                        }

                    }
                    catch (Exception ex)
                    {
                        Logger.Error(ex.Message, LogSource, ex); 
                    }

                }
            }
        }

    }

Upvotes: 0

Views: 19174

Answers (3)

Kutty Rajesh Valangai
Kutty Rajesh Valangai

Reputation: 635

using two js files http://the-echoplex.net/demos/upload-file/file-upload.js and http://the-echoplex.net/demos/upload-file/jelly/min.js .And add the file-upload.css file.Your sample aspx file is,

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!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">  
 <script src="script/jelly.js" type="text/javascript"></script>  
   <style type="text/css">  
 /****************** Start page styles ********************************************/  
 body {  
      background: #DFA01B;  
      font-family: arial, sans-serif;  
      font-size: 11px;  
      }  
 #wrap {  
      max-width: 600px;  
      margin: 30px auto;  
      background: #fff;  
      border: 4px solid #FFD16F;  
      -moz-border-radius: 15px;  
      -webkit-border-radius: 15px;  
      border-radius: 15px;  
      padding: 20px;  
   }  
 .field {   
      padding: 0 0 1em;   
      }  
 </style>  
 <head runat="server">  
   <title></title>  
 </head>  
 <body>  
   <form id="form1" runat="server">  
   <div id="wrap">  
 <form enctype="multipart/form-data" action="#" method="post">  
      <div class="field">  
           <label class="file-upload">  
                <span><strong>Put YOUR TEXT</strong></span>  
                <%--<input type="file" name="uploadfile" onclintclick="test_load()" />--%>  
       <asp:FileUpload  
         ID="FileUpload1" name="uploadfile" runat="server"   
       ondatabinding="FileUpload1_DataBinding" />  
           </label>  
      </div>  
 </form>  
 </div><!--/ wrap -->  
   <script src="script/file-upload.js" type="text/javascript"></script>  
   </form>  
 </body>  
 </html>

and CSS file,

body {
}
/* 

    As this stylesheet is lazy loaded these styles only apply if JavaScript is enabled

*/  
.file-upload {
    overflow: hidden;
    display: inline-block;
    position: relative; 
    vertical-align: middle;
    text-align: center;

    /* Cosmetics */
    color: #fff;
    border: 2px solid #2FA2FF;
    background: #6FBEFF;

    /* Nice if your browser can do it */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    text-shadow: #000 1px 1px 4px;
    }

.file-upload:hover { 
    background: #2FA2FF; 
    }

.file-upload.focus { 
    outline: 2px solid yellow;
    }

.file-upload input {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    font-size: 70px;

    /* Loses tab index in webkit if width is set to 0 */
    opacity: 0;
    filter: alpha(opacity=0);
    }

.file-upload strong { 
    font: normal 1.75em arial,sans-serif; 
    }   

.file-upload span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;

    /* Adjust button text vertical alignment */
    padding-top: .45em;
    }

/* Adjust the button size */    
.file-upload { height: 3em; }
.file-upload,
.file-upload span { width: 14em; }  

.file-upload-status {
    margin-left: 10px;
    vertical-align: middle;
    padding: 7px 11px;
    font-weight: bold;  
    font-size: 16px;
    color: #888;
    background: #f8f8f8;
    border: 3px solid #ddd;
    }

you can download sample project at changedfileuploadbutton text

Upvotes: 1

tariq
tariq

Reputation: 2258

When you make the fileupload visible false it won't be rendered on the page i.e its not hidden but not present. hence make it display none rather than visible false.

Try this

protected void Page_Load(object sender, EventArgs e)
{
    btnChooseFile.Attributes.Add("onclick", "jQuery('#" + fuUploadPhoto.ClientID + "').click();return false;");
   //MultiViewAddPhoto.SetActiveView(viewAddPhotoStepOne);
}

in aspx file:

<div style="display:none;">
<asp:FileUpload ID="fuUploadPhoto" runat="server"/>
</div>

remember to add reference to jQuery library in the aspx page;

Update: Also the file is not available in the code behind until full postback This solution might help

Upvotes: 2

DGibbs
DGibbs

Reputation: 14608

You can't using the standard asp file upload control.

You could create your own custom control which inherits from FileUpload, there you could add custom behaviour:

public class MyFileUpload : FileUpload 
{
     //do stuff
}

Upvotes: 0

Related Questions