Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

Options
Go to last post Go to first unread
Scott Davis  
#1 Posted : Monday, March 15, 2010 1:21:00 PM(UTC)
Scott Davis

Rank: Member

Groups: Member
Joined: 2/12/2010(UTC)
Posts: 17

Hello. I have run into a problem with the Aurigma Dual ImageUploader control that was labeled as a bug by a developer in another thread on these forums. The issue is when you have multiple ImageUploader controls on a page and are handling the FileUploaded event, the handler for both controls will be called when the event was initiated from only one of the controls on the page.

Following a suggetion in that thread I created a work around for the problem using the AddField() method on the client side. I am handing the ClientBeforeUpload event and adding a field, using AddField, in that event that contains the ClientID of the ImageUploader control. Then on the server side in my FileUploaded event, I retrieve this field and compare the id to the ImageUploader.ClientID property. If they do not match, then I exit the handler and do nothing. This work around is working fine for me.

However, I have ran into a situation in which the field being added on the client side by AddField is NULL when I retrieve it in the FileUploaded event on the server side. I have created some sample code that reproduces the problem. I am using ASP.NET AJAX and the ComponentArt Dialog control, but I am hoping that someone may be able to offer some insight into what is happening and how I might be able to go about fixing it.

Here is the code:

MainTest.aspx

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainTest.aspx.cs" Inherits="TestWebApplication.AurigmaTest.MainTest" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register Src="ImageUploaderControl.ascx" TagName="ImageUploaderControl" TagPrefix="uc1" %>
<%@ Register Assembly="System.Web.Ajax" Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Src="ItemEditor.ascx" TagName="ItemEditor" TagPrefix="uc2" %>
<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:AjaxScriptManager ID="AjaxScriptManager1" runat="server" EnablePartialRendering="true">
    </asp:AjaxScriptManager>
    <div>
        <asp:UpdatePanel ID="upd1" runat="server">
            <ContentTemplate>
                <asp:Button ID="btn" runat="server" Text="Open Dialog" OnClick="btn_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <asp:UpdatePanel ID="updEditor" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <ComponentArt:Dialog Modal="true" AllowDrag="true" Alignment="MiddleCentre" ID="mdlEditor"
                    runat="server" Height="500" Width="615">
                    <Content>
                        <asp:Panel ID="pnlContent" runat="server" Width="100%">
                            <table cellpadding="8" cellspacing="0" width="100%">
                                <tr onmousedown="mdlAddImage.StartDrag(event);">
                                    <td>
                                        <asp:Label ID="lblTitle" runat="server" Text="Editor"></asp:Label>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:UpdatePanel ID="updEditor2" runat="server" UpdateMode="Conditional">
                                            <ContentTemplate>
                                                <uc2:ItemEditor ID="ItemEditor1" runat="server" />
                                            </ContentTemplate>
                                        </asp:UpdatePanel>
                                    </td>
                                </tr>
                            </table>
                        </asp:Panel>
                    </Content>
                    <Footer>
                    </Footer>
                </ComponentArt:Dialog>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

MainTest.aspx.cs

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace TestWebApplication.AurigmaTest
{
	public partial class MainTest : System.Web.UI.Page
	{
		protected void Page_Load(object sender, EventArgs e)
		{

		}

		protected void btn_Click(object sender, EventArgs e)
		{
			mdlEditor.IsShowing = true;
			updEditor.Update();
		}
	}
}

ItemEditor.ascx

Code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ItemEditor.ascx.cs"
    Inherits="TestWebApplication.AurigmaTest.ItemEditor" %>
<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>
<%@ Register Src="ImageUploaderControl.ascx" TagName="ImageUploaderControl" TagPrefix="uc1" %>
<br />
<br />
<br />
<asp:Button ID="btn" runat="server" Text="Submit" OnClick="btn_Click" /><br />
<br />
<uc1:ImageUploaderControl ID="ImageUploaderControl1" runat="server" attachmenttype="ProductOption" />
<br />
<br />
<input type="button" onclick="mdlEditor.Close();" id="Button1" value="Close" />

ItemEditor.ascx.cs

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace TestWebApplication.AurigmaTest
{
	public partial class ItemEditor : System.Web.UI.UserControl
	{
		protected void btn_Click(object sender, EventArgs e)
		{

		}
	}
}

