Quantcast
Channel: ASP.NET AJAX + Ajax Control Toolkit (ACT)
Viewing all articles
Browse latest Browse all 5678

Javascript error using AjaxFileUpload, Updatepanel and repeater with button events.

$
0
0

Im building a AJAX file uploader tool using the AjaxFileUpload control and then displaying the uploaded files in a repeater in an updatepanel along with buttons to then remove each file from the list.

So far i have the file uploading and adding to the list within the repeater and also the ability to delete the files from the list working fine BUT i then get a JS error which stops the FileUploader from allowing more files to be uploaded (when the user clicks delete).

Front end code :

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><script type="text/javascript">
    function uploadComplete(sender) {
        var hiddenField = $get('<%=HiddenField3.ClientID %>');
        if (hiddenField) {
            hiddenField.value = (new Date()).getTime();
            __doPostBack('<%=HiddenField3.ClientID %>', '');
        }
    }

    function DeleteButton(btn) {
        $get("#".btn).click();
    }</script><asp:PlaceHolder runat="server" ID="phControls"><asp:UpdatePanel ID="uPnlUploadedFiles" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False"><ContentTemplate><asp:Repeater runat="server" ID="rptFiles"><HeaderTemplate><ul></HeaderTemplate><ItemTemplate><asp:Literal runat="server" ID="litFileName"/> - <asp:Button runat="server" Text="Delete" ID="btnDelete" CommandName="deletefile" /><br /></ItemTemplate><FooterTemplate></ul></FooterTemplate></asp:Repeater><asp:HiddenField ID="HiddenField3" runat="server" OnValueChanged="HiddenField3_ValueChanged" /></ContentTemplate></asp:UpdatePanel><ajaxToolkit:AjaxFileUpload runat="server" ID="AjaxFileUpload1" MaximumNumberOfFiles="5" OnClientUploadComplete="uploadComplete" /></asp:PlaceHolder>

Code Behind :

public partial class DocumentUploader : System.Web.UI.UserControl
    {
        public int DocumentFolderId 
        {
            get
            {
                if (Session["DocumentFolderId"] == null)
                    Session["DocumentFolderId"] = 0;

                return (int)Session["DocumentFolderId"];
            }

            set
            {
                int documentFolderId;
                int.TryParse(value.ToString(), out documentFolderId);
                Session["DocumentFolderId"] = documentFolderId;
            } 
        }

        public Dictionary<string, UploadedFile> UploadedFiles
        {
            get
            {
                if (Session["UploadedFiles"] == null)
                    Session["UploadedFiles"] = new Dictionary<string, UploadedFile>();

                return Session["UploadedFiles"] as Dictionary<string, UploadedFile>;
            }
            set { Session["UploadedFiles"] = value; }
        }

        protected override void OnInit(EventArgs e)
        {
            AjaxFileUpload1.UploadComplete += AjaxFileUpload1_UploadComplete;
            rptFiles.ItemDataBound += rptFiles_ItemDataBound;
            rptFiles.ItemCommand += rptFiles_ItemCommand;
        }

        void rptFiles_ItemCommand(object source, RepeaterCommandEventArgs e)
        {
            if (e.CommandName == "deletefile")
            {
                if (e.CommandArgument != null)
                {
                    UploadedFiles.Remove(e.CommandArgument.ToString());

                    rptFiles.DataSource = UploadedFiles;
                    rptFiles.DataBind();

                    uPnlUploadedFiles.Update();
                }
            }
        }

        void rptFiles_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.DataItem == null)
                return;

            KeyValuePair<string, UploadedFile> kvp = (KeyValuePair<string, UploadedFile>)e.Item.DataItem;

            if (kvp.Value != null)
            {
                UploadedFile uploadedFile = kvp.Value;

                if (uploadedFile != null)
                {
                    Literal litFileName = e.Item.FindControl("litFileName") as Literal;

                    if (litFileName != null)
                        litFileName.Text = uploadedFile.FileName;

                    Button btnDelete = e.Item.FindControl("btnDelete") as Button;
                    if (btnDelete != null)
                    {
                        btnDelete.CommandArgument = kvp.Key;
                        btnDelete.OnClientClick = string.Format("DeleteButton('{0}');return false;", btnDelete.ClientID);
                    }

                }
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                phControls.Visible = DocumentFolderId != 0;
            }
        }

        void AjaxFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AjaxFileUploadEventArgs e)
        {
            if (e != null && !string.IsNullOrEmpty(e.FileId))
            {
                // add files to list
                UploadedFiles.Add(e.FileId, new UploadedFile()
                    {
                        ContentType = e.ContentType,
                        FileId = e.FileId,
                        FileName = e.FileName,
                        FileSize = e.FileSize,
                        MediaId = UploadFile(e)
                    });
            }
        }

        private int UploadFile(AjaxControlToolkit.AjaxFileUploadEventArgs e)
        {
            int mediaId = 0;

            if (UmbracoUtils.GetSiteSettingsValue("memberDocumentsFolder") != null)
            {
                int memberLogosFolderId;

                if (int.TryParse(UmbracoUtils.GetSiteSettingsValue("memberDocumentsFolder"), out memberLogosFolderId))
                {
                    //mediaId = MediaUtils.CreateImage(DocumentFolderId, fileUpload.PostedFile, 0);
                }
            }

            return mediaId;
        }

        protected void HiddenField3_ValueChanged(object sender, EventArgs e)
        {
            rptFiles.DataSource = UploadedFiles;
            rptFiles.DataBind();

            uPnlUploadedFiles.Update();
        }
    }

    public class UploadedFile
    {
        public string ContentType { get; set; }
        public string FileId { get; set; }
        public string FileName { get; set; }
        public int FileSize { get; set; }
        public int MediaId { get; set; }
    }

JS error :

Sys.ArgumentUndefinedException: Sys.ArgumentUndefinedException: Value cannot be undefined. Parameter name: id
[Break On This Error] 	

{ name: "eventArgs", type: XMLHttpRequestProgressEvent }

Any suggestions appreciated.

Steve



Viewing all articles
Browse latest Browse all 5678

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>