How to change button text in file upload control?

Question

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); 
                    }

                }
            }
        }

    }

Reference this link => http://www.quirksmode.org/dom/inputfile.html — zey, Dec 19 '13 at 09:12
possible duplicate of [How to change the Text of the browse button in the FileUpload Control (System.Web.UI.WebControls)](http://stackoverflow.com/questions/94316/how-to-change-the-text-of-the-browse-button-in-the-fileupload-control-system-we) — Damith, Dec 19 '13 at 09:12

score 2 · Accepted Answer · edited May 23 '17 at 12:07

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

one can trigger the click event for file upload like this.. but what happens after wards is a different thing — tariq, Dec 19 '13 at 09:28

Kutty Rajesh Valangai · Answer 2 · 2016-02-22T05:39:03.673

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

score 0 · Answer 3 · answered Dec 19 '13 at 09:14

0

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
}

answered Dec 19 '13 at 09:14

DGibbs

14,316
7
44
83

you are right, but he is not trying to do that exactly. He is just hiding the file upload control and displaying a normal Button and TextBox at its place and then triggering its click event. – tariq Dec 19 '13 at 09:22
@tariq I can see what he is attempting to do and it's a hacky solution. What I propose is much cleaner and reusable. – DGibbs Dec 19 '13 at 09:32
yep. you are right as far as the larger picture is concerned, my solution was just limited to her specific problem of not getting it triggered. – tariq Dec 19 '13 at 09:54

How to change button text in file upload control?

3 Answers3