ImageUploaderControl.ascx

Code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ImageUploaderControl.ascx.cs"
    Inherits="TestWebApplication.AurigmaTest.ImageUploaderControl" %>
<%@ Register Assembly="Aurigma.ImageUploader" Namespace="Aurigma.ImageUploader" TagPrefix="cc1" %>
<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>

<script type="text/javascript">
    function ClientBeforeUpload() {
        var iu = getImageUploader("<%=ImageUploader1.ClientID%>");
        iu.AddField("ImageUploaderID", "<%=ImageUploader1.ClientID%>");
    } 

</script>

<asp:HyperLink ID="lnkAddImage" runat="server" ToolTip="Add Image(s)" onclick="mdlAddImage.Show();"
    Text="Add Image" NavigateUrl="#">
</asp:HyperLink><br />
<ComponentArt:Dialog Modal="true" AllowDrag="true" Alignment="MiddleCentre" ID="mdlAddImage"
    runat="server" Height="500" Width="615">
    <Content>
        <asp:Panel ID="pnlContent" runat="server" Width="100%">
            <table cellpadding="8" cellspacing="0" width="100%">
                <tr onmousedown="mdlAddImage.StartDrag(event);">
                    <td>
                        <asp:Label ID="lblTitle" runat="server" Text="Add Images"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <cc1:ImageUploader ID="ImageUploader1" name="ImageUploader1" runat="server" Height="400"
                            LicenseKey="71060-4698C-00000-05AD1-8C271;72060-4698C-00000-00CD8-D244C" Width="600"
                            OnFileUploaded="ImageUploader1_FileUploaded" ShowDebugWindow="true" ActiveXControlEnabled="true"
                            Action="Main.aspx" PreserveHttpCookies="true" OnClientBeforeUpload="ClientBeforeUpload">
                        </cc1:ImageUploader>
                        <table width="100%">
                            <tr>
                                <td align="right">
                                    <input type="button" onclick="mdlAddImage.Close();" id="btnClose" value="Close" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </asp:Panel>
    </Content>
    <Footer>
    </Footer>
</ComponentArt:Dialog>

ImageUploader.ascx.cs

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

namespace TestWebApplication.AurigmaTest
{
	public partial class ImageUploaderControl : System.Web.UI.UserControl
	{
		protected void ImageUploader1_FileUploaded(object sender, Aurigma.ImageUploader.FileUploadEventArgs e)
		{
			string id = Request.Form["ImageUploaderID"];
		}
	}
}

In this example, there is a button on the MainTest page that opens a ComponentArt dialog modally. That dialog controls the ItemEditor.ascx control, which in turn hosts the ImageUploader.ascx control where the actual Aurigma ImageUploader is found.

In the FileUploaded handler in the ImageUploader.ascx.cs file, I am retrieving the "ImageUploaderID" value that is being added using AddField in the BeforeClientUpload handler.

If you pull up the MainTest.aspx page fresh, open the dialog by clicking the "Open Dialog" button, then click the "Add Image" link and upload an image, everything will work fine. The "ImageUploaderID" field can be retrieved in the FileUploaded handler without a problem. Subsequent attempts of uploading an image also work fine, even if you click the "Submit" button (which just caues a partial page post back) in between uploading images.

However, if you pull up the MainTest.aspx page fresh, open the dialog by Clicking the "Open Dialog" button, then click the Submit button FIRST (causing a partial page postback), then click the "Add Image" link and upload a file the "ImageUploaderID" field will be found to be NULL when you retrieve it in the FileUploaded handler. Subsequent attempts to upload a file will end with the same result.

So, something is happening when a partial page postback occurs by clicking that SUBMIT button that is causing the AddField mechanism of ImageUploader to stop working properly. This wouldn't be a problem for me except for the fact that I need this to work properly so that I can get around the issue with the FileUploaded event for every Aurigma ImageUploader on a page being fired when a file is uploaded to one of them.

Any help would be greatly appreciated. I had thought I had worked through all of the issues I was having integrating the ImageUploader control into my application and went ahead and purchased the product...then discovered this issue.

Thanks in advance,

Scott

andreym  
#2 Posted : Tuesday, March 16, 2010 1:30:43 AM(UTC)
andreym

Rank: Advanced Member

Groups:
Joined: 6/16/2009(UTC)
Posts: 134

