AjaxFileUpload and UpdatePanel

Hi people and thank you for helping me.

When I upload a file with AjaxFileUpload I need to refresh my UpdatePanel to update a label and a dropdownlist.
I made my code following this example http://schelfaut.net/?tag=ajax but it never works. I refresh the UpdatePanel from
function UploadComplete(sender, args) {
__doPostBack('UpdatePanel1', '');  
}
but not work
Can you help me to update the UpdatePanel when Upload is complete?
<%@ Page Language="VB"%>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script language="VB" runat="server">
    
    Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not IsPostBack Then
        End If
    End Sub
    
    Protected Sub AsyncFileUpload1_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs)
        Try
            System.Threading.Thread.Sleep(5000)
            If AsyncFileUpload1.HasFile Then
                Dim LeftWriteDir As String = "~/"
                Dim AbsolutDir As String = ""
                Dim WriteDir As String = LeftWriteDir & AbsolutDir
                Dim FileName As String = Path.GetFileName(e.filename)
                Dim strPath As String = (MapPath(WriteDir) + FileName)
                AsyncFileUpload1.SaveAs(strPath)
                Dim baseUrl As String = (Request.Url.GetLeftPart(UriPartial.Authority) & VirtualPathUtility.ToAbsolute("~/") & AbsolutDir & FileName)
                
                DropDownList1.Items.Add(DateTime.Now.ToString)
                lblEtiqueta.Text = "You server path is " & strPath

            End If

        Catch exp As Exception
            MsgBox(exp.Message)
            Exit Sub
        End Try
    End Sub
        
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Demo : AsyncFileUpload Control</title>

    <script type="text/javascript" language="javascript">

        function uploadError(sender, args) {
            document.getElementById('lblStatus').innerText = args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
        }

        function StartUpload(sender, args) {
            document.getElementById('lblStatus').innerText = 'Uploading Started.';
        }

        function UploadComplete(sender, args) {
            //Postback for my UpdateFuckingPanel
            __doPostBack('UpdatePanel1', '');  
            
            //Continue
            var filename = args.get_fileName();
            var contentType = args.get_contentType();
            var text = "Size of " + filename + " is " + args.get_length() + " bytes";
            if (contentType.length > 0) {
                text += " and content type is '" + contentType + "'.";
            }
            document.getElementById('lblStatus').innerText = text;
        }
           
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </cc1:ToolkitScriptManager>
    <div>
    
        <asp:Label ID="Throbber" runat="server" Style="display: none">
            <img src="loading.gif" align="absmiddle" alt="loading" />
        </asp:Label>
        <cc1:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnClientUploadError="uploadError"
                        OnClientUploadStarted="StartUpload" OnClientUploadComplete="UploadComplete" CompleteBackColor="Lime"
                        UploaderStyle="Modern" ErrorBackColor="Red" ThrobberID="Throbber" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
                        UploadingBackColor="#66CCFF" Font-Names="Verdana" Font-Size="XX-Small" />
        <br />
        <br />
        <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>
    </div>
    <div>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:DropDownList ID="DropDownList1" runat="server">
                    </asp:DropDownList>
                    <asp:Label ID="lblEtiqueta" runat="server" Text="What's my path"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        
    </div>
    </form>
</body>
</html>

Open in new window

Sherman GutiAsked:
Who is Participating?
 
Sherman GutiConnect With a Mentor Author Commented:
I have made this new code that changes lblEtiqueta in the UpdatePanel

