Multiple File Upload and Custom Handler

7 posts, 0 answers
  1. Gianluca
    Gianluca avatar
    12 posts
    Member since:
    Dec 2012

    Posted 30 Jul 2014 Link to this post

    Hi,
    I trying to build a custom handler, becouse I dont want to use temporary folder, and use multiple file upload with rad async upload but I dont understand how to do.
    I read over net that isn't possible...some ideas?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Jul 2014 in reply to Gianluca Link to this post

    Hi Gianluca,

    It is possible to upload multiple files using Custom HTTP Handler without using the TemporaryFolder. If you don't want to use temporary files, do not set TemporaryFolder property and set the DisableChunkUpload property to true. Please have a look into the following code I tried for your scenario.

    ASPX:
    <telerik:RadAsyncUpload ID="RAsyncUpload" runat="server" HttpHandlerUrl="Handler.ashx"
        MultipleFileSelection="Automatic" OnClientFileUploading="OnClientFileUploading">
    </telerik:RadAsyncUpload>

    JavaScript:
    <script type="text/javascript">
        function OnClientFileUploading(sender, args) {
              //Set the target path
            var parameter = { path: "Uploads" };
            args.set_queryStringParams(parameter);
        }
    </script>

    C# : Handler.ashx
    <%@ WebHandler Language="C#" Class="Handler" %>
    using System;
    using System.Web;
    public class Handler : Telerik.Web.UI.AsyncUploadHandler
    {
        protected override Telerik.Web.UI.IAsyncUploadResult Process(Telerik.Web.UI.UploadedFile file, HttpContext context, Telerik.Web.UI.IAsyncUploadConfiguration configuration, string tempFileName)
        {
            var queryStringParam1 = context.Request.QueryString["path"];  //Get the path from the Query string
            var path = context.Server.MapPath(queryStringParam1);   
            file.SaveAs(path + "\\" + file.GetName());
            return CreateDefaultUploadResult<Telerik.Web.UI.UploadedFileInfo>(file);
        }
    }

    Thanks,
    Shinu
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gianluca
    Gianluca avatar
    12 posts
    Member since:
    Dec 2012

    Posted 30 Jul 2014 in reply to Shinu Link to this post

    Thank's but I dont understand...The handler is called for every single file?
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 Jul 2014 in reply to Gianluca Link to this post

    Hi Gianluca,

    By default RadAsyncUpload control relies on an Http handler to upload files and performs the uploads by dividing the files in chunks and saving them in a temporary folder. Apart from this it is possible to inherit and extend the default Http handler to create a custom one which allows you to save files to the target instead of a temporary folder.

    The Custom Http handler is invoked for every file. You can check this help documentation on How to extend the RadAsyncUpload handler to know more about this.

    Thanks,
    Shinu.
  6. Gianluca
    Gianluca avatar
    12 posts
    Member since:
    Dec 2012

    Posted 31 Jul 2014 in reply to Shinu Link to this post

    I've tryed your code but DisableChunkUpload  and EnableInlineProgress set to false dont work!

    here the code

    <script type="text/javascript">
        var modalPopupBehavior = $find('mpeUpload');
        function OnClientProgressStartedHandler(sender, e) {
             
            modalPopupBehavior.show();
        }
        function OnClientFilesUploaded(sender, e) {
            modalPopupBehavior.hide();
        }
        function OnClientFileUploading(sender, args) {
     
            var parameter = { description: $find("<%=txtDescription.ClientID %>").get_value() };
            args.set_queryStringParams(parameter);
        }
     
    </script>
     
    <telerik:RadProgressManager ID="pm"
          runat="server"
          OnClientProgressStarted="OnClientProgressStartedHandler" />
     
    <asp:Panel ID="pnlProgress" runat="server">
     
        <telerik:RadProgressArea ID="rpArea" runat="server" 
                DisplayCancelButton="true"
                ProgressIndicators="TotalProgressBar, FilesCountBar, FilesCount, FilesCountPercent, SelectedFilesCount, CurrentFileName, TimeElapsed, TimeEstimated"
                ResolvedRenderMode="Classic" Skin="Vista">
                    <Localization Cancel="Annulla" />
                    <Localization TotalFiles="File totali inviati" />
                    <Localization ElapsedTime="Tempo trascorso" />
                    <Localization EstimatedTime="Tempo stimato" />
                    <Localization UploadedFiles="Caricamento" />
                    <Localization CurrentFileName="File in caricamento" />
        </telerik:RadProgressArea>
     
    </asp:Panel>
     
    <div>
         
        <div class="contenitore_campi">
                    
            <div class="uplDocs_ins_middle_contenitore">
                <div class="uplDocs_ins_small_contenitore">
                    <span id="lbDocumentFile" runat="server" />
                </div>
                <div class="uplDocs_ins_small_contenitore">
     
                    <telerik:RadAsyncUpload ID="raUpload" runat="server"
                        EnableInlineProgress="false"
                        MultipleFileSelection="Automatic"
                        DisableChunkUpload="true"
                        HttpHandlerUrl="~/Handler/GenericAsyncUpload.cs"
                        OnClientFilesUploaded="OnClientFilesUploaded"
                        OnClientFileUploading="OnClientFileUploading">
                        <Localization Select="Seleziona" />
                        <Localization Cancel="Annulla" />                   
                    </telerik:RadAsyncUpload>             
                     
                </div>
            </div>
                    
            <div class="uplDocs_ins_middle_contenitore">
                <div class="uplDocs_ins_small_contenitore">
                    <span id="lbDescription"  runat="server"  />
                </div>
                <div class="uplDocs_ins_small_contenitore">
                    <asp:TextBox ID="txtDescription" runat="server" CssClass = "insert_light_office" style="width:235px" />
                </div>
            </div>
                    
            <div class="uplDocs_ins_middle_contenitore">
                <asp:ImageButton ID="btnUpload" runat="server"
                                    onclick="btnUpload_Click"
                                    ImageUrl="~/images/inserisci.png" />
            </div>
     
        </div>
     
    </div>
     
     
     <ajaxToolKit:ModalPopupExtender ID="mpeUpload"
          TargetControlID="hiddenTargetControlForModalPopup"
          BackgroundCssClass="myClass"
          PopupControlID="pnlProgress"
          runat="server">
    </ajaxToolKit:ModalPopupExtender>
     
    <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />


    code behind

    public partial class AsyncUploadDocs : UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
             
        }
     
        protected void btnUpload_Click(object sender, ImageClickEventArgs e)
        {
            //RadProgressContext context = RadProgressContext.Current;
            //context.SecondaryTotal = "100";
            //for (int i = 1; i < 100; i++)
            //{
            //    context.SecondaryValue = i.ToString();
            //    context.SecondaryPercent = i.ToString();
            //    context.CurrentOperationText = "Doing step " + i.ToString();
            //    if (!Response.IsClientConnected)
            //    {
            //        //Cancel button was clicked or the browser was closed, so stop processing
            //        mpeUpload.Hide();
            //        break;
            //    }
            //    // simulate a long time performing the current step
            //    System.Threading.Thread.Sleep(100);
            //}
        }
     
        public void LoadControl(AsyncUploadTypes uploadType, string libraryName, int key, int? origineIndex)
        {
            GenericAsyncUploadConfiguration config =
                  raUpload.CreateDefaultUploadConfiguration<GenericAsyncUploadConfiguration>();
            config.TypeUpload = uploadType;
            config.LibraryName = libraryName;
            config.KeyIndex = key;
            config.OrigineIndex = origineIndex;
     
            raUpload.UploadConfiguration = config;
        }
    }

    Configuration object
    [Serializable]
        public class GenericAsyncUploadConfiguration : AsyncUploadConfiguration
        {
            private AsyncUploadTypes typeUpload;
            public AsyncUploadTypes TypeUpload
            {
                get
                {
                    return typeUpload;
                }
     
                set
                {
                    typeUpload = value;
                }
            }
     
            private string libraryName;
            public string LibraryName
            {
                get
                {
                    return libraryName;
                }
     
                set
                {
                    libraryName = value;
                }
            }
     
            private int? origineIndex;
            public int? OrigineIndex
            {
                get
                {
                    return origineIndex;
                }
     
                set
                {
                    origineIndex = value;
                }
            }
     
            private int keyIndex;
            public int KeyIndex
            {
                get
                {
                    return keyIndex;
                }
     
                set
                {
                    keyIndex = value;
                }
            }
        }
     
        public class GenericAsyncUploadResult : AsyncUploadResult
        {
            private bool uploadSuccessfull;
            public bool UploadSuccessfull
            {
                get { return uploadSuccessfull; }
                set { uploadSuccessfull = value; }
            }
     
            private string uploadErrorMessage;
            public string UploadErrorMessage
            {
                get { return uploadErrorMessage; }
                set { uploadErrorMessage = value; }
            }
        }

    Handler

    protected override IAsyncUploadResult Process(UploadedFile file,
                                                          HttpContext context,
                                                          IAsyncUploadConfiguration configuration,
                                                          string tempFileName)
            {
                IDbContext _dataContext = _dataContext = CoreFactory.Resolve<IDbContext>(".");
     
                var description = context.Request.QueryString["description"];
     
                GenericAsyncUploadResult result = CreateDefaultUploadResult<GenericAsyncUploadResult>(file);
                GenericAsyncUploadConfiguration conf = configuration as GenericAsyncUploadConfiguration;
                try
                {
             
                   [business code]
     
                    result.UploadSuccessfull = true;
                }
                catch (Exception ex)
                {
                    result.UploadErrorMessage = ex.Message;
                    result.UploadSuccessfull = true;
                }
     
     
                return result;
            }

    All this code is inside a user control that is called from a aspx.page.

    Any ideas?
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 Aug 2014 in reply to Gianluca Link to this post

    Hi Gianluca,

    Please do the following modification in your code snippet which works fine at my end.

    UserControl ASCX:
    <asp:TextBox ID="txtDescription" runat="server" />
    <telerik:RadAsyncUpload ID="raUpload" runat="server" EnableInlineProgress="false"
        MultipleFileSelection="Automatic" DisableChunkUpload="true" HttpHandlerUrl="~/RadAsyncUpload/Handler.ashx" OnClientFileUploading="OnClientFileUploading">
        <Localization Select="Seleziona" />
        <Localization Cancel="Annulla" />
    </telerik:RadAsyncUpload>

    UserControl JavaScript:
    function OnClientFileUploading(sender, args) {
        var parameter = { description: document.getElementById('<% =this.TextBoxClientID%>').value };
        args.set_queryStringParams(parameter);
    }

    UserControl C#:
    public string TextBoxClientID { get { return this.txtDescription.ClientID; } }

    Thanks,
    Shinu.
  8. Gianluca
    Gianluca avatar
    12 posts
    Member since:
    Dec 2012

    Posted 01 Aug 2014 in reply to Shinu Link to this post

    Thank's Shinu,
    but I've another question: if you read my code I try to put a progress area and I want that open in a modalpopupextender. I dont understand why JQuery doesnt work (dont find textbox and modalpopupextender). And I dont understand where calculate progress of progress area (client code or server side code)?!?
    How you some ideas?
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017