Was thanked: 8 time(s) in 8 post(s)
Hello! Thanks for detailed description of the problem and code samples.

After investigating the issue we found that the cause of the issue is the dialog control you using. It creates two instances of Image Uploader on the same page with the absolutely same IDs.

Look at the screen below:

UserPostedImage

The mdlAddImage placed out of the UpdatePanel content. And Image Uploader is inside it.

This is the page source code after clicking Submit button and async postback:

UserPostedImage

There are two mdlAddImage dialogs and both of them has Image Uploader control inside it. Note, that Image Uploader instances also has same IDs. So, when in the ClientBeforeUpload function you call

Code:
getImageUploader("<%=ImageUploader1.ClientID%>");
it returns Image Uploader from the first mdlAddImage dialog. But the Add Image link always shows the last one.

Now you may want to know why it works if you upload files before you click Submit button. Well, since there is one Image Uploader on the page it add field to the Image Uploader, which are showed in the Add Image popup. And since the field has been added, all further upload attempts contain this field.

I think it is bad to create elements with the same IDs on the one page. It may be cause of the very strange behavior and bugs.

However, as a workaround you can check in the Page_load if it is async postback and if it is, then hide the Image Uploader.

ImageUploaderControl.ascx.cs

Code:
public partial class ImageUploaderControl : System.Web.UI.UserControl
	{
		protected void Page_Load(object sender, EventArgs e)
		{
			ScriptManager sm = ScriptManager.GetCurrent(this.Page);
			if (sm != null && sm.IsInAsyncPostBack)
			{
				pnlContent.Visible = false;
			}
			else
			{
				pnlContent.Visible = true;
			}
		}
		
		protected void ImageUploader1_FileUploaded(object sender, Aurigma.ImageUploader.FileUploadEventArgs e)
		{
			string id = Request.Form["ImageUploaderID"];
		}
	}

Edited by user Tuesday, March 16, 2010 1:32:25 AM(UTC)  | Reason: Not specified

andreym attached the following image(s):
screen1.jpg
screen2.jpg
Scott Davis  
#3 Posted : Tuesday, March 16, 2010 7:17:50 AM(UTC)
Scott Davis

Rank: Member

Groups: Member
Joined: 2/12/2010(UTC)
Posts: 17

I really appreciate you taking the time to look into this issue for me. This is not the first time that I have had a similar issue with the Dialog. Those issues were taken care of by calling a method to dispose of the dialog before it is opened. For instance, in the ItemEditor.ascx file you would change the declaration for the "Open Dialog" button to:

Code:

<asp:Button ID="btn" runat="server" Text="Open Dialog" OnClick="btn_Click" OnClientClick="mdlEditor.Dispose();"/>

I tried that here and it did not seem to make a difference. I currently do not have the expertise to use the debugging tool that you are using, which seems very useful. Is it Fiddler? If so, I do have that tool, but cannot see how I can use the tool to show me the information that you are displaying with it. I have a feeling that I have these issues in other parts of my application. Any info you could give me there, would be appreciated.

Thanks again for the help!

Scott Davis  
#4 Posted : Tuesday, March 16, 2010 8:58:29 AM(UTC)
Scott Davis

Rank: Member

Groups: Member
Joined: 2/12/2010(UTC)
Posts: 17

As an update to this, I was able to fix the issue. Basically I wrapped the mdlAddImage modal in an UpdatePanel, made the "Add Image" Hyperlink a Linkbuton which is an asynchpostback trigger to the UpdatePanel and opened the modal dialog from server side code. This is the way I'm doing the modals in the rest of my application and how I have alleviated the problem with controls being created with the same ID. In the OnClientClick event of the "Add Image" LinkButton, I call mdlAddImage.Dispose() which ensure that any remnants from the prior modal are disposed of.

Thanks again for pointing me in the right direction for this problem.

andreym  
#5 Posted : Tuesday, March 16, 2010 8:54:53 PM(UTC)
andreym

Rank: Advanced Member

Groups:
Joined: 6/16/2009(UTC)
Posts: 134

Was thanked: 8 time(s) in 8 post(s)
Hi! Glad you solve the problem with the same IDs. The tool I've used is the firefox addon Firebug, and this is the link where you can install it https://addons.mozilla.org/en-US/firefox/addon/1843.
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.