Dynamically loading multiple AsyncUpload

[Simon]

Hey Guys,
I'm hoping you can help me out here with some ugly ajavscript errors I'm getting.
I have a usercontrol which houses an asyncupload control for uploading an image and displaying a preview.
The control works great when inserted into a page stand-alone.  Even several side by side work great.

I now have the need to dynamically load in a variable number of these into a second control according to some configuration logic.
They are added to a placeholder and reloaded with every postback to stop them disappearing.

I am testing with two controls being loaded in.  They appear to load in fine, but only one will work correctly.  Which one works depends on which you use first.  Either one, stays functional until you try and use the second, which then gives the following javascript errors as soon as you click on a file in the file chooser and try to open:

w.Content is undefined
[Break On This Error]

w.Content.Page.MarshalUploads();

Teleri...e2c54c1 (line 30193)
Unhandled Error in Silverlight Application Failed to Invoke: _onFilesSelected. at System.Windows.Browser.ScriptObject.Invoke(String name, Object[] args) at UploadPrototype.EventManager.FilesSelected(Int32 filesCount) at UploadPrototype.MainPage.OpenDialog() at UploadPrototype.MainPage.OnMouseLeftButtonUp(MouseButtonEventArgs e) at System.Windows.Controls.Control.OnMouseLeftButtonUp(Control ctrl, EventArgs e) at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName, UInt32 flags)

Here is the source of the controls being loaded:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ImageUploader.ascx.cs" Inherits="ArtsHub.Controls.ImageUploader" %>
<telerik:RadAjaxPanel ID="rapImageUpload" runat="server" LoadingPanelID="alpLoadingPanel" RenderMode="Inline">
    <telerik:RadBinaryImage ID="imgMainImage" runat="server" ResizeMode="Fit" />
    <telerik:RadAsyncUpload ID="rauMainImage" runat="server" InitialFileInputsCount="1" MaxFileInputsCount="1" OnFileUploaded="rauMainImage_FileUploaded" />
</telerik:RadAjaxPanel>
<telerik:RadAjaxLoadingPanel ID="alpLoadingPanel" runat="server" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">

    function <%= this.ClientID %>_ClientFileUploaded(sender, eventArgs) {
       var rap = $find("<%= rapImageUpload.ClientID %>");
       rap.ajaxRequest();
    }


</script>
</telerik:RadCodeBlock>

And the code behind :

public partial class ImageUploader : System.Web.UI.UserControl
{

    public RadAsyncUpload UploaderControl { get { return rauMainImage; } }
    public RadBinaryImage BinaryImageControl { get { return imgMainImage; } }
    public Images.ImageFactory.ImageTypes ImageType { get; set; }
    public Globals.SectionIds SectionId { get; set; }
    public string ImageURL { get; set; }
    public int Width { get; set; }
    public int Height { get; set; }
    public string[] AllowedFileExtensions { get; set; }

    protected void Page_Init(object sender, EventArgs e)
    {
        UploaderControl.OnClientFileUploaded = this.ClientID + "_ClientFileUploaded";
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {

            //rauMainImage.AllowedFileExtensions = AllowedFileExtensions;
        }

        // Get Preview Image
        if (imgMainImage.DataValue == null && ImageURL != "" && ImageURL != null)
        {
            imgMainImage.ImageUrl = ImageURL;
            imgMainImage.Width = System.Web.UI.WebControls.Unit.Pixel(Width);
            imgMainImage.Height = System.Web.UI.WebControls.Unit.Pixel(Height);
        }

    }


    protected void rauMainImage_FileUploaded(object sender, FileUploadedEventArgs e)
    {
        try
        {
            if (e.IsValid)
            {
                imgMainImage.Width = System.Web.UI.WebControls.Unit.Pixel(Width);
                imgMainImage.Height = System.Web.UI.WebControls.Unit.Pixel(Height);

                // Update preview
                using (Stream stream = e.File.InputStream)
                {
                    byte[] imageData = new byte[stream.Length];
                    stream.Read(imageData, 0, (int)stream.Length);
                    imgMainImage.DataValue = imageData;
                    imgMainImage.AlternateText = e.File.FileName;
                }

                // Do upload
                IListing thisItem;

                switch (SectionId)
                {
                    case Globals.SectionIds.News:
                        thisItem = ContentMain.GetContentMain(ContentMain.GetContentId);
                        break;
                    case Globals.SectionIds.Jobs:
                        thisItem = Job.GetJob(Job.GetJobId);
                        break;
                    case Globals.SectionIds.Classifieds:
                        thisItem = null;
                        break;
                    case Globals.SectionIds.Events:
                        thisItem = null;
                        break;
                    case Globals.SectionIds.MembersResumes:
                        thisItem = MemberResume.GetMemberResume(MemberResume.GetMemberResumeId, null, true);
                        break;
                    case Globals.SectionIds.Directory:
                    default:
                        thisItem = null;
                        break;

                }

                thisItem.UploadListingImage(e.File, ImageType);
            }
        }
        catch (Exception ex)
        {
            BLL.Emailing.Emailing.EmailBug("Error in ImageUploader.rauMainImage_FileUploaded!", "Section" + SectionId.ToString() + "<br>Error:" + ex.Message.ToString());
        }


    }

}

Any help is greatly appreciated.

Thanks

[Peter Filipov]

Hi Simon,

From the call stack I noticed that the error is coming from Silverlight. RadAsyncUpload has Silverlight module to upload files. Please set DisablePlugins property to true (Silverlight and Flash modules will be disabled). Unfortunately the plugins' behavior is beyond our control and unexpected errors are thrown.

Could you please try to run your application under Firefox browser (under FF the RadAsyncUpload control uses FileApi module)? Is it working correctly?

In case that you still experience some issues, please send a working sample project to investigate it locally.

Regards,
Peter Filipov
the Telerik team