asked on

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

Deja Anbu

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

Sherman Guti

ASKER

The label lblEtiqueta is in the UpdatePanel.
Everyway I Have moved all inside the UpdatePanel and doesn't work.

Sherman Guti

ASKER

Here is the website to run in Visual Studio WebSiteAjaxUpdate.zip

Deja Anbu

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

Sherman Guti

ASKER

ok I'll try!! see you in a hour!

Sherman Guti

ASKER

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

Deja Anbu

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

Sherman Guti

ASKER

But I don't want to change lblStatus, i need to change lblEtiqueta and it is inside the updatepanel

ASKER CERTIFIED SOLUTION

Sherman Guti

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Deja Anbu

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;

Sherman Guti

ASKER

Finally I have solved it by my self