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