Monitor Upload Progress in Dynamic Data Field Template

Thread is closed for posting
2 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    15 posts
    Member since:
    Jul 2012

    Posted 05 Mar 2010 Link to this post

    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:

    <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"
            <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 { getset; } 
                public string URL { getset; } 
            } 
     
            string _CurrentFileName { getset; } 
            List<ImageDetails> _ExistingImgList { getset; } 
     
            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
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 09 Mar 2010 Link to this post

    Hi Jonathan,

    I suggest that you copy the approach shown in this demo. It allows for progress monitoring while uploading files. The demo shows how to workaround the AjaxPanel limitation as well.

    Sincerely yours,
    Genady Sergeev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top