?
Solved

AjaxFileUpload and UpdatePanel

Posted on 2011-05-08
12
Medium Priority
?
4,247 Views
Last Modified: 2012-05-11
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

0
Comment
Question by:Sherman Guti
  • 7
  • 4
11 Comments
 
LVL 14

Expert Comment

by:dejaanbu
ID: 35716304
ur AsyncFileUpload and lblStatus is outside the updatepanel. move it to inside the updatepanel and check.

0
 

Author Comment

by:Sherman Guti
ID: 35716441
The label lblEtiqueta is in the UpdatePanel.
Everyway I Have moved all inside the UpdatePanel and doesn't work.
0
 

Author Comment

by:Sherman Guti
ID: 35716889
Here is the website to run in Visual Studio WebSiteAjaxUpdate.zip
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 14

Expert Comment

by:dejaanbu
ID: 35717677
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
 

Author Comment

by:Sherman Guti
ID: 35721336
ok I'll try!! see you in a hour!
0
 

Author Comment

by:Sherman Guti
ID: 35725243
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
 
LVL 14

Expert Comment

by:dejaanbu
ID: 35726221
>>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
 

Author Comment

by:Sherman Guti
ID: 35728537
But I don't want to change lblStatus, i need to change lblEtiqueta and it is inside the updatepanel
0
 

Accepted Solution

by:
Sherman Guti earned 0 total points
ID: 35728562
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
 
LVL 14

Expert Comment

by:dejaanbu
ID: 35728673
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
 

Author Closing Comment

by:Sherman Guti
ID: 35763029
Finally I have solved it by my self
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
In real business world data are crucial and sometimes data are shared among different information systems. Hence, an agreeable file transfer protocol need to be established.
This Micro Tutorial will teach you how to add a cinematic look to any film or video out there. There are very few simple steps that you will follow to do so. This will be demonstrated using Adobe Premiere Pro CS6.
As many of you are aware about Scanpst.exe utility which is owned by Microsoft itself to repair inaccessible or damaged PST files, but the question is do you really think Scanpst.exe is capable to repair all sorts of PST related corruption issues?
Suggested Courses

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question