CODEWITHSUNDEEP
asp.netajaxundefinedhidden-fieldasyncfileupload
coder
coder

Reputation: 13248

Hidden Field value is showing undefined

I have simple asp.net async upload where I'm trying to upload a sample image from my local system and upon uploading trying to perform a simple webmethod.

Scenanrio:

  1. Uploading image using async uploader and its working fine and uploading it to dest folder.

  2. Now when trying to save the fileupload.filename in hidden field and tested if its really getting the filename(This also works)

  3. Now when trying to send the var where the value of hidden field is saved comes the problem. Here it is showing me as undefined.

Here is my code:

Protected Sub fileUploadComplete(ByVal sender As Object, ByVal e As AsyncFileUploadEventArgs)
    Thread.Sleep(1000)
    Dim filename As String = System.IO.Path.GetFileName(fileUpload1.FileName)
    fileUpload1.SaveAs(Server.MapPath("UploadFiles/") & RandomFolder.Value & "/" & filename)
    lblFilename.Value = filename
End Sub

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        CreateFolder()
    End If
    Dim mypath As String = Server.MapPath("~/UploadFiles/")
    myFilePath.Value = mypath

End Sub
<WebMethod()> _

Public Function FileDetails(ByVal Filename As String, ByVal mypath As String) As String //Some operations Return "True" End Function

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
           <link href="style/bootstrap.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    // This function will execute after file uploaded successfully
    function uploadComplete() {
        document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File Uploaded Successfully";
}
// This function will execute if file upload fails
function uploadError() {
    document.getElementById('<%=lblMsg.ClientID %>').innerHTML = "File upload Failed.";
}

$(document).ready(function () {
    $("#btnconvert").click(function () {
        var FileFolder = $('#RandomFolder').val();
        var filename = document.getElementById('<%=lblFilename.ClientID %>').val();
        alert(FileFolder);
        alert(filename);
        $.ajax({
            type: "POST",
            url: "AsyncUpload.aspx/FileDetails",
            data: JSON.stringify('{"Filename":"' + filename + '","mypath":"' + FileFolder + '"}'),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                // Replace the div's content with the page method's return.
                alert("Success");
            }
        });
    });
});
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ToolkitScriptManager ID="scriptManager1" runat="server"/>
<div>
<asp:AsyncFileUpload ID="fileUpload1" OnClientUploadComplete="uploadComplete" OnClientUploadError="uploadError" 
CompleteBackColor="White" Width="350px" runat="server" UploaderStyle="Modern" UploadingBackColor="#CCFFFF" 
ThrobberID="imgLoad" OnUploadedComplete="fileUploadComplete" /><br />
<asp:Image ID="imgLoad" runat="server" ImageUrl="loading.gif" />
<br />
<asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
</div>
    <asp:HiddenField ID="RandomFolder" runat="server"/>
    <asp:HiddenField ID="FilePath" runat="server"/>
     <asp:HiddenField ID="myFilePath" runat="server"/>
     <asp:HiddenField ID="lblFilename" runat="server"/>
     <button id="btndetails" class="btn btn-danger btnconvert" type="button">Convert file</button>
    </div>

Upvotes: 0

Views: 4599

Answers (2)

Mitesh Vora
Mitesh Vora

Reputation: 458

See this page it can help you achieve what you are trying

Upvotes: 0

Menno van den Heuvel
Menno van den Heuvel

Reputation: 1861

You're calling the value of your hidden field using the val() method, but that method does not exist on your field object; it's a jQuery method. Either wrap your hidden field in jQuery:

var filename = $('#<%=lblFilename.ClientID %>').val();

Or just call the .value property on your field:

var filename = document.getElementById('<%=lblFilename.ClientID %>').value;

Upvotes: 1

Related Questions