How fill TexBox by filepath from FileUpload control

Question

Hello i got hidden FileUpload control, textBox where i wanna write url adrres or! filepath to some file, and button for call FileUpload. My problem is that i need instantly after user check in fileupload control some file and close popup window, fill TextBox with filepaths of that file. I know how show filepath but i need do it automatically and that trap for me. Here is what i got so far

<div class="ViewContent">
  <asp:FileUpload ID="FileUpload2" runat="server" Width="317px" style="display: none"/>
  <input id="btnFileUpload" type="button" value="Add" runat="server" style="width: 70px" />
    <asp:TextBox ID="TextBox2" runat="server" Width="310px"/>
</div>

protected void Page_Load(object sender, EventArgs e)
{
  btnFileUpload.Attributes.Add(
    "onclick",
    "document.getElementById('" + FileUpload2.ClientID + "').click();");  
}

So answer is simple: where should i put my check code for filling TextBox? something like this

if (FileUpload2.PostedFile != null)
{
  TextBox2.Text = System.IO.Path.GetFullPath(FileUpload2.PostedFile.FileName);
}

afzalulh · Accepted Answer · 2013-08-17T16:52:48.443

1

This script will do the job:

<script type="text/javascript">
        $(document).ready(function () {

            $(document).on('change', '#<%= FileUpload2.ClientID%>', function (e) {
            $('#<%= TextBox2.ClientID%>').val(e.target.files[0].name);
        });

            $('#<%=btnFileUpload.ClientID%>').click(function () {
                $('#<%= FileUpload2.ClientID%>').trigger('click');                
            });

    });
</script>

Add reference to jquery like below and remove the code form Page_Load().

<head runat="server">
    <script src="Scripts/jquery-1.8.2.js"></script>

Or even:

<head runat="server">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

And your Page_Load():

protected void Page_Load(object sender, EventArgs e)
{
  //btnFileUpload.Attributes.Add(
    //"onclick",
    //"document.getElementById('" + FileUpload2.ClientID + "').click();");  
}

edited Aug 17 '13 at 16:52

answered Aug 17 '13 at 15:54

afzalulh

7,925
2
26
37

And this function is called automaticaly?Add reference is something like that in headcontent? I tried it but nothing happens – Alexander_Dracka Aug 17 '13 at 16:13
Because probably jquery is not attached. I have update my answer to show how to attach it. – afzalulh Aug 17 '13 at 16:17
Thank you for patient. SO now its working /but i dont know how>D/ and one little problem that in TextBox i got onlz name of file. Can i somone get fullpath? – Alexander_Dracka Aug 17 '13 at 16:36
You may have code in codebehind to run the uploader- it's causing running it twice. Answer to your second question, you can't get full path from file upload. Some browser may support it. Please see this:[How to get the full path of the file from a file input](http://stackoverflow.com/q/4176377/690329) – afzalulh Aug 17 '13 at 16:51
OU thank zou so much man. I get it now. I spend my whole day to deal with this and i think that i get it. I have to learn Jquery in future realy nice feature:) – Alexander_Dracka Aug 18 '13 at 07:45
I am sure you will love jquery. Good luck! – afzalulh Aug 18 '13 at 20:54

score 0 · Answer 2 · answered Aug 17 '13 at 13:01

0

As you want to get filename instantly, you should use javascript something like this:

var fu1 = document.getElementById("FileUpload1");
alert("You selected " + fu1.value);

let me know if anything else.

answered Aug 17 '13 at 13:01

donstack

2,557
3
29
44

and where I should call this function? When i need fill my TextBox instantly after user check file from FileUpload control. Because i can get filepath in pure csharp but i need it after FileUpload close popup window – Alexander_Dracka Aug 17 '13 at 14:16
For example I can call javascript which works fine like this onchange="alert('you selected the file: '+ this.value)" on FileUpload but i need this value save in code=behind. Do you know what should i do? – Alexander_Dracka Aug 17 '13 at 14:49
document.getElementById("txtBox1").value=fu1.value; – donstack Aug 17 '13 at 15:18
Ok that look nice but not working i got in FIlUpload onchange and this event call javascript function like this function Test() { var fu1 = document.getElementById('FileUpload2'); document.getElementById('TextBox2').value = fu1.value; } I not good in javascript can you help me? Is something wrong with this script? Because when i put alert('value of var: '+fu1.value) nothing show. – Alexander_Dracka Aug 17 '13 at 16:00

How fill TexBox by filepath from FileUpload control

2 Answers2