anothershrubery anothershrubery - 1 month ago 17
ASP.NET (C#) Question

ASP.Net control to select a file (not upload)

I want to have a control which allows a user to click a link button, a file dialog comes up and the user selects a file. Currently I am using the FileUpload control as such:

<asp:LinkButton ID="btnDocumentLocation" runat="server" CausesValidation="False">Please Select...</asp:LinkButton>
<asp:FileUpload ID="fuDocumentLocation" style="display:none;" runat="server" ClientIDMode="AutoID" />


And in the code behind I have in
Page_Load
:

btnDocumentLocation.OnClientClick = "$('[id*=\"" + fuDocumentLocation.ClientID + "\"]').click();";


This launches the (hidden)
FileUpload
control where you select your file. In
Page_Load
it checks the file as below and updates the
Text
of the
LinkButton
. I do not need the actual file contents, just the file location:

if (IsPostBack && fuDocumentLocation.PostedFile != null && fuDocumentLocation.PostedFile.FileName.Length > 0)
{
btnDocumentLocation.Text = fuDocumentLocation.PostedFile.FileName;
}
else
{
btnDocumentLocation.Text = "";
}


This all works fine when ran locally. When published, the
FileUpload
seems to have an issue in the "uploading" part. It doesn't post back to the server and therefore can't run the
Page_Load
code to populate the
btnDocumentLocation.Text
property. I don't need it to grab the file, I just need the file location.

What I need to happen in order:


  • User clicks on
    LinkButton

  • File dialog box pops up

  • User selects a file

  • LinkButton
    Text
    property set to full file name selected



Is there a control that allows for this without the overhead of getting the file data in the request? And will allow you to select files across different shares?

Answer

Why do you post back the page if you only want to change the text ? Instead, you can achieve the same without postback using Jquery/Javascript as mentioned below:

<asp:LinkButton runat="server" ID="btnDocumentLocation" OnClientClick="return GetFile();" >Browse...</asp:LinkButton>
<asp:FileUpload runat="server" ID="fuDocumentLocation" OnChange="ChangeText(this.value);" style="display: none" />


<script type="text/javascript">
    function ChangeText(selectedPath) {
        $('#' + '<%=btnDocumentLocation.ClientID%>').text(selectedPath);
    }

    function GetFile() {
        $('#' + '<%=fuDocumentLocation.ClientID%>').click();
        return false;
    }
</script>

If you want to use Pure JQuery then:

<asp:LinkButton runat="server" ID="btnDocumentLocation"  >Browse...</asp:LinkButton>
<asp:FileUpload runat="server" ID="fuDocumentLocation"  style="display: none" />


<script type="text/javascript">

    $(document).ready(function() {
        $('#' + '<%=btnDocumentLocation.ClientID%>').click(function () {
            $('#' + '<%=fuDocumentLocation.ClientID%>').click();
            return false;
        });

        $('#' + '<%=fuDocumentLocation.ClientID%>').change(function () {
            var selectedPath = $('#' + '<%=fuDocumentLocation.ClientID%>').val();
            $('#' + '<%=btnDocumentLocation.ClientID%>').text(selectedPath);

        });
    });
</script>