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