<%@ Page Language="VB" AutoEventWireup="true" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script language="VB" runat="server">
    
    Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        
        lblEtiqueta.Text = Me.UploadedFilePath
        If String.IsNullOrEmpty(Me.UploadedFilePath) Then
            lblEtiqueta.Visible = False
        Else
            Me.UploadedFilePath = ""
            lblEtiqueta.Visible = True
        End If
        
        Me.UploadedFilePath = ""
        
    End Sub
    
    Protected Sub AsyncFileUpload1_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs)
        
        Try
            System.Threading.Thread.Sleep(5000)
            If AsyncFileUpload1.HasFile Then
                
                Dim extension As String = System.IO.Path.GetExtension(AsyncFileUpload1.FileName)
                Dim validExtensions() As String = New String() {".xls", ".xlsx"}
                
                If validExtensions.Contains(extension) Then
                    Dim LeftWriteDir As String = "~/"
                    Dim AbsolutDir As String = ""
                    Dim WriteDir As String = LeftWriteDir & AbsolutDir
                    Dim FileName As String = Path.GetFileName(e.filename)
                    Dim strPath As String = (MapPath(WriteDir) + FileName)
                    AsyncFileUpload1.SaveAs(strPath)
                    Dim baseUrl As String = (Request.Url.GetLeftPart(UriPartial.Authority) & VirtualPathUtility.ToAbsolute("~/") & AbsolutDir & FileName)
                
                    Me.UploadedFilePath = (strPath)
                    
                End If

            End If

        Catch exp As Exception
            MsgBox(exp.Message)
            Exit Sub
        End Try
    End Sub
    
    Public Property UploadedFilePath() As String
        Get
            Return CType(Session("SessionOfFilePath"), String)
        End Get
        Set(ByVal value As String)
            Session("SessionOfFilePath") = value
        End Set
    End Property
    
        
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Demo : AsyncFileUpload Control</title>

    <script type="text/javascript" language="javascript">

        function uploadError(sender, args) {
            document.getElementById('lblStatus').innerText = args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
        }

        function StartUpload(sender, args) {
            document.getElementById('lblStatus').innerText = 'Uploading Started.';
        }

        function UploadComplete(sender, args) {
            //Postback for my UpdateFuckingPanel
            __doPostBack('UpdatePanel1', '');

            //Continue
            var filename = args.get_fileName();
            var contentType = args.get_contentType();
            var text = "Size of " + filename + " is " + args.get_length() + " bytes";
            if (contentType.length > 0) {
                text += " and content type is '" + contentType + "'.";
            }
            document.getElementById('lblStatus').innerText = text;
        }
           
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </cc1:ToolkitScriptManager>
    <div>
                    <asp:Label ID="Throbber" runat="server" Style="display: none"/>
                    <cc1:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnClientUploadError="uploadError"
                    OnClientUploadStarted="StartUpload" OnClientUploadComplete="UploadComplete" CompleteBackColor="Lime"
                    UploaderStyle="Modern" ErrorBackColor="Red" ThrobberID="Throbber" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
                    UploadingBackColor="#66CCFF" Font-Names="Verdana" Font-Size="XX-Small" />
                <br />
                <br />
                <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"
                    Text=""></asp:Label>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>

            <img src="loading.gif" alt="loading" />
                </div>
                <div>
                    <div>
                        <asp:Label ID="lblEtiqueta" runat="server" Text="What's my path"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Open in new window

0
 
dejaanbuCommented:
ur AsyncFileUpload and lblStatus is outside the updatepanel. move it to inside the updatepanel and check.

0
 
Sherman GutiAuthor Commented:
The label lblEtiqueta is in the UpdatePanel.
Everyway I Have moved all inside the UpdatePanel and doesn't work.
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
Sherman GutiAuthor Commented:
Here is the website to run in Visual Studio WebSiteAjaxUpdate.zip
0
 
dejaanbuCommented:
just a thought: give updatemode to conditional.
assign triggers for updatepanel (ur asyncfile upload complete event)
and then
AsyncFileUpload1_UploadedComplete in this server event,

try giving UpdatePanel1.update()
0
 
Sherman GutiAuthor Commented:
ok I'll try!! see you in a hour!
0
 
Sherman GutiAuthor Commented:
HI! it not works, here's the code

