[Solved] Monitor Upload Progress in Dynamic Data Field Template

[Jonathan]

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">
        <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

[Genady Sergeev]

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.