How to change Text in FileUpload control

Can we change text of Browse Button in FileUpload Control to Other language? Am working on Localization. Am not able to change name cause When i generate Local Resource file for FileUPload component only this comes (FileUpload1Resource1.ToolTip). I want to change Button Text. How can i change?

Re: How to change Text in FileUpload control

I'm not sure you can change it.

I did it this way:

<div mce_keep="true">make a button (for instance an input; it doesn't even have to run at server)</div>
<div mce_keep="true">when the button is clicked, perform some javascript</div>
<div mce_keep="true">the javascript will get the fileInput, and perform the click on it.</div>
<div mce_keep="true">the 'Open File'-dialog is opened by pressing on a button you can modify any way you want.</div>
<div mce_keep="true">Hide the fileInput control</div>

Hope this helps!
Wim

Re: How to change Text in FileUpload control

Hi there, two questions:

1) Have you set the Language UI thread of the site?

2) Have you set tried setting your OS to a different language?

I ask becuase if your using the asp.net control then I beleive it will use the default settings for the language of the control, but I'm not sure if it takes the language from the thread or the OS so worth setting Windows to another Language to see what language the button appears as.

Michael

Re: How to change Text in FileUpload control

Hi,

As far as I know, we cannot localize the file upload dialog box. It is a client call and its language depends on the language of the OS on the client side.

If you just wish to change the language on the click button, you can use deblendewim's suggestion, to make a file upload control yourself. The only way to change the file open dialog box is to construct an ActiveX control of your own to do this.

If this does not answer your question, please feel free to mark the post as Not Answered and reply. Thank you!

Re: How to change Text in FileUpload control

Hi,

I'm trying to do what you said... but my javascript is not working Could you show me you javascript (step 3) pls?

Thanks in advance

Re: How to change Text in FileUpload control

Hi rdelgadoj,

Here is a complete example. Both buttons trigger the hidden input (type="file") element. One button is a html button (pure clientside), the other button is the asp:button.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
	  function triggerFileUpload()
	  {
		document.getElementById("File1").click();
	  }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
	  <input id="File1" type="file" style=" visibility:hidden;" />
	  <br />
	  <br />
	  <asp:Button ID="Button1" OnClientClick="triggerFileUpload()" runat="server" Text="ASPNET Button" />
	  <br />
	  <br />
	  <input id="Button2" type="button" onclick="triggerFileUpload()" value="HTML Button" />
	  <br />
	  <br />
    </div>
    </form>
</body>
</html>

If you have any other questions/remarks, please let me know.

Good luck!
Wim

Re: How to change Text in FileUpload control

Hi Wim,

Thanks very much.

This is working fine!, but, I realize that if I put "runat="server"" to the File1 object, the "File Browser" window is not raised. I need to get the posted file in the "CodeBehind"... How do I do this?

Thanks!

Re: How to change Text in FileUpload control

Hi rdelgadoj,

Sorry for my late reply ....

I think that the value of the input control (type=file) is not remembered during postback.
One thing is weird: If I put runat="server" on my File1 control, it still gets triggered and the Open File Dialog still pop's up? (But, it doesn't have to be runat="server" since the value isn't remembered during postback)

You can solve this by doing the following ....

<div mce_keep="true">in the input control (type=file) you have an event onchange. </div>
<div mce_keep="true">This event gets triggered whenever the value of the control changes</div>
<div mce_keep="true">When that occurs, call a javascript function to get the value of the input-control (type=file) </div>
<div mce_keep="true">Store that value in an input-control (type=hidden) </div>
<div mce_keep="true">make sure the input control (type=hidden) is runat="server".</div>
<div mce_keep="true">then in code-behind, get the value out of the hidden input control. (This value is remembered during postback!)</div>

Here is an example:

html:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
	  function triggerFileUpload()
	  {
		document.getElementById("File1").click();
	  }
	  

	  function setHiddenValue()
	  {
		document.getElementById("Hidden1").value = document.getElementById("File1").value;
	  }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
	  <input runat="server" id="Hidden1" type="hidden" />
	  <input runat="server" id="File1" type="file" onchange="setHiddenValue()" style=" visibility:hidden;" />
	  <br />
	  <br />
	  <asp:Button ID="Button1" OnClientClick="triggerFileUpload()" runat="server" Text="ASPNET Button" />
	  <br />
	  <br />
	  <input id="Button2" type="button" onclick="triggerFileUpload()" value="HTML Button" />
	  <br />
	  <br />
	  <asp:Button ID="Button3" runat="server" Text="Go CodeBehind To Get Input Value" />
    </div>
    </form>
