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