I have a custom field template for choosing / uploading images in my dynamic data project.
The uploading worked fine pretty much out of the box, but I just can't figure out how to get the progress manager / progress area to work. Basically need to provide users with feedback as their files are being uploaded in the DynamicData web application. My Edit page templaet is plain vanilla:
my custom field template looks like this:
and the code behind on the field template is:
I tried replacing the asp:UpdatePanel with teh telerik one; just dropping in the RadProgressManager and RadProgressArea; using the postback trigger method per: http://www.telerik.com/help/aspnet-ajax/upload_uploadingajax.html
etc
Help Please!!
/jonathan
The uploading worked fine pretty much out of the box, but I just can't figure out how to get the progress manager / progress area to work. Basically need to provide users with feedback as their files are being uploaded in the DynamicData web application. My Edit page templaet is plain vanilla:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server"> |
<asp:DynamicDataManager ID="DynamicDataManager1" runat="server" AutoLoadForeignKeys="true"> |
<DataControls> |
<asp:DataControlReference ControlID="FormView1" /> |
</DataControls> |
</asp:DynamicDataManager> |
<h2 class="DDSubHeader"> |
Edit |
<%= table.DisplayName %> |
record</h2> |
<asp:UpdatePanel ID="UpdatePanel1" runat="server"> |
<ContentTemplate> |
<asp:ValidationSummary ID="ValidationSummary1" runat="server" EnableClientScript="true" |
HeaderText="List of validation errors" /> |
<asp:DynamicValidator runat="server" ID="DetailsViewValidator" ControlToValidate="FormView1" |
Display="None" /> |
<asp:FormView runat="server" ID="FormView1" DataSourceID="DetailsDataSource" DefaultMode="Edit" |
OnItemCommand="FormView1_ItemCommand" OnItemUpdated="FormView1_ItemUpdated" OnDataBound="FormView1_DataBound"> |
<HeaderTemplate> |
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Update" Text="Update" |
CssClass="btnNext" /> |
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Cancel" Text="Cancel" |
CausesValidation="false" CssClass="btnNext" /> |
</HeaderTemplate> |
<EditItemTemplate> |
<table id="detailsTable" class="tableHR" cellpadding="6"> |
<asp:DynamicEntity runat="server" Mode="Edit" /> |
</table> |
</EditItemTemplate> |
<FooterTemplate> |
<br /> |
<asp:LinkButton ID="LinkButton3" runat="server" CommandName="Update" Text="Update" |
CssClass="btnNext" /> |
<asp:LinkButton ID="LinkButton4" runat="server" CommandName="Cancel" Text="Cancel" |
CausesValidation="false" CssClass="btnNext" /> |
</FooterTemplate> |
<EmptyDataTemplate> |
<div class="DDNoItem"> |
No such item.</div> |
</EmptyDataTemplate> |
</asp:FormView> |
<asp:EntityDataSource ID="DetailsDataSource" runat="server" EnableUpdate="true"> |
<WhereParameters> |
<asp:DynamicQueryStringParameter /> |
</WhereParameters> |
</asp:EntityDataSource> |
</ContentTemplate> |
</asp:UpdatePanel> |
</asp:Content> |
my custom field template looks like this:
<%@ Control Language="C#" AutoEventWireup="True" CodeBehind="ImageUpload_Edit.ascx.cs" |
Inherits="myProject.Admin.ImageUpload_Edit" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<div class="ImagePicker"> |
<asp:Panel ID="feedback" runat="server" Visible="false"> |
<p id="feedbackP" runat="server"> |
</p> |
</asp:Panel> |
<table> |
<tr> |
<td style="width: 10%;"> |
Current Image |
</td> |
<td> |
<asp:Image ID="img1" runat="server" Visible="true" ImageUrl='<%# GetImgUrl() %>' |
Width="100" Height="100" AlternateText="Selected Image" /> |
<asp:TextBox ID="TextBox1" runat="server" Text='<%# FieldValueEditString %>' CssClass="DDTextBox"></asp:TextBox> |
<asp:Button ID="btnClearImg" runat="server" Text="Clear Image" CssClass="btnStandard" |
OnClick="btnClearImg_Click" /> |
</td> |
</tr> |
<tr> |
<td> |
Upload New Image |
</td> |
<td> |
<telerik:RadUpload ID="RadUpload1" runat="server" AllowedFileExtensions=".jpg, .jpeg" |
ControlObjectsVisibility="None" EnableFileInputSkinning="false" RegisterWithScriptManager="true"> |
</telerik:RadUpload> |
<asp:Button ID="btnUpload" runat="server" Text="Upload File" CssClass="btnStandard" |
OnClick="btnUpload_Click" /> |
</td> |
</tr> |
<tr> |
<td> |
Choose Existing Image |
</td> |
<td> |
<asp:Button ID="btnChooseExisting" runat="server" Text="Choose Existing File" CssClass="btnStandard" |
OnClick="btnChooseExisting_Click" /> |
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="true" |
GridLines="None" PageSize="10" Skin="Office2007" AutoGenerateColumns="false" |
Visible="false" OnNeedDataSource="gridsNeedData"> |
<PagerStyle Mode="NumericPages" /> |
<MasterTableView NoMasterRecordsText="There are no records for you to view"> |
<Columns> |
<telerik:GridTemplateColumn ItemStyle-Width="100px"> |
<HeaderTemplate> |
<asp:Button ID="btnCloseRadGrid1" runat="server" OnClick="btnCloseRadGrid1_Click" |
Text="Close Image Picker" CssClass="btnStandard" /> |
</HeaderTemplate> |
<ItemTemplate> |
<asp:Button ID="btnSelect" runat="server" OnClick="btnSelect_Click" Text="Select" |
CssClass="btnStandard" /> |
<%-- <asp:Button ID="btnDelete" runat="server" OnClick="btnDelete_Click" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this item?\r\n\r\n(Cannot Undo)\r\n');" />--%> |
</ItemTemplate> |
</telerik:GridTemplateColumn> |
<telerik:GridImageColumn DataImageUrlFields="URL" ImageHeight="75" ImageWidth="75" |
HeaderText="Image (may appear distorted)" /> |
<telerik:GridBoundColumn DataField="FileName" HeaderText="Filename" /> |
</Columns> |
<AlternatingItemStyle CssClass="rgAltRow" /> |
<SortExpressions> |
<telerik:GridSortExpression FieldName="FileName" SortOrder="Ascending" /> |
</SortExpressions> |
</MasterTableView> |
</telerik:RadGrid> |
</td> |
</tr> |
</table> |
<asp:RegularExpressionValidator runat="server" ID="RegularExpressionValidator1" CssClass="DDControl" |
ControlToValidate="TextBox1" Display="Dynamic" Enabled="false" /> |
<asp:DynamicValidator runat="server" ID="DynamicValidator1" CssClass="DDControl" |
ControlToValidate="TextBox1" Display="Dynamic" /> |
</div> |
and the code behind on the field template is:
using System; |
using System.Collections.Specialized; |
using System.ComponentModel.DataAnnotations; |
using System.Web.DynamicData; |
using System.Web; |
using System.Web.UI; |
using System.Web.UI.WebControls; |
using Telerik.Web.UI; |
using System.Collections.Generic; |
namespace myProject.Admin |
{ |
public partial class ImageUpload_Edit : System.Web.DynamicData.FieldTemplateUserControl |
{ |
internal sealed class ImageDetails |
{ |
public string FileName { get; set; } |
public string URL { get; set; } |
} |
string _CurrentFileName { get; set; } |
List<ImageDetails> _ExistingImgList { get; set; } |
protected void Page_Load(object sender, EventArgs e) |
{ |
SetUpValidator(RegularExpressionValidator1); |
SetUpValidator(DynamicValidator1); |
} |
protected Uri GetImgUrl() |
{ |
try |
{ |
Uri imgUri = new Uri(string.Format("{0}{1}", Constants._WEBIMAGELOCATION, this.FieldValue.ToString())); |
return imgUri; |
} |
catch (Exception) |
{ |
img1.Visible = false; |
return null; |
} |
} |
protected override void ExtractValues(IOrderedDictionary dictionary) |
{ |
dictionary[Column.Name] = ConvertEditedValue(TextBox1.Text); |
} |
public override Control DataControl |
{ |
get |
{ |
return TextBox1; |
} |
} |
protected void gridsNeedData(object sender, GridNeedDataSourceEventArgs e) |
{ |
GetFileListData(); |
RadGrid1.DataSource = _ExistingImgList; |
} |
protected void btnUpload_Click(object sender, System.EventArgs e) |
{ |
//DisposeRadGrid1(); |
bool transferSuccessful = false; |
if (this.RadUpload1.InvalidFiles.Count > 0) |
{ |
feedbackP.InnerHtml = "You cannot upload that type of file. Please submit documents as JPG images (.JPG, .JPEG)<br />" + |
"Please ensure that your uploaded files end with an appropriate file extension (noted above)<br />"; |
feedback.CssClass = "emergency_box"; |
feedback.Visible = true; |
} |
else |
{ |
transferSuccessful = HandleUploadedFiles(); |
if (transferSuccessful) |
{ |
feedbackP.InnerHtml = "Your file was uploaded successfully."; |
feedback.CssClass = "callout_box"; |
feedback.Visible = true; |
TextBox1.Text = _CurrentFileName; |
ShowImg1(); |
} |
else |
{ |
feedbackP.InnerHtml = "No File Selected or File upload failed."; |
feedback.CssClass = "callout_box"; |
feedback.Visible = true; |
} |
} |
} |
protected void GetFileListData() |
{ |
List<string> myList = Helpers.callFtpDir(new ftpService.serviceArgs() { transferProfile = Constants._FTPTRANSFERPROFILEMYRECYCLOPEDIA }, Constants._REMOTEPATH); |
_ExistingImgList = new List<ImageDetails>(); |
myList.ForEach(i => _ExistingImgList.Add(new ImageDetails() { FileName = i, URL = string.Format("{0}{1}", Constants._WEBIMAGELOCATION, i) })); |
} |
protected void btnChooseExisting_Click(object sender, System.EventArgs e) |
{ |
GetFileListData(); |
RadGrid1.DataSource = _ExistingImgList; |
RadGrid1.DataBind(); |
RadGrid1.Visible = true; |
btnChooseExisting.Visible = false; |
} |
protected void btnClearImg_Click(object sender, EventArgs e) |
{ |
DisposeRadGrid1(); |
img1.Visible = false; |
TextBox1.Text = null; |
} |
protected void btnCloseRadGrid1_Click(object send, EventArgs e) |
{ |
DisposeRadGrid1(); |
} |
protected void btnSelect_Click(object sender, System.EventArgs e) |
{ |
_CurrentFileName = ((sender as Button).Parent.Parent as GridDataItem)["FileName"].Text; |
TextBox1.Text = _CurrentFileName; |
DisposeRadGrid1(); |
ShowImg1(); |
} |
protected void btnDelete_Click(object sender, System.EventArgs e) |
{ |
// not implemented as will require a yet-unwritten ftp call |
} |
private bool HandleUploadedFiles() |
{ |
//System.Threading.Thread.Sleep(10000);// simulate long file load for testing |
int failCount = 0; |
bool blnResultsExist = false; |
try |
{ |
blnResultsExist = this.RadUpload1.UploadedFiles.Count > 0; |
if (blnResultsExist) |
{ |
if (System.IO.Directory.Exists(Constants._ATTACHMENTPATH) == false) |
{ |
try |
{ |
System.IO.Directory.CreateDirectory(Constants._ATTACHMENTPATH); |
} |
catch (Exception ex) |
{ |
feedbackP.InnerHtml = "Remote directory cannot be created. Error message is " + ex.ToString(); |
feedback.CssClass = "emergency_box"; |
feedback.Visible = true; |
string strMessage = ""; |
strMessage = ex.Message.ToString() + Constants._VBCRLF + Constants._VBCRLF + ex.StackTrace.ToString(); |
} |
} |
} |
if (RadUpload1.UploadedFiles.Count == 1) |
{ |
foreach (Telerik.Web.UI.UploadedFile file in RadUpload1.UploadedFiles) |
{ |
file.SaveAs(string.Format("{0}\\{1}", Constants._ATTACHMENTPATH, file.FileName)); |
// build the arguments for the ftp service and execute it |
ftpService.serviceArgs args = Helpers.buildServiceArgsJobDescription(file); |
bool serviceResponse = Helpers.callFtpService(args); |
if (serviceResponse == false) |
failCount++; |
} |
} |
} |
catch (Exception ex) |
{ |
string strMessage = ""; |
strMessage = ex.Message.ToString() + Constants._VBCRLF + Constants._VBCRLF + ex.StackTrace.ToString(); |
feedbackP.InnerHtml = strMessage; |
feedback.CssClass = "emergency_box"; |
feedback.Visible = true; |
failCount++; |
} |
if (failCount == 0 && blnResultsExist) |
_CurrentFileName = RadUpload1.UploadedFiles[0].FileName; |
return (failCount == 0 && blnResultsExist); |
} |
private void DisposeRadGrid1() |
{ |
RadGrid1.DataSource = null; |
RadGrid1.Visible = false; |
btnChooseExisting.Visible = true; |
} |
private void ShowImg1() |
{ |
img1.ImageUrl = string.Format("{0}{1}", Constants._WEBIMAGELOCATION, _CurrentFileName); |
img1.Visible = true; |
} |
} |
} |
I tried replacing the asp:UpdatePanel with teh telerik one; just dropping in the RadProgressManager and RadProgressArea; using the postback trigger method per: http://www.telerik.com/help/aspnet-ajax/upload_uploadingajax.html
etc
Help Please!!
/jonathan