</body>
</html>

code-behind:

Partial Class _Default
    Inherits System.Web.UI.Page

  Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
	Dim inputValue As String
	inputValue = Me.Hidden1.Value

  End Sub
End Class

Hope this helps!
Wim

Re: How to change Text in FileUpload control

Win,

Thanks a lot! This solved my problem.

I have to fix some issues because I'm working with master page, so, I have ContentPlaceHolder that changes the client's name controls and also I'm using an UpdatePanel (UpdatePanels do not supports FileUploads)....

This is great!

Again Thanks a lot!

Re: How to change Text in FileUpload control

[:(]i want your help plzzzzzzzzzzzzzzz.

this code is run in html page and I'm using aspx page with masterpage so can you help me to get the same code that can work in my project plz.

thx

Re: How to change Text in FileUpload control

Hi ahmed,

The code given is actually an aspx page. Only the content inside the <html></html> is given.

Can you be a bit more specific about what you want to achieve? Do you want your customized fileupload on the master, child?
How do you want to customize it etc.

Did you try to add the above code to your application?
Do you get errors, what goes wrong?

Kind regards,
Wim

Re: How to change Text in FileUpload control

thx Wim for replaying me.

look Wim that is the code I write it and it doesn't work see it and replay me ok thx .

<%@ Page Language="C#" MasterPageFile="~/MasterPage2.master" AutoEventWireup="true" CodeFile="final.aspx.cs" Inherits="test_Default" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<!--

function fireFileClick()

{

var objfile = document.getElementById('File1');

objfile.click();

var objTextBox = document.getElementById('Text1');

objTextBox.value = objfile.value;

}

function setHiddenValue()

{

document.getElementById("Hidden1").value = document.getElementById("File1").value;

}

// -->

</script>

<br />

<asp:Button ID="Button1" OnClientClick="fireFileClick()" runat="server" Text="ASPNET Button" />

<br />

<br />

</asp:Content>

Re: How to change Text in FileUpload control

thx Wim for replaying me.

look Wim that is the code I write it and it doesn't work see it and replay me ok thx .

<%@ Page Language="C#" MasterPageFile="~/MasterPage2.master" AutoEventWireup="true" CodeFile="final.aspx.cs" Inherits="test_Default" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<!--

function fireFileClick()

{

var objfile = document.getElementById('File1');

objfile.click();

var objTextBox = document.getElementById('Text1');

objTextBox.value = objfile.value;

}

function setHiddenValue()

{

document.getElementById("Hidden1").value = document.getElementById("File1").value;

}

// -->

</script>

<br />

<asp:Button ID="Button1" OnClientClick="fireFileClick()" runat="server" Text="ASPNET Button" />

<br />

<br />

</asp:Content>

Re: How to change Text in FileUpload control

sorry for repeating it is my mistake sorry but i want to use upload file as standard not input becouse this control in about 40 page and i can't change the code from start again so try to help me [:)]

Re: How to change Text in FileUpload control

Just for notice!

The code posted by Win should work... the really issue here is What will we do with the file (file path or file name)?

Post a file in a server is a little bit complicated, going on a step forward (after we get the file name in some way)... How do we post the file to the server? The HTTPPostedFile class has its "FileName" property as "Read Only", also the "FileName" property of the UploadFile control... I spent a little time trying and finally I had to use the UploadFile as it. I improve a little the interface using this version of an UploadFile http://en.fileuploadajax.subgurim.net/ works fine, and so far it results stable.

I hope help somebody

Re: How to change Text in FileUpload control

ahmed_fci2006

thx Wim for replaying me.

look Wim that is the code I write it and it doesn't work see it and replay me ok thx .

Hi ahmed,

You're right about the code not working ....

The cause of this is the document.getElementById. On a masterPage, when the page gets rendered to be displayed (meaning the master and content-page will merge) the ID's of the controls get a different name than the one you declared them with. Just do a view source in your browser to see it for yourself.

So a working solution is this ....

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Default3" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <script type="text/javascript">
  <!--
  function fireFileClick()
  {
	var objfile = document.getElementById("<%= File1.ClientID %>");
	objfile.click();
	

	var objTextBox = document.getElementById("<%= Text1.ClientID %>");
	objTextBox.value = objfile.value;
  }


  function setHiddenValue()
  {
	document.getElementById("<%= Hidden1.ClientID %>").value = document.getElementById("<%= File1.ClientID %>").value;
  }
  // -->
  </script>


  <input id="Hidden1" type="hidden" runat="server" />
  <input runat="server" onchange="setHiddenValue()" id="File1" type="file" style=" visibility:hidden;" />
  <br />
  <br />
  <asp:Button ID="Button1" OnClientClick="fireFileClick()" runat="server" Text="ASPNET Button" />
  <input id="Text1" type="text" runat="server" />
  <br />
  <br />
  <input id="Button2" type="button" onclick="fireFileClick()" value="HTML Button" />
  <br />
  <br />
</asp:Content>

NOTE that this is a slightly different code example than your code of a contentpage so be careful when you take over the code!

ahmed_fci2006

i want to use upload file as standard not input

This is very easy:

Just remove the input control and place a FileUpload-control on the page. Set it's visibility style to hidden.
Then just replace all occurances of File1 on the page with the id of the FileUpload control
I checked this and the functionality remains the same.

If you have questions/remarks please do so!

Kind regards,
Wim

Re: How to change Text in FileUpload control

rdelgadoj

Just for notice!

The code posted by Win should work... the really issue here is What will we do with the file (file path or file name)?

Post a file in a server is a little bit complicated, going on a step forward (after we get the file name in some way)... How do we post the file to the server? The HTTPPostedFile class has its "FileName" property as "Read Only", also the "FileName" property of the UploadFile control... I spent a little time trying and finally I had to use the UploadFile as it. I improve a little the interface using this version of an UploadFile http://en.fileuploadajax.subgurim.net/ works fine, and so far it results stable.

I hope help somebody

Hi rdelgadoj,

The net is full with examples about how to post a local file to the webserver once you got the FileName:

Here are some links:

http://aspalliance.com/150_How_to_Upload_files_in_ASP_NET

http://www.codeproject.com/aspnet/FileHandlerPackage.asp

http://www.15seconds.com/issue/010504.htm

If you have questions/remarks please do so!
Kind regards,
Wim

Re: How to change Text in FileUpload control

Wim thx the code working but [:(] there is two problem with me

1- when I make fileupload visibility hidden "visible=false" the fileupload doesn't work.

2-when make it visible it opens fileupload path but "image path doesn't appear in file upload txt".

[:(] I really don't know why it doesn't work with

Re: How to change Text in FileUpload control

Hi ahmed,

I'm glad the code is working now ....

To answer your questions:

ahmed_fci2006
1- when I make fileupload visibility hidden "visible=false" the fileupload doesn't work.

When you set the property visible of the control to false, this is a parameter that will be handled on the server-side when the page gets rendered.
What I'm trying to say is: When you set that property to false, when the page renders, it just doesn't create the button!!!

Look at the source (through the browser) of the page when the page is loaded and you have set the visible-property of the control to false. The control just isn't there.

SOLUTION:
Use a css style to hide the button!

Or you use a css file and link it to the control or you can set the style property of the control.

ahmed_fci2006
2-when make it visible it opens fileupload path but "image path doesn't appear in file upload txt".

Not sure what is causing this ...

Did you use my code as is?? Make sure all controls are runat="server".

If it is not working ... is there an error occuring? Maybe a javascript error (--> yellow triangle in the bottom-left of browser)

Kind regards,
Wim

Re: How to change Text in FileUpload control

Hi,

I'm user your trick in a UC and publish it in website, now when I press submit button , page don't submit and focus move to first filled fileupload if I remove "visibility:hidden" filupload! Other wise (I set visibility to hidden) submit button don't work while all of hidden fileupload become empty.

Any one can help me?

Thanks for your reply!