Multiple File Upload and Custom Handler

[Gianluca]

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?

[Shinu]

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

[Gianluca]

Thank's but I dont understand...The handler is called for every single file?

[Shinu]

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.

[Gianluca]

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?

[Shinu]

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.

[Gianluca]

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?