Dynamically loading multiple AsyncUpload

2 posts, 0 answers
  1. Simon
    Simon avatar
    26 posts
    Member since:
    Jul 2011

    Posted 18 May 2012 Link to this post

    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
  2. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 22 May 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top