<%@ Page Language="VB" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script language="VB" runat="server">
    
    Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not IsPostBack Then
        End If
    End Sub
    
    Protected Sub AsyncFileUpload1_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs)
        Try
            System.Threading.Thread.Sleep(5000)
            If AsyncFileUpload1.HasFile Then
                Dim LeftWriteDir As String = "~/"
                Dim AbsolutDir As String = ""
                Dim WriteDir As String = LeftWriteDir & AbsolutDir
                Dim FileName As String = Path.GetFileName(e.filename)
                Dim strPath As String = (MapPath(WriteDir) + FileName)
                AsyncFileUpload1.SaveAs(strPath)
                Dim baseUrl As String = (Request.Url.GetLeftPart(UriPartial.Authority) & VirtualPathUtility.ToAbsolute("~/") & AbsolutDir & FileName)
                
                DropDownList1.Items.Add(DateTime.Now.ToString)
                lblEtiqueta.Text = "You server path is " & strPath
                UpdatePanel1.Update()

            End If

        Catch exp As Exception
            MsgBox(exp.Message)
            Exit Sub
        End Try
    End Sub
        
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Demo : AsyncFileUpload Control</title>

    <script type="text/javascript" language="javascript">

        function uploadError(sender, args) {
            document.getElementById('lblStatus').innerText = args.get_fileName(), "<span style='color:red;'>" + args.get_errorMessage() + "</span>";
        }

        function StartUpload(sender, args) {
            document.getElementById('lblStatus').innerText = 'Uploading Started.';
        }

        function UploadComplete(sender, args) {
            //Postback for my UpdateFuckingPanel
            __doPostBack('UpdatePanel1', '');  
            
            //Continue
            var filename = args.get_fileName();
            var contentType = args.get_contentType();
            var text = "Size of " + filename + " is " + args.get_length() + " bytes";
            if (contentType.length > 0) {
                text += " and content type is '" + contentType + "'.";
            }
            document.getElementById('lblStatus').innerText = text;
        }
           
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </cc1:ToolkitScriptManager>
    <div>
    
        <asp:Label ID="Throbber" runat="server" Style="display: none">
            <img src="loading.gif" align="absmiddle" alt="loading" />
        </asp:Label>
        <cc1:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnClientUploadError="uploadError"
                        OnClientUploadStarted="StartUpload" OnClientUploadComplete="UploadComplete" CompleteBackColor="Lime"
                        UploaderStyle="Modern" ErrorBackColor="Red" ThrobberID="Throbber" OnUploadedComplete="AsyncFileUpload1_UploadedComplete"
                        UploadingBackColor="#66CCFF" Font-Names="Verdana" Font-Size="XX-Small" />
        <br />
        <br />
        <asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>
    </div>
    <div>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:DropDownList ID="DropDownList1" runat="server">
                    </asp:DropDownList>
                    <asp:Label ID="lblEtiqueta" runat="server" Text="What's my path"></asp:Label>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="AsyncFileUpload1" />
                </Triggers>
            </asp:UpdatePanel>
        </div>
        
    </div>
    </form>
</body>
</html>

Open in new window

0
 
dejaanbuCommented:
>>document.getElementById('lblStatus').innerText = text;  

1.  This line tells u r going to modifiy the text of lblStatus.. but lblStatus is outside the updatepanel. move it to inside the updatepanel

2. you cannot get a server control's referrence by using this statement.. so change document.getElementById('lblStatus').innerText = text;

TO
document.getElementById('<%=lblStatus.ClientID %>').innerText = text;

Open in new window

0
 
Sherman GutiAuthor Commented:
But I don't want to change lblStatus, i need to change lblEtiqueta and it is inside the updatepanel
0
 
dejaanbuCommented:
u r calling OnClientUploadComplete  - >  "UploadComplete"

this is the UploadComplete function, u posted

 function UploadComplete(sender, args) {
            //Postback for my UpdateFuckingPanel
            __doPostBack('UpdatePanel1', '');

            //Continue
            var filename = args.get_fileName();
            var contentType = args.get_contentType();
            var text = "Size of " + filename + " is " + args.get_length() + " bytes";
            if (contentType.length > 0) {
                text += " and content type is '" + contentType + "'.";
            }
           document.getElementById('lblStatus').innerText = text;
        }

if u want to change lblEtiqueta, then the highlighted code should be replaced by teh following line:

document.getElementById('<%=lblEtiqueta.ClientID %>').innerText = text;

0
 
Sherman GutiAuthor Commented:
Finally I have solved it by my self
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.