CODEWITHSUNDEEP
c#asp.netfile-upload
anothershrubery
anothershrubery

Reputation: 21003

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:

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?

Upvotes: 2

Views: 5796

Answers (2)

user7079527
user7079527

Reputation: 1

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

    });
});

Upvotes: 0

SpiderCode
SpiderCode

Reputation: 10122

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>

Upvotes: 1

Related Questions